レスポンシブ対応の超軽量ライトボックス「Lity」

author photo

Byinfobloger

Lity

画像を効果的に見せるために以前から使われてきたライトボックス。

最近ではレスポンシブに対応したライトボックスも多く見かけるようになりました。

このテンプレートでは最初から「Lity」と言うライトボックスの機能が組み込まれています。

「Lity」の特徴
  1. とても軽量で表示速度への影響が少ない
  2. スマホにも対応している
  3. 画像だけではなく動画にも対応している
  4. HTMLの表示にも対応している

以上のような特徴があります。
次からは実際にサンプルを使いながら「Lity」の使い方の説明をしていきます。

スポンサーリンク

シンプルで簡単「Lity」の使い方

色々な使い方ができるように4タイプの画像配置方法を紹介します。

アイディア次第では色々な使い方ができます。

それではサンプルを見てください。

均等に画像が配置されるギャラリーボックス

最初はシンプルに画像を拡大表示する方法から説明していきます。

下の例は何枚の画像を入れても均等に配置される仕様になっています。

10枚の画像を入れても均等に配置されますが、あまり現実的ではないので4枚程度がベストではないでしょうか。

画像サイズを指定しなくても均等に配置されますので面倒な時はコチラを使用してください。

画像をクリックすると拡大します
HTML
<div class="Flex-Box1">
<p><a href="<!-- 画像URL1 -->" data-lity="data-lity"><img src="<!-- 画像URL1 -->" title="<!-- タイトル1 -->"></a></p>
<p><a href="<!-- 画像URL2 -->" data-lity="data-lity"><img src="<!-- 画像URL2 -->" title="<!-- タイトル2 -->"></a></p>
<p><a href="<!-- 画像URL3 -->" data-lity="data-lity"><img src="<!-- 画像URL3 -->" title="<!-- タイトル3 -->"></a></p>
<p><a href="<!-- 画像URL4 -->" data-lity="data-lity"><img src="<!-- 画像URL4 -->" title="<!-- タイトル4 -->"></a></p>
</div>

画像4枚でを折り返すギャラリー風ライトボックス

今度は画像を折り返して表示するライトボックスです。

何枚の画像を配置しても1列4枚表示される仕様になっています。

例えば13枚の画像を配置した場合。
最後の列は1枚だけ画像が表示されて見栄えをが良くないので、なるべくなら4で割り切れる枚数が適当でしょう。

ギャラリー風ボックス1列4枚
HTML
<div class="Flex-Box2">
<p><a href="<!-- 画像URL1 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL1 -->" title="<!-- タイトル -->"></a></p>
<p><a href="<!-- 画像URL2 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL2 -->" title="<!-- タイトル2 -->"></a></p>
<p><a href="<!-- 画像URL3 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL3 -->" title="<!-- タイトル3 -->"></a></p>
<p><a href="<!-- 画像URL4 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL4 -->" title="<!-- タイトル4 -->"></a></p>
<p><a href="<!-- 画像URL5 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL5 -->" title="<!-- タイトル5 -->"></a></p>
<p><a href="<!-- 画像URL6 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL6 -->" title="<!-- タイトル6 -->"></a></p>
<p><a href="<!-- 画像URL7 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL7 -->" title="<!-- タイトル7 -->"></a></p>
<p><a href="<!-- 画像URL8 -->" data-lity="data-lity"><img class="IMG192" src="<!-- 画像URL8 -->" title="<!-- タイトル8 -->"></a></p>
</div>

画像3枚でを折り返すギャラリー風ライトボックス

今度は1列3枚で折り返すように仕様を変えてみました。

画像を折り返すギャラリー風ボックス3列
HTML
<div class="Flex-Box2">
<p><a href="<!-- 画像URL1 -->" data-lity="data-lity"><img class="IMG258" src="<!-- 画像URL1 -->" title="<!-- タイトル1 -->"></a></p>
<p><a href="<!-- 画像URL2 -->" data-lity="data-lity"><img class="IMG258" src="<!-- 画像URL2 -->" title="<!-- タイトル2 -->"></a></p>
<p><a href="<!-- 画像URL3 -->" data-lity="data-lity"><img class="IMG258" src="<!-- 画像URL3 -->" title="<!-- タイトル3 -->"></a></p>
<p><a href="<!-- 画像URL4 -->" data-lity="data-lity"><img class="IMG258" src="<!-- 画像URL4 -->" title="<!-- タイトル4 -->"></a></p>
<p><a href="<!-- 画像URL5 -->" data-lity="data-lity"><img class="IMG258" src="<!-- 画像URL5 -->" title="<!-- タイトル5 -->"></a></p>
<p><a href="<!-- 画像URL6 -->" data-lity="data-lity"><img class="IMG258" src="<!-- 画像URL6 -->" title="<!-- タイトル6 -->"></a></p>
</div>

画像2枚でを折り返すギャラリー風ライトボックス

今度は1列に2枚の画像を表示する仕様です。

画像を大きく見せたい場合などは、こちらの仕様の方がいいかもしれません。

画像を折り返すギャラリー風ボックス2列
HTML
<div class="Flex-Box2">
<p><a href="<!-- 画像URL1 -->" data-lity="data-lity"><img class="IMG394" src="<!-- 画像URL1 -->" title="<!-- タイトル -->"></a></p>
<p><a href="<!-- 画像URL2 -->" data-lity="data-lity"><img class="IMG394" src="<!-- 画像URL2 -->" title="<!-- タイトル2 -->"></a></p>
<p><a href="<!-- 画像URL3 -->" data-lity="data-lity"><img class="IMG394" src="<!-- 画像URL3 -->" title="<!-- タイトル3 -->"></a></p>
<p><a href="<!-- 画像URL4 -->" data-lity="data-lity"><img class="IMG394" src="<!-- 画像URL4 -->" title="<!-- タイトル4 -->"></a></p>
</div>

画像だけではないライトボックス「Lity」の底力

今まで画像を拡大表示する方法を紹介してきました。

Lityの凄いところは画像表示だけではありません。

動画も拡大表示できるんです。

コードのURLを変えるだけで好きな動画の拡大表示ができます。

さっそくサンプルを見てください。

ライトボックス「Lity」のサンプル集

Google Maps

YouTube

Vimeo

いかがだったでしょうか?
今回はボタン風の画像を使いましたが、CSSボタンでも表示可能です。

CSS3ボタンで表示する場合
HTML
<p><a class="Square-btn01 btn-bgcolor-steelblue FontSize-M" href="<!-- Google Maps URL -->">Google Maps</a></p>
<p><a class="Square-btn01 btn-bgcolor-steelblue FontSize-M" href="<!-- YouTube URL -->" data-lity>YouTube</a></p>
<p><a class="Square-btn01 btn-bgcolor-steelblue FontSize-M" href="<!-- Vimeo URL -->" data-lity>Vimeo</a></p>

以上で「Lity」の紹介は終了です。

まとめ

軽量でレスポンシブにも対応したライトボックスを探すのは大変です。

今回はサンプルのために画像を沢山使いましたが、軽量と言っても使いすぎるのはあまりよろしくありません。

使いすぎに注意しながら効果的に使用しましょう。

関連記事
Share

Comments 0

Leave a reply