画像をlityで拡大表示方法 | SIRIUSシリウスjquery

前回の記事では、
javascriptの構文だけで表示を大きくさせましたが、
安っぽさを感じますね（笑）

今回説明する拡大表示方法は、
まず下の画像と文字をクリックしてしてみてください。
　　　こちらもクリックしてみてください。

すると、google画像検索で表示される画像のように背景が薄黒で
画像がかっこよく表示されたかと思います。

これは jQueryプラグインの「Lity.js」を実装することで可能にしています。
画像は100％サイズで表示されますが、
大きい画像もブラウザに合わせて自動調整してくれます。

他にも様々なプラグインがありますが、

　・プラグインファイルがめちゃめちゃ軽い
　・レスポンシブ対応で携帯でも見れる
　・面倒な調整項目がなくてお手軽

と一番良いと感じたので紹介させて頂くことにしました。

それでは手順です！

手順１

下のボタンより必要なファイルをダウンロードします。
（ファイル名：lity-1.5.1.zip　容量：3MB）

ちなみにファイル入手先の公式サイト
http://sorgalla.com/lity/

手順２

ファイルを解凍して、２つのフォルダを探します。

• dist
• vendor

この２つのフォルダをそのまま、あなたのサーバーのどこかにアップロードします。

手順３

編集メニューからHTMLテンプレートをクリックします。

手順４

拡大画像を使いたいページ、トップやエントリーページ等を選択して、
＜/head＞の上に下記の青文字を追記します。
※あなたのURL部分だけ、修正してください。

手順５

最後に記事本文中で画像や文字のリンク先を画像にして、
a と href の間に、data-lity を入れます。

data-lityの前後は半角スペースなのでお間違いなく・・・
a_data-lity_href　（私が躓いた場所w）

保存して確認してみましょう♪

これであなたもワンランク上の画像表示を試されてみてはいかがでしょう♪

私はこのプラグインが大変気に入りましたw