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

hes-gallery-master

HesGalleryは、軽量でレスポンシブ、モバイル向けのJavaScriptフォトギャラリー&画像ライトボックスプラグインです。このプラグインは、ユーザーがナビゲーション矢印をクリックするか(デスクトップ)、または画像をタップすると(モバイル)、画像のグループをギャラリーポップアップとして表示します。

プレビュー

パソコン版プレビュー

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

スマホ版プレビュー

hes-gallery

HesGallery デモ

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

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

Hes Gallery ダウンロード

download

HesGallery Download

Hes Gallery 設置方法

スタイルシート(css)『hes-gallery.css』は<head”></head”>内に記述! JavaScriptは『hes-gallery.js』<body></body>内に記述します。


<link rel=”stylesheet” href=”hes-gallery.css”>
<script src=”hes-gallery.js”></script>

利用可能なデータ属性

  • data-subtext: 画像のキャプション
  • data-alt: 代替テキスト
  • data-disabled: この画像を無効にする
  • data-fullsize: フルサイズ
  • data-wrap: 無限ループ
  • data-img-count: 画像数

<div class="hes-gallery" data-wrap="true" data-img-count="8">
    <img src="img/bird1.jpg" alt="image1" data-subtext="画像のキャプション1" data-alt="代替テキスト">
    <img src="img/bird2.jpg" alt="image2" data-subtext="画像のキャプション2">
    <img src="img/bird3.jpg" alt="image3" data-subtext="画像のキャプション3">
    ...
</div>

ギャラリーポップアップにカウントを表示するかどうかを決定します。

  • data-img-count=”false”: ポップアップにカウントを表示

hesgalleryポップアップにカウント


<div class="hes-gallery" data-img-count="8">
...
</div>

無限ループ<body></body>内に追加


<script>
    HesGallery.setOptions({
        disableScrolling: false,
        hostedStyles: false,
        animations: true,
        minResolution: 1000,
        showImageCount: true,
        wrapAround: true
    });
</script>

デモのソースコード設置例


<!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>HesGallery</title>
    <link rel="stylesheet" href="style.css">
 
    <link rel="stylesheet" href="../src/hes-gallery.css">
 
</head>
<body>
    <div class="container">
 
<h1>モバイル対応レスポンシブギャラリー【HesGallery】デモ</h1>
        <h2>Gallery 1</h2>
 
        <div class="hes-gallery">
            <img src="img/dog1.jpg" alt="image1" data-fullsize="img/dog1.jpg" data-subtext='dog1'>
            <img src="img/dog2.jpg" alt="image2" data-subtext="dog2">
            <img src="img/dog3.jpg" alt="image3" data-subtext="dog3">
            <img src="img/dog4.jpg" alt="image4" data-subtext="dog4">
        </div>
 
        <h2>Gallery 2</h2>
 
        <div class="hes-gallery" data-wrap="true" data-img-count="false">
            <img src="img/bird1.jpg" alt="image1" data-subtext="bird1" data-alt="kociak">
            <img src="img/bird2.jpg" alt="image2" data-subtext="bird2">
            <img src="img/bird3.jpg" alt="image3" data-subtext="bird3">
            <img src="img/bird4.jpg" alt="image4" data-subtext="bird4" data-alt="co jeest">
            <img src="img/bird5.jpg" alt="image5" data-subtext="bird5">
            <img src="img/bird6.jpg" alt="image6" data-subtext="bird6">
            <img src="img/bird7.jpg" alt="image7" data-subtext="bird7">
            <img src="img/bird8.jpg" alt="image8" data-subtext="bird8">
        </div>
 
    <script src="../dist/hes-gallery.js"></script>
    <script>
        HesGallery.setOptions({
            disableScrolling: false,
            hostedStyles: false,
            animations: true,
            minResolution: 0,
            showImageCount: true,
            wrapAround: true
        });
    </script>
 
    </div>
</body>
</html>

HesGallery Download

フォトギャラリー

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

お問い合わせはこちら

関連記事

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

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

  2. accordion-init

    JavaScriptのモダンで滑らかな展開型アコーディオン【accor…

  3. 滑らかな垂直アコーディオンパネル

    滑らかな垂直アコーディオン パネル【Accordion Panel】

  4. lightbox2

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

  5. 無料素材メニュー

    CSS MENU メニュー ボタン テンプレートによる無料素材

  6. tilescolumns-unite-gallery

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

制作実績一覧

  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(ジンドゥ)