カテゴリー: jQuery

nivo slider とレスポンシブルwebデザイン

http://kachibito.net/web-design/simple-responsive-slideshow.html

 

div {
    position:relative;
    width: 100%;
    max-width:450px;
    padding:0;
    margin:0 auto;
}
div img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

例えばタブレット用のcssには、下記を追加

.nivoSlider
{ position:relative;    width: 100%;    max-width:979px;    padding:0;    margin:0 auto;}

.nivoSlider img
{ position: relative;    top: 0;    left: 0;    width: 100%;    height: auto;}

.nivoSlider     .nivoSlider img はnivo-slider.cssで定義されているので、タブレット用のcssに記述し直して再定義させる。これしないと、ブラウザの幅が縮小になった時に、読み込んだ画像分、高さが増し加わってレイアウトが崩れる事になる。

Nivo Sliderとwordpress

https://ciao-gaki.ssl-lolipop.jp/memo/?p=792

themes内に nivo-sliderを設置　（デスクトップ、webコンテンツ、nivo-sliderより）

head内に下記表記
※pascal.css, orman.css, へのリンク設定しないとページャー部分がコントロール出来ないので表記する必要あり

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/themes/default/default.css” type=”text/css” media=”screen” /> <link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/themes/pascal/pascal.css” type=”text/css” media=”screen” /> <link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/themes/orman/orman.css” type=”text/css” media=”screen” /><link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/nivo-slider.css” type=”text/css” media=”screen” ><link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/demo/style.css” type=”text/css” media=”screen” >

 

※必要なのは nivo-slider.css    jquery.min.js     nivo-slider.pack.jsがあれば動く。上の表記のように沢山は不要。ただ、メイン画像の上に　prev    next  の表記が出ちゃう場合はその部分をvisibility:hidden  にしちゃったが、本当は表示出来るようにした方がいい。

 

bodyに下記表記

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/demo/scripts/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/nivo-slider/jquery.nivo.slider.pack.js”></script>

<script type=”text/javascript”>
$(window).load(function() {        $(‘#slider’).nivoSlider( {
effect:’random’, // 画像切り替え時のアニメーション
slices:15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed:500, // アニメーション速度(ms)
pauseTime:5000, // 画像切り替えまでの時間(ms)
controlNav:false, // コントロールナビの非表示
} );
});
</script>

<div　class=”slider-wrapper theme-default”>
<div id=”slider”>
<img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image1.jpg” alt=””  />         <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image2.jpg” alt=””  />       <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image3.jpg” alt=”” />       <img src=”<?php bloginfo(‘template_directory’); ?>/image/top/image4.jpg” alt=””/>         </div>
</div>

 

エフェクトについて

 

Zoomooz 任意の要素を拡大表示

Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。

画像をズームさせてギャラリー風に見せたり、テキストを一部拡大させて効果的にみせたりすることに使用することができます。

web designing 2013/6月号　ｐ56

スクリプト　デスクトップのwebコンテンツツールのjq百花繚乱/01_UI/05_Zoomooz/

testサンプル　centia/02/zoomooz.html

http://pannyatto.firebird.jp/archives/503

 

 

Zoomoozの既知のバグと問題

  • Webkit系ブラウザでフルページのズームが機能しません。
  • 別途CSSファイル（zoomooz.css）を必要とします。
  • Webkit系ブラウザで非常に長いページはネイティブアニメーションの問題で回転を伴うズームが機能しません。
  • CSSのbox-shadowはアニメーションをゆっくりさせます。
  • Operaでテキストコンテンツのエレメントを変化させるときはバグります。
  • 時々、間違った方向を経由して回転します。

 

