スクロールタイプの画像ギャラリーの作り方

jQuery UIを使用した画像ギャラリーです。

javascript

スクリプトを正常に動作させるために画像ギャラリーを含むhtmlファイルに以下のように記述します。

<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

「gallery.js」ファイルにはギャラリーを動作させるため以下のような記述が含まれています。

var container = $('div.sliderGallery');
    var ul = $('ul', container);

    var itemsWidth = ul.innerWidth() - container.outerWidth();

    $('.slider', container).slider({
        min: 0,
        max: itemWidth,
        handle: '.handle',
        stop: function (event, ui) {
            ul.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            ui.css('left', ui.value * -1);
        }
});

上記のスクリプトは詳細設定の必要はありません。

html

スライドを表示するのには項目リストを使います。スクロールバーの表示には、「slider」というクラス名の<div>タグ内に「handle」というクラス名<div>タグを配置しています。スクロールバーのカスタマイズには、「slider」や「handle」などのクラスのスタイルを編集します。

<div class="sliderGallery">
  <ul>
    <li><img alt="" src="images/slide1.jpg" /></li>
    <li><img alt="" src="images/slide2.jpg" /></li>
    <li><img alt="" src="images/slide3.jpg" /></li>
    <li><img alt="" src="images/slide4.jpg" /></li>
    <li><img alt="" src="images/slide5.jpg" /></li>
    <li><img alt="" src="images/slide6.jpg" /></li>
    <li><img alt="" src="images/slide7.jpg" /></li>
    <li><img alt="" src="images/slide8.jpg" /></li>
  </ul>
  <div class="slider">
    <div class="handle"></div>
  </div>
</div>

css

メインとなる「style.css」にはスクリプトに関連したスタイルが以下のように記述されています。

.sliderGallery {
    overflow: hidden;
    position: relative;
    height: 664px;
    width: 945px;
}
.sliderGallery ul {
    position: absolute;
    list-style: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    width: 7588px;
}
.sliderGallery ul li {
    display: inline;
}
.handle {
    position: absolute;
    cursor: move;
    top: 0;
    z-index: 100;
    height: 17px;
    width: 181px;
}
.slider {
    width: 941px;
    height: 9px;
    position: relative;
    padding: 0 2px;
    background: url(images/slider-bg.gif) no-repeat left top;
    position: absolute;
    top: 635px;
}
.slider a {
    color: #000;
}
.handle {
    position: absolute;
    cursor: move;
    height: 9px;
    width: 92px;
    top: 0;
    background: url(images/handle.gif) no-repeat left top;
    z-index: 100;
}
.back {
    position: absolute;
    right: 18px;
    top: -30px;
}

クラス名「slider」には必ず正しい値を記述してください。ここでの幅は、左右のスライドとの余白を含めた全スライドの全体の幅です。


Comments are closed.