My Vector Space

  人生は寄り道してなんぼ

【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

 sweet-thumbnails-preview
 サムネイルプレビュー付きスライダー。
記述はまず、対象とする<img>タグにhtmlタグを追加してから、ダウンロードした外部ファイル(http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/)のCSSJavascriptJQueryをリンクさせる、という流れ。    
対象とする<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>
head内にダウンロードしたCSSファイルをリンクさせる
 【 html 】
 1
  <head>
 2
      <link rel="stylesheet" type="text/css" href="css/style.css" />
 3
  </head>
JavascriptJQueryのコードを記述
 【 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>

 

関連記事他のスライドショー関連の記事

PAGE TOP