【jQuery】ポップアップギャラリープラグイン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>
 
 
Responsive jQuery Pop Up Gallery

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

  • LATEST
  • RELATED
  • POPULAR