画像をクリックするとその場で拡大表示するようにしました。 : ういすぷの記録帳

「ういすぷのそのとき日記のブログ」ですが、今まで画像をクリックすると新しいタブもしくは、ウインドウで表示していましたが、その場で拡大表示するようにしてみました。
JavaScriptで画像のリンクタグを処理しているため、読み込みタイミングにより、その場で拡大表示されないことがありますが、操作性は向上したのではないかなと思います。
楽しくて、フィギュアの写真を多く紹介している記事を開き、クリック、クリックしちゃいました。


今回利用したのは、「Lightbox Plus」というスクリプトで、リンクタグにグループとなる文字列（rel="lightbox[TargetImage]"）を追加するだけで実装できる、お手軽なものです。
別件で処理しましたが、jQueryのタグ編集機能をつかって、動的に「Lightbox Plus」対応のHTMLに変更することも可能です。

参考例＞
JavaScriptでAタグに「rel="lightbox[TargetImage]"」を追加しています。このままだとすべてのAタグに追加されてしまいますので、IDやClassで範囲を制限すると良いかと思います。

$(function(){

   $("a").attr("rel", "lightbox[TargetImage]");

});

UI部分を触るのは楽しい物です。



□ 関連記事
・WindowsのWeb サイト用カスタム タイルを設置しました。
・残り日数カウンター『2016年までタイマー』にグラフを追加しました！
・ブログのトップにメニューボタンを設置しました。
・月曜日インストーラー
・トップページ少し更新しました。
・Webアプリケーション 記事一覧


□ 関連サイト
Lightbox Plus