脳汁portalスマートフォン用の表示で見る脳汁portalアメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログこの広告は、90日以上更新していないブログに表示しています。JavaScriptLightboxの使い方このPageでは以下のLightboxの使い方を説明します。http://lokeshdhakar.com/projects/lightbox2/そもそもLightboxとは何か?上のサイトのTOPページを見て頂けば一発ですが、画像をクリックした際にその画像をブラウザサイズに拡大するためのツールです。LightBoxのダウンロードまずは公式サイト(http://lokeshdhakar.com/projects/lightbox2/)からLightboxをダウンロードしてきましょう。ダウンロードしてきたファイルを解凍すると以下のような構造になっています。|-README.markdownこのディレクトリにはデモページやデモ画像なども色々入っているのですが、ここで重要なのは以下の5ファイル(ディレクトリ)です。jqueryを読み込みます。展開してきたlightboxディレクトリに作成する場合は、以下のように書きます。src="./js/lightbox.js"></script></body></html>これでもうlightboxを使用する準備は出来ました。imgファイルに関しては、lightbox.cssに使用するための記述が書かれていますので、このディレクトリ構造のままの場合は特に何もする必要はありません。>実際に拡大された後にされる画像を設定します。>拡大される前(クリックされる前)の画像の設定をします。今回は同じ画像を使い、サイズを25%に縮小して表示しています。これでシンプルなLightboxの拡大機能は使用することが出来ます。/></a>上記のように2行目でblue-frameクラスを指定して、以下のcssを読み込ませば完了です。#4ae;}クリックで次の画像に送れるようにする。準備として画像を3つに増やします。/></a>準備と書きましたがこれで完了です。ここではじめてdata-lightbox属性が意味を成します。image-1.jpgとimage-3.jpgのdata-lightbox属性の値は同じなので、画像を拡大した際に左右に矢印マークが出てきて、それぞれの画像に変更することが出来ます。image-2.jpgのdata-lightbox属性の値は他の二つと異なるので、image-2.jpgは飛ばされて表示をされます。(1)月別アーカイブ参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!portaltanさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。