share facebook facebook twitter menu hatena pocket slack

2012.01.19 THU

jQuery Thickboxの設定方法

小森隆太

WRITTEN BY 小森隆太

こんにちわ。
職人見習いの小森です。

今回は、jQuery ThickBoxについて紹介します。

配布ページより、以下のファイルをダウンロードしてきます。
http://jquery.com/demo/thickbox/

jquery-latest.js
loadingAnimation.gif
thickbox.css
thickbox.js

thickbox.js 8行目にローディング画像のパスを自分の環境に合わせます。

var tb_pathToImage = "images/loadingAnimation.gif";

使用するファイルを読み込みます。




サムネイル表示した画像に拡大画像を表示するリンクを付けます。
一つの場合は表示されませんが、複数表示した場合rel属性を同じ値にするとprevとnextのリンクも表示されます。

 
 
 

HTML内にある非表示にしているHTMLをリンクをクリックすることで表示します。

隠れているHTMLが表示される

iframeを利用し外部HTMLを拡大表示することも出来ます。

testhtmlInIframe

※この記事は、なかの人(spitz8008)が書いています。

小森隆太

小森隆太

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。