画像をサムネイル⇔クリックで拡大(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。
関連記事
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...