jQuery

【jQuery】ポップアップギャラリープラグインResponsive jQuery Pop Up Gallery

September 29, 2015
Responsive jQuery Pop Up Gallery

Responsive jQuery Pop Up Galleryはレスポンシブに対応したポップアップギャラリープラグイン。チュートリアルでは、5つの異なるポップアップギャラリーが準備されており、各ギャラリーには小さなプレビューアニメーションが設定されています。

CSS

pop-up-gallery.cssは使用するものによって番号が違います。pop-up-gallery.css内でフルスクリーン時の背景やアニメーションの設定ができます。

<link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<link href="_css/pop-up-gallery1.css" rel="stylesheet" type="text/css" />

JS

pop-up-gallery.jsは使用するものによって番号が違います。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="_scripts/pop-up-gallery1.js"></script>

HTMLマークアップ

デフォルトは非表示。ポップアップギャラリーで表示する場合のコントロール、fullscreen-imageに設定した画像の表示。

  <div id="fullscreen">
  <div id="fullscreen-inner">
  <div id="fullscreen-inner-left" class="fullscreen-inner-button"><span class="icon-caret-left"></span></div>
  <div id="fullscreen-inner-right" class="fullscreen-inner-button"><span class="icon-caret-right"></span></div>
  <div id="fullscreen-inner-close" class="fullscreen-inner-button"><span class="icon-close"></span></div>
  <div id="fullscreen-image">
  </div>
  </div>
  </div>

画像の設定とホバーでアイコンの表示。

<div class="wrapper-inner-content">
<div class="wrapper-inner-content-image">
  
  <img src="_assets/1.jpg"/>
  <img src="_assets/2.jpg"/>
  <img src="_assets/3.jpg"/>
  <img src="_assets/4.jpg"/>
  <img src="_assets/5.jpg"/>
  <img src="_assets/6.jpg"/>
  <img src="_assets/7.jpg"/>
  <img src="_assets/8.jpg"/> 
  
  
  <div class="wrapper-inner-content-image-hover">
  <div class="wrapper-inner-content-image-hover-cercle">
  <span class="icon-search"></span>
  </div>
  </div>
</div>
</div>