ズームした一部分をサムネイルとしてポップアップ/画像表示/SolidStateEveryday

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zoomy.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="zoomy - prototype plugin " />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/protoculous.js" type="text/javascript"></script>
<script src="zoomy.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window,"load",function() {
       $$("ul.zoomy a").each(function(element){
        new Zoomy(element, { hideCaption: true });     
       });
	   $$("ul.zoomy2 a").each(function(element){
        new Zoomy(element, { draggable: true });     
       });
    });
</script>
</head>

<body>
<ul class="zoomy">
		<li><a href="#" style="background-image: url(images/1.jpg)" title="MIKOSHI">MIKOSHI</a></li>
		<li><a href="#" style="background-image: url(images/2.jpg)" title="TORIY">TORIY</a></li>
		<li><a href="#" style="background-image: url(images/3.jpg)" title="SHIKA" >SHIKA</a></li>
</ul>
<ul class="zoomy2">        
        <li><a href="http://www.google.com" style="background-image: url(images/1.jpg)" title="MIKOSHI">MIKOSHI</a></li>
		<li><a href="http://www.yahoo.com" style="background-image: url(images/2.jpg)" title="TORIY">TORIY</a></li>
        <li><a href="http://www.msn.com" style="background-image: url(images/3.jpg)" title="SHIKA" >SHIKA</a></li>
</ul>

</body>
</html>

	Zoomy.js

サムネイル要らずのポップアップ表示系スクリプト。
拡大表示用の画像の一部分をサムネイルとして扱い表示します。
通常は拡大表示のみですが、キャプションリンク付きの表示バージョンもあり汎用性に富んでいます。
サンプルはiframe内のためか動作しません。動作確認はこちらでどうぞ。

セットアップ

ダウンロード<head>の設定

まずデモサイトへ行き、ページ下部にあるZoomy.jsをダウンロードします。
必要なものはこのフォルダに全て入っているので、あとはアップロードして適用したいページのヘッダーに読み込ませます。

次にターゲットの指定と動作の指定を行います。

ul.zoomy a、ul.zoomy2 aの箇所でそれぞれのターゲットを決めていて、この場合は「zoomy,zoomy2とクラスの付いた<ul>要素内の<a>要素」といった具合にターゲットを指定しています。
適用させたい要素に合わせて変更が可能なので、適宜調節してください。
次に動作の指定ですが、hideCaption: trueは通常のポップアップ表示のみ、draggable: trueはキャプションリンク付きのポップアップ表示という意味です。

マークアップ

前述のターゲットで指定したように要素をマークアップします。

<ul class="zoomy">
   <li><a href="#" style="background-image: url(images/rubix_cube.jpg)" title="Rubix Cube">Rubix Cube</a></li>
   <li><a href="#" style="background-image: url(images/frogs.jpg)" title="Frogs">Frogs</a></li>
   <li><a href="#" style="background-image: url(images/dice.jpg)" title="Dice" >Dice</a></li>
</ul>
<ul class="zoomy2">    <li><a href="http://www.google.it" style="background-image: url(images/rubix_cube.jpg)" title="Rubix Cube">Rubix Cube</a></li>
   <li><a href="http://www.yahoo.com" style="background-image: url(images/frogs.jpg)" title="Frogs">Frogs</a></li>
   <li><a href="http://www.msn.com" style="background-image: url(images/dice.jpg)" title="Dice" >Dice</a></li>
</ul>　

これでスクリプトの動作設定は完了です。
もしフェードの間隔を調節したいのであれば、zoomy.jsの２８行目

appearDuration: 0.5,　

この箇所の数値を変更します。増やすとゆっくりとフェードしてくるようになるのでお好みで調節してください。
サムネイルのサイズを変更する場合は、style.css内の .zoomy li, .zoomy2 li,.zoomy a, .zoomy2 aのwidthとheightの値を変更します。
同じように、サムネイルの表示位置を変更したいのならzoomy a, .zoomy2 aのbackground-positionを変更してやります。