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. フォトギャラリー

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

  2. 「FAQ」「Q&A」「SIDE MENU」に最適なアコーディオンメニュー

    「FAQ」「Q&A」に最適なアコーディオンメニュー(無料素材…

  3. tilescolumns-unite-gallery

    スマホ時にスワイプにも対応👆グリッドギャラリー【Til…

  4. tiles_grid_video

    YouTube 動画のスライドショー📽をホームページへ…

  5. hes-gallery-master

    モバイル対応レスポンシブギャラリー【HesGallery】

  6. easy-responsive-tabs-to-accordion

    水平または垂直タブをアコーディオンに最適化する軽量のjQueryプラグ…

制作実績一覧

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

最近の記事

  1. お客様の笑顔を撮影
  2. お客様の声アンケートのコツ
  3. 悉皆屋
  4. ホームページ商品説明文
  5. サイトリニューアルでSEO
  6. サイテーション
  7. ローカルエリアでホームページ集客
  8. WordPressのテーマ選び方
  9. PowerDirector
  10. ホームページは自分で作る