Cat Speak

札幌在住のWebデザイナー・コモモのブログ

ホーム > ウェブ制作Tips > jQuery > jquery.scrollable.jsで画像一覧をスクロールする

jquery.scrollable.jsで画像一覧をスクロールする

画像の一覧をスクロールするjQueryプラグインscrollable.jsを使ってみました。 配布サイト(jQuery TOOLS)が英語で、ダウンロード方法に少し迷ったので、メモしておきます。 2011年5月時点のダウンロード方法です。

  1. グローバルナビのDownloadを開く
  2. UI toolsから必要なプラグインだけを選択 デフォルトでは全てにチェックが入っているので、Scrollableだけにします。
  3. 「Download Now」ボタンを押すと、jquery.tools.min.jsというファイルがダウンロードされる

基本的な使い方は、配布サイトのDemoに丁寧に書いてあります。 解説は英語ですが、ソースをそのままコピーするだけでした。


今回、ある案件で利用する際に、下記の3点についてコードを書き加えたので、ソースをメモしておきます。 Demoはこちら

  1. 一覧で使用する画像が、オンラインショップの商品なので、画像だけでなく商品名が入るようにする。
  2. 商品画像を6つごとに囲むdivがjQeryで挿入されるようにする。
  3. 画像が6個未満の場合は、スクロールのための左右のナビゲーションが表示されないようにする。

HEAD内に、jqueryと、配布元からダウンロードした「jquery.tools.min.js」を読み込みます。 ※例ではjquery.tools.min.jsのファイル名をscrollable.jsに変更しています。 その後のコードで、scrollable関数を呼び出しと、画像を6つごとに囲むdivを挿入しています。

HEAD

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='scrollable.js'></script>
<script type='text/javascript'>
jQuery(function($){
//初めの6つをitemwrapで囲む
$(".thumbnail:lt(6)").wrapAll("<div class='itemwap'></div>");

//thumbnail(画像)の要素数を数える
sum = $(".thumbnail").size();
//thumbnailを6つごとにitemwrapで区切って囲む
var n=1
for (i = 0; i < sum; i=i+6) {
var m=6*n-1
var n=n+1
$(".thumbnail:gt("+ m +"):lt(6)").wrapAll("<div class='itemwap'></div>");
};

//scrollableを適用
$(".scrollable").scrollable();

//itemwapがひとつだけの場合はナビを非表示
wrapsum = $(".itemwap").size();
if(wrapsum==1){
$(".browse").addClass("disabled");
};
});
</script>

HTML

<div id="content">
<a class="prev browse left"></a>
<div class="scrollable">
<div class="item">

<div class="thumbnail">
<div><img width="120" height="120px" src="img/image.jpg" alt="商品1" /></div>
<p><a href="#">商品1</a></p>
</div><!-- /.thumbnail -->

<div class="thumbnail">
<div><img width="120" height="120px" src="img/image.jpg" alt="商品1" /></div>
<p><a href="#">商品1</a></p>
</div><!-- /.thumbnail -->

画像部分(<div>で囲まれている部分)を必要なだけ繰り返す

</div><!-- /.items -->
</div><!-- /.scrollable -->
<a class="next browse right"></a>
</div><!-- / #content-->

CSS


/* 全体を囲む */
#content {
border:1px solid #ccc;
border-radius: 5px;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: -moz-linear-gradient(top, #FFF, #eee);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#eee));
overflow: hidden;
width:900px;
}

/* 画像部分 */
.thumbnail {
width:140px;
padding-right:3px;
padding-top:3px;
padding-bottom:3px;
float:left;
text-align:center;
}
.thumbnail .thumimg {
height:140px;
width:140px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.thumbnail .thumtitle {
font-size:70%;
line-height:1.2em;
padding-top:3px;
margin:0;
}

/* スクロール部分 */
.scrollable {
position:relative;
overflow:hidden;
width:860px;
height:180px;
float:left;
}
.scrollable .items {
width:20000em;
position:absolute;
clear:both;
}
.items div.itemwap {
float:left;
width:860px;
}
.scrollable img {
background-color:#fff;
}
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}

/* ナビゲーションボタン */
a.browse {
margin-top:3px;
display:block;
width:17px;
height:174px;
float:left;
cursor:pointer;
font-size:1px;
background-repeat:no-repeat;
background-position:0 0;
}

/* right */
a.right {
background-image:url(img/products_next.gif);
margin-right:3px;
}
a.right:hover {
background-position:-17px 0;
}

/* left */
a.left{
background-image:url(img/products_prev.gif);
margin-left:3px;
}
a.left:hover  { background-position:-17px 0; }

/* ボタン非表示時 */
a.disabled {
visibility:hidden !important;
}

7 Responses to “jquery.scrollable.jsで画像一覧をスクロールする”

  1. まいまい より:

    cat speak様はじめまして
    写真だけのスライドはあっても、写真のキャプション入れたスライドがなくてやっとこちらにたどり着きました^_^;
    とても助かりました。

    ただ、上に掛かれているHTMLのdiv部分にclassが入っていないのでおかしいなと思ったら、やはりこのままではcss通りにレイアウトされませんでした。
    DEMOページのソースをコピーさせていただいて使ったら上手く表示されました。

    jqueryは1.7.1以上でないと私の場合buttonの非表示ができませんでした。

    悪戦苦闘しながらも思い通りにできましたので、お礼をと思いコメントさせていただきました。ありがとうございました。

  2. まいまい より:

    >ただ、上に掛かれているHTMLのdiv部分に・・・
    すみません、上に書かれているです

  3. コモモ komomo より:

    コメントありがとうございます。
    本当ですね。なぜかclass抜けていました。。ごめんなさい。報告ありがとうございます。修正しました!

  4. 山本 俊樹 より:

    はじめまして。和歌山県立和歌山高等学校の山本と申します。学校のHPを担当しています。
    トップページに写真でトピックスを配置しているのですが、左右にスライドさせたいと思い、探していて、cat speak様の解説ページに出会うことができました。ただ今、悪戦苦闘して、いじっています。cat speak様の解説ソースをベースにすることをご許可頂けますよう、お願い致します。

  5. コモモ komomo より:

    山本さん、こんにちは。Cat Speakのコモモです。
    もともとプラグインを少しだけ改造したものですし、自己責任でご利用いただければ、特に制限はありません。
    がんばってくださいノシ

  6. そら より:

    ECサイト用に使える商品スライドを探しまわっていたらコチラのサイトにたどり着きました。

    http://demo.cat-speak.net/jquery/scrollable/

    のデモにあるものがまさにやりたいことと
    ドンピシャ!!だったのですごく感激したのですが
    リンク先が既に存在しませんでした><。
    ソースをいただくことなどはできませんでしょうか?

    本当に困っていますのでどうぞよろしくお願いします><!!

  7. コモモ komomo より:

    >そらさん
    かなり昔の記事なので、ライブラリの配布が終了してしまったようですね。ファイルはサーバ上にあるので、ブラウザからページを保存したら、デモページで利用しているライブラリ等を一式保存することは可能ですよ。

コメントを残す

人気の記事