【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】
サムネイルプレビュー付きスライダー。
記述の流れは、まず対象とする＜img＞タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。
外部ファイルの中からCSS、Javascript、JQueryのそれぞれのコードを設定していくという流れ。
サムネイルプレビュー付きスライダーの設定
1. 対象とする＜img＞タグにhtmlタグを追加
まずは対象とする＜img＞タグにhtmlタグを追加していく。
【 html 】
1
<div id="ps_container" class="ps_container">
2
<div class="ps_image_wrapper">
3
<!-- First initial image -->
4
<img src="images/11.jpg" alt="" />
5
</div>
6
<!-- Navigation items -->
7
<div class="ps_next"></div>
8
<div class="ps_prev"></div>
9
<!-- Dot list with thumbnail preview -->
10
<ul class="ps_nav">
11
<li class="selected"><a href="images/11.jpg" rel="images/thumbs/11.jpg">img</a></li>
12
<li><a href="images/12.jpg" rel="images/thumbs/12.jpg">img</a></li>
13
<li><a href="images/13.jpg" rel="images/thumbs/13.jpg">img</a></li>
14
<li><a href="images/14.jpg" rel="images/thumbs/14.jpg">img</a></li>
15
<li><a href="images/15.jpg" rel="images/thumbs/15.jpg">img</a></li>
16
<li><a href="images/16.jpg" rel="images/thumbs/16.jpg">img</a></li>
17
<li><a href="images/17.jpg" rel="images/thumbs/17.jpg">img</a></li>
18
<li><a href="images/18.jpg" rel="images/thumbs/18.jpg">img</a></li>
19
<li><a href="images/19.jpg" rel="images/thumbs/19.jpg">img</a></li>
20
<li><a href="images/20.jpg" rel="images/thumbs/20.jpg">img</a></li>
21
<li class="ps_preview">
22
<div class="ps_preview_wrapper">
23
<!-- Thumbnail comes here -->
24
</div>
25
<!-- Little triangle -->
26
<span></span>
27
</li>
28
</ul>
29
</div>
2. head内にダウンロードしたCSSファイルをリンクさせる
3. JavascriptとJQueryのコードを記述
【 html 】
1
<!-- The JavaScript -->
2
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
3
<script type="text/javascript">
4
～ここのエリアに記述するスクリプトのコードはコピペなので省略～
5
</script>
6
<script type="text/javascript">
7
～ここのエリアに記述するスクリプトのコードはコピペなので省略～
8
</script>
関連記事他のスライドショー関連の記事
