サムネイルプレビュー付きスライダー。
記述の流れは、まず対象とする＜img＞タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。
http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/
外部ファイルの中から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ファイルをリンクさせる
【 html 】
1
<head>
2
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
3
</head>
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>
関連記事
他のスライドショー関連の記事
PICK UP
TIPS記事セレクション
