「Galleria」と「jCarousel」プラグインを使った画像ギャラリーの作り方

javascript

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

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.galleria.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/tutorial.js"></script>

html

以下にhtmlの記述例を示します。

<div class="container">
    <h2>見出し2</h2>
    <div id="img"></div>
</div>

<ul id="gallery">
  <li><a href="images/work1.jpg"><img alt="" src="images/thumb1.jpg" width="236" height="216" /></a></li>
  <li><a href="images/work2.jpg"><img alt="" src="images/thumb2.jpg" width="236" height="216" /></a></li>
  <li><a href="images/work3.jpg"><img alt="" src="images/thumb3.jpg" width="236" height="216" /></a></li>
  <li><a href="images/work1_1.jpg"><img alt="" src="images/thumb1.jpg" width="236" height="216" /></a></li>
  <li><a href="images/work2_1.jpg"><img alt="" src="images/thumb2.jpg" width="236" height="216" /></a></li>
  <li><a href="images/work3_1.jpg"><img alt="" src="images/thumb3.jpg" width="236" height="216" /></a></li>
</ul>

「img」というidの<div>タグには大きな画像が入ります。ギャラリー自体は「gallery」というidのリスト(<ul>タグ)で表されます。それぞれのリスト項目(<li>タグ)は大きな画像へリンクさせます。
スライド画像を追加するには、以下の形式のhtmlを追記します。

    <li><a href="images/work1_1.jpg"><img alt="" src="images/thumb1.jpg" width="236" height="216" /></a></li>

css

style.cssファイルにはスクリプトに関連したスタイルが記述されています。

/* gallery */
#img {
    position: relative;
    width: 946px;
    height: 300px;
}
#gallery {
    width: 776px;
    height: 216px;
}
#gallery li {
    float: left;
    cursor: pointer;
    margin-right: 34px;
}
.caption {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 96%;
    height: 50px;
    padding: 0 2%;
    line-height: 50px;
    color: #fff;
    background-color: #000;
    display: none !important;    
}
.jcarousel-container {
    position: relative;
    padding: 0 86px 0 86px;
}
.jcarousel-clip {
    width: 776px;
    overflow: hidden;
}
.jcarousel-prev {
    position: absolute;
    top: 68px;
    left: 10px;
    width: 53px;
    height: 80px;
    cursor: pointer;
    background: url(images/buttons_alt.jpg) no-repeat -53px top;
    z-index: 1000;
}
.jcarousel-prev:hover {
    background-position: -53px -80px;
}
.jcarousel-next {
    position: absolute;
    top: 68px;
    right: 0;
    width: 53px;
    height: 80px;
    cursor: pointer;
    background: url(images/buttons_alt.jpg) no-repeat left top;
    z-index: 1000;
}
.jcarousel-next:hover {
    background-position: 0 -80px;
}
.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    padding:0;
    margin: 0;
}
.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
/**
 * ボタンは「img」idの<div>タグ内の記号付きリストの前に動的に追加され、
 *「jcarousel-next」と「jcarousel-prev」というclass名が付きます。
 */
}
.jcarousel-next {
    z-index: 3;
    display: none;
}
.jcarousel-prev {
    z-index: 3;
    display: none;
}
/* gallery */

ギャラリーの部品の位置をカスタマイズするには、以下に示したようなclassとidのスタイルを変更します。

#img – 大きな画像の範囲のid名;
#gallery – サムネイル画像の範囲のid;
caption – 大きな画像のキャプションのclass名;
jcarousel-prev – ギャラリーの‘Previous’ボタンのclass名;
jcarousel-next – ギャラリーの‘Next’ボタンclassの名.


Comments are closed.