勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

画像をサムネイル⇔クリックで拡大(lightbox)

   2024/01/12  jQuery

画像をサムネイル表示してクリックしたら大きく表示する
というのが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

  関連記事

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

Lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...