ipadで縦横持ち直しながら作動させると挙動がおかしくなる。置いたままなら大丈夫。

    http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-zoomooz.html

     

    こっちもチェック

    http://www.skuare.net/2010/09/jqueryzoomoozjs.html

    <link rel=”stylesheet” href=”zoomooz.css” type=”text/css” />
    < script type=”text/javascript” src=”sylvester.js”></script>
    < script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
    < script type=”text/javascript” src=”jquery.zoomooz.js”></script>
    < script>
    $(function(){
    $(“.要素名”).click(function(evt) {
    $(this).zoomTo();
    evt.stopPropagation();
    });
    $(“body”).click(function(evt) { //bodyをクリックしたら大きさを戻す
    $(this).zoomTo({
    targetsize:0.8
    //拡大時、ウィンドウサイズに対してどのくらいの比率にするか
    });
    evt.stopPropagation();
    });
    });
    < /script>

     

    ■テストとしてcentiaの０２ページでテスト■

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>
    <script type=”text/javascript” src=”../js/jquery.zoomooz.js”></script>
    <script type=”text/javascript” src=”../js/jquery.zoomooz-helpers.js”></script>
    <script type=”text/javascript” src=”../js/jquery.zoomooz-anim.js”></script>
    <script type=”text/javascript” src=”../js/jquery.zoomooz-core.js”></script>
    <script type=”text/javascript” src=”../js/jquery.zoomooz-zoomTarget.js”></script>
    <script type=”text/javascript” src=”../js/jquery.zoomooz-zoomContainer.js”></script>
    <script type=”text/javascript” src=”../js/purecssmatrix.js”></script>
    <script>
    $(function(){
    $(“.zoomTarget“).click(function(evt) {
    $(this).zoomTo();
    evt.stopPropagation();
    });
    $(“body”).click(function(evt) { //bodyをクリックしたら大きさを戻す
    $(this).zoomTo({
    targetsize:0.8
    //拡大時、ウィンドウサイズに対してどのくらいの比率にするか
    });
    evt.stopPropagation();
    });
    });
    </script>

     

    <img src=”../image/02/01_b.jpg” width=”76″ height=”296″ border=”0″   class=”zoomTarget” />

     

    PDFや動画に対応したlight box風のBumpbox

    Lightboxみたいな感じなんだけど更にスピーディーで派手、それがBumpbox。
    画像だけではなく、動画やFlash、PDFなどにも対応しています。

    使用するAjaxライブラリはMooToolsなのですが、ダウンロードファイルにあらかじめ同梱されていますので別途用意する必要はありません。

     

    http://e-maga.com/javascript/bumpbox/

     

    stickysidebarと jquery lightbox pluginのバッティング

    stickysidebarと jquery lightbox pluginはバッティングする。どちらか記入行が最後に記されている個所のほうにある方が実行されてそのまえのものはバッティングして実行されない。

    どちらもjquiryなのだがバッティングする。回避方法わからない。

    他のjqueryのlightbox風のものでも試したがだめだった。

    もちろんjqueryじゃないlightboxもだめだった

     

    UNIONのtop.html

    まさはしＦＰでの独立ページ用と新着用のsidebarの表記について

    masahashi-info用にサイドコンテンツを追従させるjqueryを独立ページのみに適用するために、side-container-history.php  （独立ページ用）とside-container.php（新着用）とに分けて作り、side-container-history.phpにだけsticky sidebarを適用している。新着用のside-container.phpには該当要素をコメントアウトして適用されないようにした。

    footerを破らない　Contained Sticky Scroll

    サイドバーなどを追従させるjquery のContained Sticky Scroll。フッターに食い込まずに仕える。

    動かしたい要素の最も外側のセレクタ名をscript側に指定したら動いた。

    まさはしＦＰで使用中。jquery7.7.2でも動く。

    sticky saidebarを使ってみようとしたがこれはフッターを突き破る。ウィンドウの高さを縮めてもフッターを突き破るのでsticky sidebarは使用せず、contained sticky scrollを使う。

    だが、wordprssないでは動かなかった。理由はわからない。

    webコンテンツ/jquery/ContainedStickyScroll にスクリプトあり。