CSS ポップアップ フォトギャラリー【 zoomwall.js 】

zoomwall_js

【zoomwall.js】は水平石積みレイアウトを使用し、クリックするとフルスクリーンライトボックスモードで拡大するフォトギャラリーです。

プレビュー

CSS Powered Photo Gallery Popup【zoomwall.js】デモ

デモ

著者Ericleong
公式ページwebsite
デモページデモ
最後の更新2015年6月16日
ライセンスMIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス(日本語翻訳)

zoomwall.js ダウンロード

download

Download

zoomwall.js 設置方法

zoomwall.js css 記述方法

スタイルシート(css)『zoomwall.css』は<head></head>内に記述!


<link rel="stylesheet" type="text/css" href="css/zoomwall.css" />

zoomwall.js JavaScript 記述方法

JavaScriptは『zoomwall.js』<head></head>内に記述!


<script type="text/javascript" src="js/zoomwall.js"></script>
<script>
window.onload = function() {
    zoomwall.create(document.getElementById('gallery'));
};
</script>

zoomwall.js 設置例


 <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
     <title>CSS Powered Photo Gallery Popup【zoomwall.js】デモ </title>
     <link rel="stylesheet" href="style.css">
 
<link rel="stylesheet" type="text/css" href="css/zoomwall.css" />
<script type="text/javascript" src="js/zoomwall.js"></script>
<script>
window.onload = function() {
    zoomwall.create(document.getElementById('gallery'));
};
</script>
 
 </head>
 <body>
     <div class="container">
         <h1>CSS Powered Photo Gallery Popup【zoomwall.js】デモ </h1>
 
<div id="gallery" class="zoomwall">
    <img src="img/01.jpg" data-highres="img/01.jpg" />
    <img src="img/02.jpg" data-highres="img/02.jpg" />
    <img src="img/03.jpg" data-highres="img/03.jpg" />
    <img src="img/04.jpg" data-highres="img/04.jpg" />
    <img src="img/05.jpg" data-highres="img/05.jpg" />
    <img src="img/06.jpg" data-highres="img/06.jpg" />
    <img src="img/07.jpg" data-highres="img/07.jpg" />
    <img src="img/08.jpg" data-highres="img/08.jpg" />
    <img src="img/09.jpg" data-highres="img/09.jpg" />
</div>
 
     </div>
 </body>
 </html>

zoomwall.js Download

フォトギャラリー

「集客」無料相談承ります!

お問い合わせはこちら

関連記事

  1. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

  2. handy-collapse

    アコーディオンメニュー内にアコーディオン【handy-collapse…

  3. サムネイルクリック レスポンシブギャラリー

    サムネイルクリックで画像が入れ替わる レスポンシブギャラリー 【res…

  4. フォトギャラリー

    写真アルバム・フォトギャラリー作成・サンプル集 JavaScript・…

  5. lightbox2

    あらゆるブラウザに対応!画像ポップアップスクリプト【Lightbox2…

  6. Lightboxに画像をグループ化する軽量なJavaScriptプラグ…

制作実績一覧

  1. 行田市 三島造園有限会社
  2. 行田市リサイクルイズミ
  3. スパイシーベジーカレー
  4. bacchus
  5. ふじぜんリニューアル後
  6. legend-planning
  7. ポスティングこころざし様
  8. インテリアコーディネーター小島真子

最近の記事

  1. セルフSEO対策
  2. STORES 予約
  3. 無料で予約サイトが作れる【MOSH】
  4. 第三者の影響力 ウィンザー効果
  5. 『お客様の声』アンケート
  6. コアウェブバイタル(Core Web Vitals)
  7. FAQリッチリザルト
  8. WordPress
  9. Ameba Ownd(アメーバオウンド)
  10. Jimdo(ジンドゥ)