レスポンシブデザイン

レスポンシブ対応の軽量ギャラリー「Swipebox」

シンプルで軽量、設置も簡単なレスポンシブ対応(スワイプ対応)のギャラリーのご紹介!
WordPressでも簡単に設置できました。設置のメモも添えておきます!

設置方法

  1. Swipeboxサイトよりファイル一式ダウンロード
  2. ファイルを解凍し、サイトに設置(jquery.swipebox.jsとswipebox.cssとimg)header内にcssとjsを記述してね!
  3. headerにトリガー設置
      
    <script>
    $(function () {
    $(".swipebox").swipebox();
    });
    </script>
    
  4. ギャラリーhtmlを設置
    <ul>
    <li><a class="swipebox" rel="slide1" href="img/img_01.png" title="ここにタイトルを挿入 表示されます"><img src="img/img_01_small.png"></a></li>
    <li><a class="swipebox" rel="slide1" href="img/img_02.png" title="あああああ"><img src="img/img_02_small.png"></a></li>
    <li><a class="swipebox" rel="slide1" href="img/img_03.png" title="あああああ"><img src="img/img_03_small.png"></a></li>
    </ul>
    

    ※classには”swipebox”を記述。relでグループ分けが可能。titleにはギャラリーを拡大した時に表示させたいタイトル名を記述させます。

デフォルトではスマホでタイトル表示ができなかったので表示できるようにカスタマイズしたメモ!

<script>
$(function () {
$(".swipebox").swipebox();
'removeBarsOnMobile': false
});
</script>

この記述でスマホでもタイトルが表示されるようになりました!

その他のレスポンシブデザイン

このエントリーをはてなブックマークに追加
rss
上矢印
ページTOPへ