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

2015.09.12
画像をクリックするとその場で拡大表示するようにしました。
「ういすぷのそのとき日記のブログ」ですが、今まで画像をクリックすると新しいタブもしくは、ウインドウで表示していましたが、その場で拡大表示するようにしてみました。
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

コメント投稿フォーム

 

フィギュア

最近

カテゴリ

カプセルトイ

初音ミク

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard

PICUP