勉強したことのメモ

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_logo
画像をドラッグ&ドロップでアップロードする方法

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

jquery_logo
tableのフィルター機能

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

jquery_logo
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

jquery_logo
jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

other
ローディングアイコンの自動生成

オートページャーを作成中にローディングしている アイコンが必要になったのでメモ。 ...

jquery_logo
jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

jquery_logo
画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

images
PHPで画像のサイズや拡張子等、詳細情報を取得

PHPで画像のサイズや拡張子等、詳細情報を取得する際 いつもググってしまっていた ...

images
ImageMagickについて

画像をSSH経由でリサイズする必要があった。 その際に「コンバートがいいよ」とい ...

jquery_logo
スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...