勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

画像をサムネイル⇔クリックで拡大(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。

 - jQuery, 画像

  関連記事

jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

PHPで画像を上下反転させ保存する

やりたかった事は、下記の通り。 ・既にフォルダに保存されている画像を上下反転させ ...

tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...

独自タグを変換して画像を表示させる

やりたい事↓↓ ----- {$IMG1}~{$IMG5}までの独自タグがある。 ...

jQueryのfind時に複数のセレクタ指定

みたいなソース ...

画像をドラッグ&ドロップでアップロードする方法

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

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...