画像をサムネイル⇔クリックで拡大(lightbox)
画像をサムネイル表示してクリックしたら大きく表示する
というのが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プラグインを用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
配列をjQueryで取り扱う
やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
独自タグを変換して画像を表示させる
やりたい事↓↓ ----- {$IMG1}～{$IMG5}までの独自タグがある。 ...
-
-
jQueryで配列の値を検索
やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...
-
-
jQueryで高速化
高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...
-
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
-
PHPで画像にロゴをつける
フォームから送られてきた画像にロゴをつけたかった。 結論としてclass.upl ...
- PREV
- 定数とグローバル宣言した配列
- NEXT
- Ajaxで画像のアップロード(jquery.upload)