ぬきポンのBlog

本日、別システムの対応の間に、画像の表示方法の変更を行いました。

FancyboxというjQueryライブラリを使用することにしました。

以前使用していた時は、スマートフォンでの表示がイマイチだったので、使用をためらっていたのですが、さすがに各ライブラリ共に対応しているようです。

いわゆる、litebox系といわれるライブラリはどれも使いやすいのですが、今回はこのFancyboxを使用しました。

表示は、実際に画像を見ていただくのがいいでしょう。

画像をクリックすると、ポップアップで画像が表示されるはずです。

その画像の左半分をクリックすると、次の画像へ。右半分をクリックすると前の画像に切り替わる様になっています。（なるはず。）

写真は、2012年9月に行ったグランドキャニオン、ラスベガス、フーバーダムの写真です。（ここも是非行くといいですよ！）

• 
• 
• 
• 
• 

 

 技術的には、javascriptで以下の処理をしています。

• 過去の投稿で、画像にaタグを入れているので、imgタグを囲っているaタグを削除
• imgタグをaタグで囲う。その際、class="fancybox"とhrefにimgタグのsrc属性に入っている画像URLを設定。
• fancyboxを実行

こんな感じで、今までずっと対応したかったことを対応したので、たまにはブログで自慢してみようと思って書いてみました。

実際には、よくある機能ですけどね^^;