ぬえさぶろうのAnimate放送部

便利ツール

ビューアーのつくり方

ビューアーって、どういうときに使うもの

ビューアーとは、サムネイル（小さな画像）をクリックすると拡大表示されるしくみ

• 
• 
• 
• 
• 

コード

• HTML

  /*画像拡大表示*/
  <figure>
      <img src="../../../images/news/dropshadowfilter/dropshadow_twin_03.png" class="big_picture" alt="">
  </figure>
      <ul class="thumbnail_list">
          <li><a href="../../../images/news/dropshadowfilter/dropshadow_twin_03.png"><img src="../../../images/news/dropshadowfilter/dropshadow_twin_03.png" class="thumbnail" alt="photo1"></a></li>
          <li><a href="../../../images/news/dropshadowfilter/css_animation.png"><img src="../../../images/news/dropshadowfilter/css_animation.png" class="thumbnail" alt="photo2"></a></li>
          <li><a href="../../../images/news/dropshadowfilter/dropshadowfilter.png"><img src="../../../images/news/dropshadowfilter/dropshadowfilter.png" class="thumbnail" alt="photo3"></a></li>
          <li><a href="../../../images/news/dropshadowfilter/dropshadowfilter_4.png"><img src="../../../images/news/dropshadowfilter/dropshadowfilter_4.png" class="thumbnail" alt="photo4"></a></li>
          <li><a href="../../../images/news/dropshadowfilter/dropshadowfilter_2.png"><img src="../../../images/news/dropshadowfilter/dropshadowfilter_2.png" class="thumbnail" alt="photo5"></a></li>
      </ul>
  

• CSS

  /*ビューアー*/
  .big_picture{
      display:block;
      width:90%;
      height:auto;
      aspect-ratio:16/9;
      margin:1em auto;
  }
  .thumbnail_list{
      display:flex;
      flex-wrap:wrap;
      width:98%;
      min-height:100px;
      margin:0 1%;
      padding:0.3em;
      border:1px solid #000;
  }
  .thumbnail{
      width:100%;
      max-width:160px;
      margin:0.4em 0.3em;
  }
  .thumbnail a{
      display:block;
  }
  

• JS

  //ビューアー
  $(function(){
      $(".thumbnail_list a").click(function(){
          //拡大画像のsrc属性に、選択したa要素のhref属性を入れる
          $("figure img").attr("src", $(this).attr("href"));
          
          return false; /*リンクを無効にする*/
      });
  });
  

解説

ビューアー

• attr()メソッドで取得したhref属性の値を、さらにattrメソッドを使って、拡大表示に設定します。

---

attr() つかいかた

/* 入れ換える元の画像 */
<figure><img src="大画面のイメージ" alt=""></figure>
/*入れ換える画像*/
<ul class="thumbnail_list"> <a href="入れ換える画像">
/*画像を入れ換える方法*/
$("大画面のイメージ").attr("src",$(this).attr("href"));