jquerytoolsを使ってライトボックス風に画像拡大方法

jqueryのプラグインでuiの次に人気ができているjQuery TOOLSを使って画像を拡大する方法を紹介します。
jQuery TOOLSの公式サイト

jqueryがたった一行でできる方法

ちょっとだけ画像を拡大させて、キャプチャーをつけたいときにつかえます。

The Barcelona Pavilion

Barcelona, Spain

The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. It was an important building in the history of modern architecture.

Several critics, historians and modernists have declared it “the most beautiful building of the century

The Barcelona Pavilion

Barcelona, Spain

Another unique feature of this building is the exotic materials Mies chose to use.

Plates of high-grade stone materials like veneers of Tinos verde antico marble and golden onyx as well as tinted glass of grey, green, white, in addition to translucent glass, perform exclusively as spatial dividers.

英語で表示すると、なんとなくかっこよく見えてしまうのは自分だけでしょうか…

html

1行目、2行目が画像の表示
それ以降は
<div class="simple_overlay" id="mies1"></div>
が左の写真の詳細部分
<div class="simple_overlay" id="mies2"></div>
が右の写真の詳細部分

<img src="小さい画像1のURL" rel="#mies1"/>
<img src="小さい画像2のURL" rel="#mies2"/>
<div class="simple_overlay" id="mies1">
<img src="拡大させた画像1のURL" />
<div class="details">
<h3>画像名</h3>
<h4>画像の要約</h4>
<p>画像の詳細</p>
</div><!--details-->
</div><!--mies1-->
<div class="simple_overlay" id="mies2">
<img src="拡大させた画像2のURL" />
<div class="details">
<h3>画像名</h3>
<h4>画像の要約</h4>
<p>画像の詳細</p>
</div><!--details-->
</div><!--mies2-->

jquery

<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js">
</script>
<script type="text/javascript">
$("img[rel]").overlay();
</script>

<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js">
</script>

でCDNのjqueryTOOLSのプラグイン＋jqueryを読み込んでいます。

 $("img[rel]").overlay();

jqueryのプログラムはたった一行
img[rel]でimgタグのrel="#mies1"を読み込みます。
要は$("#mies1").overlay()
そしてhtmlのid="#mies1"のdiv要素部分を読み込みoverlay()のイベントを実行します。

css

.simple_overlay {display:none; z-index:10000;
background-color:#333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3  */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;} 
.simple_overlay .close {background-image:url(close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;}
.details {position:absolute;
top:15px;
right:15px;
font-size:11px;
color:#fff;
width:150px; }
.details h3 {color:#aba;
font-size:15px;
margin:0 0 -10px 0;}

.simple_overlayでクリックした後の画像のデザインを指定しています。
/*css3*/より下はcss3対応ブラウザのみ実行されます。
.simple_overlay .closeは閉じるボタンの配置
.detailsで画像の横の文章をデザインしています。

apple風の画像拡大方法

Berlin Gustavohouse

The Gustavo House in Storkower Strasse.
It was built in 1978 and reconstructed in 1998 by the Spanish artist Gustavo.

Berlin Alexanderplatz Station

Berlin Alexanderplatz is a railway station in the Berlin city centre and
is one of the city’s most important interchange points for local public transport.

html

2行目、3行目で縮小画像を表示させて、4行目以降が画像のキャプチャーや詳細の部分になります。

<div id="triggers">
<img src="左の縮小画像URL" rel="#photo1"/>
<img src="右の縮小画像URL" rel="#photo2"/></div> 
<div class="apple_overlay black" id="photo1"> 
<img src="左の画像URL" /> 
<div class="details"> 
<h3>Berlin Gustavohouse</h3> 
<p> 
The Gustavo House in Storkower Strasse.
It was built in 1978 and reconstructed 
in 1998 by the Spanish artist Gustavo.
</p> 
</div> 
</div> 
<div class="apple_overlay" id="photo2"> 
<img src="右の画像URL" /> 
<div class="details"> 
<h3>Berlin Alexanderplatz Station</h3> 
<p> 
Berlin Alexanderplatz is a railway station in the Berlin city centre 
and is one of the city's most important interchange points 
for local public transport.
</p> 
</div> 
</div>

jquery

effectで’apple’を使うためにjquery.toolsのフルバージョンをCDNで読み込ませます。

<script 
src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>

img[rel]でimgタグのrel="#photo1"を読み込みます。
要は$("#photo1").overlay()
そしてhtmlの<div class="apple_overlay black" id="photo1">…</div>
のdiv要素部分を読み込みoverlay()のイベントを実行します。

css

div.apple_overlay.black {
background-image:
url(http://static.flowplayer.org/tools/img/overlay/transparent.png);		
color:#fff;}
div.apple_overlay h2 {
margin:10px 0 -9px 0;
font-weight:bold;
font-size:14px;}
div.black h2 {color:#fff;}
#triggers img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
a:active {outline:none;}
:focus {-moz-outline-style:none;}
.apple_overlay {
display:none;
background-image:url(img/white.png);
width:640px;		
padding:35px;
font-size:11px;}
.apple_overlay .close {
background-image:url(img/close.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;}