画像をサムネイル⇔クリックで拡大(lightbox)
2024/01/12
画像をサムネイル表示してクリックしたら大きく表示する
というのがlightboxで簡単に実装できたのでメモ。
http://lokeshdhakar.com/projects/lightbox2/
↑↑でダウンロードする。
表示するページと同じ階層にフォルダをアップする。
<head>内に、下記を記述。
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
画像を読み出す際は、
<a href="画像のパス名(相対もしくは絶対パス)" rel="lightbox">
<img src="画像のパス名(相対もしくは絶対パス)" style="width:好きに; height:好きに;">
</a>
だけでOK。
関連記事
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
jQueryで画像(タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...