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

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

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>
 
Interactive-Photo-Gallery

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

  • LATEST
  • RELATED
  • POPULAR