jQuery

【jQuery】拡大画像表示が気持ちいいギャラリープラグインleast.js 2

September 19, 2015

【jQuery】画像ギャラリーを効果的に見せる為に!Gallery系プラグイン10選で紹介したleast.js 2。以前のleast.jsからバージョンアップしたものです。このプラグインはレスポンシブ対応で、サムネイル画像をディスクリプション付きで拡大表示してくれるギャラリーを実装できます。

least2_1
上記画像は拡大時の画像

least2_2
ブラウザ幅を狭めてみました。

Header

/head前に記述します。least.min.cssを読み込みます。

<!-- Responsive viewport for smartphone devices -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- least.js 2 CSS file -->
<link href="src/css/least.min.css" rel="stylesheet" />

HTMLマークアップ

data-captionが拡大画像表示の時に表示されるディスクリプションです。

<!-- Least Gallery -->
<section id="least">

  <!-- Least Gallery: Fullscreen Preview -->
  <div class="least-preview"></div>

    <!-- Least Gallery: Thumbnails -->
    <ul class="least-gallery">
      <!-- 1th thumbnail -->
        <li>
          <a href="path-to-your-fullscreen-image default-path:src/media/big/01.jpg" data-subtitle="View Picture" data-caption="Now it's possibe to add an URL-Link into caption text - <a href='http://www.google.com' target='_blank'>GOOGLE</a>" >
            <img src="path-to-your-thumbnail-image default-path:src/media/thumbnails/01.jpg" alt="Alt Image Text" />
          </a>
        </li>
    </ul>

</section>
<!-- Least Gallery end -->

jS

/body前に記述します。jQuery本体とleast.min.jsを読み込みます。.least-galleryは上記のul class=””で指定したものを表記。

<!-- jQuery library -->
<script src="src/js/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- least.js 2 library -->
<script src="src/js/libs/least/least.min.js"></script>
<script>
  $(document).ready(function(){
    $('.least-gallery').least();
  });
</script>

MIT
Demo/Download