モバイル対応レスポンシブギャラリー【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. accordion-init

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

  2. collapsible

    JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【c…

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

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

  4. imagehover.css-master

    マウスオーバーで画像アニメーション表示する44種類のCSS【Image…

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

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

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

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主