勉強したことのメモ

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
テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

other
faviconの取得と生成

AというサイトのfaviconをBというサイトで使いたかった。 ただ、favic ...

other
lightboxで文字をクリックしたら画像を表示させる

一般的に使われているのはサムネイル画像をクリックすると拡大画像が表示されるという ...

images
ファイルの更新日付取得とリネーム

やりたかった事は、画像ファイルの更新日時取得と リネーム。 ■参考サイト htt ...

jquery_logo
スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

jquery_logo
jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jquery_logo
要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

javascript_logo_unofficial-300x300
Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

jquery_logo
jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

jquery_logo
lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...