画像をサムネイル⇔クリックで拡大(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で画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...