画像をサムネイル⇔クリックで拡大(lightbox)
2014/07/03
画像をサムネイル表示してクリックしたら大きく表示する
というのが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。
関連記事
-
-
tableのフィルター機能
jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...
-
-
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...
-
-
リアルタイムプレビュー時の改行とテーブルの上部揃え
■サンプル http://sample.taitan916.info/previ ...
-
-
jQueryでコンテンツのスライド
jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...
-
-
複数のajax処理の結果をまとめて表示
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
safariのみスクロール関連のイベントが発火しない
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
プラグインを使用せず、jQueryでオートページャー
プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
テキストエリアのリアルタイムプレビュー
テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...
- PREV
- 定数とグローバル宣言した配列
- NEXT
- Ajaxで画像のアップロード(jquery.upload)