勉強したことのメモ

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, 画像

  関連記事

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 ...

テキストエリアのリアルタイムプレビュー

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