【jQuery】フォトギャラリープラグインInteractive Photo Gallery

jQuery

Interactive-Photo-Gallery

July 10, 2016

Interactive Photo Galleryは検索機能とライトボックス機能が付いたフォトギャラリープラグイン。

Demo

CSS

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <link rel="stylesheet" href="css/style.css">

マークアップ

 <header>
      <input class="search-field" type="text" placeholder="Search" data-list=".gallery">
    </header>
    <section class="gallery">
      <div class="gallery-item" title="Hay Bales">
        <a href="Photos/01.jpg" data-lightbox="gallery" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
          <img src="Photos/Thumbnails/01.jpg" alt="Hay Bales">
        </a>
      </div>
    </section>

JS

    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.hideseek.js"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <script>
      $('.search-field').hideseek({
          list: '.gallery',
          attribute: 'title',
          childrenAttribute: 'data-title'
        });
      lightbox.option({
        'maxWidth': 1000,
        'showImageNumberLabel': false,
        'wrapAround': true,
        'fitImagesInViewport': true,
        'resizeDuration': 500,
      });
    </script>

Download

Latest Posts

Related Posts