その他のJSライブラリ画像ポップアウト・イメージギャラリー・スライドショー
- Animated JavaScript Slideshow〔アニメーションする本格的なスライドショー〕
- Carousel Slideshow〔六角形の箱が回転しているような画像ギャラリー〕
- FancyZoom 1.1〔画像クリックでギャラリー中央に元画像をズームアップ表示〕
- GreyBox
- Highslide JS
- Image Cross Fader〔クロスフェード切替する画像スライドショー(再生・停止ボタン付き)〕
- Lightbox JS〔現在のページに画像をオーバーレイ表示〕
- Lightweight Image Gallery with Thumbnails〔サムネイル付きの画像ギャラリー〕
- Lytebox〔Lightboxベース〕
- phatfusion: slideshow〔サムネイル付きの画像ギャラリー〕
- Slideshow Alternative〔スライドショー(フェード切替)〕
- Suckerfish HoverLightbox〔Lightbox Js使用の水平・垂直型ナビゲーションギャラリー〕
- TripTracker
- Ultimate Fade-in slideshow (v1.51)〔フェードイン切替スライドショー〕
- その他
FancyZoom 1.1
画像クリックでギャラリー中央に元画像をズームアップ表示
2008/12/15
FancyZoom 1.1
画像をクリックすると、画面中央に原寸大画像をズームアップ表示するJSライブラリ。 ズームアップ表示は、画面の大きさより大きい場合は、画面内に収まるサイズにリサイズして表示されます。
a要素のhref属性に元画像URL、img要素のsrc属性にサムネイル画像のURLを指定します。
<a href='元画像URL'><img src='サムネイル画像URL' /></a>
画像のタイトルを表示する場合は、a要素のtitle属性に指定します。
<a href='元画像URL' title='画像のタイトル'><img src='サムネイル画像URL' /></a>
ズームを無効にしたい場合は、a要素のrel属性に「nozoom」を指定します。
<a href='元画像URL' rel='nozoom'><img src='サムネイル画像URL' /></a>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>FancyZoom 1.1 | 設置サンプル</title> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="/content/lib/fancyzoom/FancyZoom.js"></script> <script type="text/javascript" src="/content/lib/fancyzoom/FancyZoomHTML.js"></script> <script type="text/javascript"> window.onload=function(){ setupZoom(); } </script> <style type="text/css"> td { margin:0; padding:0; } </style> </head> <body> <div id="wrap"> <h1><a href='http://www.cabel.name/2008/02/fancyzoom-10.html'>FancyZoom 1.1</a> | 設置サンプル</h1> <p>▼画像をクリックすると、ギャラリー中央に原寸大画像をズームアップ表示します。</p> <!-- CODE --> <div class="photoblock-many"> <a href="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" title="クリスピー・クリーム・ドーナッツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b.jpg" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3066/3055162549_d846be528d.jpg" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3187/3053314468_406d68da67.jpg" title="豆乳ラテ@STARBUCKS"><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9.jpg" title="抹茶フローズンクリーム@STARBUCKS"><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" title="メロンソーダとカフェオレ@CAFE EAT代官山"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_s.jpg" alt="" /></a> <a href="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda.jpg" title="Giottoのケーキ"><img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda_s.jpg" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> <a href="" title=""><img src="" alt="" /></a> </div> <!-- / CODE --> </div> </body> </html>
GreyBox
unknown
GreyBox v5.53
Webサイトや画像、その他のコンテンツを表示することができる22KBの軽量ライブラリです。 AJS.jsとAJS_fx.jsは、エフェクト効果を付ける場合のみ必要になります。
画像同様、Webページもグループ化して「Webサイトギャラリー」が作成できます。 またWebページをレイヤ表示時の画面サイズ(ピクセル指定 or フルスクリーン)も指定できます。
検索サイトなど、ページの読み込み時にテキストボックスにフォーカスを当てるスクリプトが走っているサイトをレイヤ表示すると、IEではスクリプトエラーが発生します。
JavaScriptの連想配列を使用して、画像タイトルと画像URLを指定すれば、flickrなどの写真共有サイトにある写真をギャラリー表示することもできます。
グローバル変数「GB_ROOT_DIR」の指定を、外部JSの読み込みよりも先に記述しないと動作しませんので注意してください。
<script type="text/javascript">
var GB_ROOT_DIR = "/content/lib/greybox/";
</script>
<script type="text/javascript" src="/content/lib/greybox/AJS.js"></script>
<script type="text/javascript" src="/content/lib/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/content/lib/greybox/gb_scripts.js"></script>




Image Cross Fader
クロスフェード切替する画像スライドショー(再生・停止ボタン付き)
unknown
Image Cross Fader v1.0.1
JavaScriptでDOMにアクセスし、画像がクロスフェードしながら切り替わる画像スライドショーを実装する方法が掲載されています。 スライドショーに表示する画像は、画像のURLをimageArrayという名前の配列にすべて格納しておきます。 スライドショーは、再生・一時停止のコントロールが可能です。 ページロード時に一時停止状態で表示するかの有無や、スライドのスピードなどを指定することもできます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Image Cross Fader v1.0.1の設置サンプル</title> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <!-- JS --> <script type="text/javascript"> var currentPhoto = 0; var secondPhoto = 1; var currentOpacity = new Array(); /* スライドショーに表示する画像のURLを配列に格納 */ var imageArray = new Array( "http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" ); var FADE_STEP = 2; var FADE_INTERVAL = 10; var pause = false; /* スライドショーを一時停止した状態で表示する場合は「true」を指定 */ /* ページロード時にスライドショー生成 */ function init() { currentOpacity[0]=99; for(i=1;i<imageArray.length;i++)currentOpacity[i]=0; mHTML=""; for(i=0;i<imageArray.length;i++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray[i] +"\"></div>"; document.getElementById("mContainer").innerHTML = mHTML; if(document.all) { document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)"; } else { document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99; } mInterval = setInterval("crossFade()",FADE_INTERVAL); } /* クロスフェード */ function crossFade() { if(pause)return; currentOpacity[currentPhoto]-=FADE_STEP; currentOpacity[secondPhoto] += FADE_STEP; if(document.all) { document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")"; document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")"; } else { document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100; document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100; } if(currentOpacity[secondPhoto]/100>=.98) { currentPhoto = secondPhoto; secondPhoto++; if(secondPhoto == imageArray.length)secondPhoto=0; pause = true; xInterval = setTimeout("pause=false",2000); } } /* 一時停止 */ function doPause() { if(pause) { pause = false; document.getElementById("pauseBtn").value = "一時停止"; } else { pause = true; document.getElementById("pauseBtn").value = "再生"; } } window.onload=init; </script> <!-- CSS --> <style type="text/css"> #mContainer { margin:0 0 1em 0; padding:0; position:relative; width:500px; height:375px; } .mPhoto { position:absolute; top:0px; left:0px; -moz-opacity:0.0; filter:Alpha(opacity=0); } .btn { border-style:solid; border-width:1px; border-color:#000000; font-family:verdana; font-size:9px; width:6em; float:left; } #photoCredits { width:500px; font-family:verdana; font-size:9px; text-align:right; } </style> </head> <body> <div id="wrap"> <h1><a href='http://slayeroffice.com/code/imageCrossFade/'>Image Cross Fader v1.0.1</a> | 設置サンプル</h1> <p>▼クロスフェードしながら切り替わる画像スライドショーです。左下のボタンで再生・一時停止をコントロールできます。</p> <!-- CODE --> <div id="mContainer"></div> <div class="cf"> <input type="button" value="一時停止" id="pauseBtn" onclick="doPause();" class="btn"> <div id="photoCredits">photos © PHP & JavaScript Room</div> </div> <!-- / CODE --> </div> </body> </html>
Lightbox JS
現在のページに画像をオーバーレイ表示
unknown
Lightbox JS
» prototype.jsとscriptaculous.jsのエフェクトライブラリを使用した「Lightbox v2」はこちら
リンク(テキストまたはサムネイル画像)をクリックすると、現在のページ上に原寸大画像をスタイルシートでオーバーレイ表示するJSライブラリです。 大きな画像など、画像の読み込みに時間がかかる場合は、読み込まれるまでローディング画像(アニメーションGIF)が表示されます。
まずhead要素内で、lightbox.jsとlightbox.cssを読み込みます。 Lightbox JSで使用する画像のフォルダを変更する場合は、lightbox.cssの画像パス指定や、lightbox.js内の下記のパスを修正する必要があります。
/* lightbox.js */ var loadingImage = '/content/lib/lightbox/loading.gif'; /* ローディング画像パス */ var closeButton = '/content/lib/lightbox/close.gif'; /* 閉じるボタン画像パス */
次に、body要素内に下記のHTMLタグを記述します。 原寸大表示の時に画像のキャプションを付ける場合は、a要素のtitle属性にキャプションとして表示する文字列を指定します。
/* キャプションなし */
<div class="thumbnail">
<a href="原寸大画像URL" rel="lightbox">
<img src="サムネイル画像URL" width="240" height="180" alt="" />
</a>
<div class="caption">
<a href="原寸大画像URL" rel="lightbox">リンクテキスト</a>
</div>
</div>
/* キャプション付き */ <div class="thumbnail"> <a href="原寸大画像URL" rel="lightbox" title="キャプション"> <img src="サムネイル画像URL" width="240" height="180" alt="" /> </a> <div class="caption"> <a href="原寸大画像URL" rel="lightbox" title="キャプション">リンクテキスト</a> </div> </div>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Lightbox JSの設置サンプル</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <!-- JS --> <script type="text/javascript" src="/content/lib/lightbox/lightbox.js"></script> <!-- CSS --> <link rel="stylesheet" href="/content/lib/lightbox/lightbox.css" type="text/css" /> <style type="text/css"> .thumbnail { padding:7px; border:1px solid #ddd; float:left; margin-right:10px; margin-bottom:15px; background:#fff; } .caption{ font-size:0.9em; padding-top:0.2em; text-align:center; } </style> </head> <body> <div id="wrap"> <h1><a href='http://www.huddletogether.com/projects/lightbox/'>Lightbox JS</a></h1> <!-- CODE --> <div class="cf"> <div class="thumbnail"> <a href="http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg" rel="lightbox"><img src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" width="240" height="180" alt="Starbucks Coffee 新宿サザンテラス店" /></a> <div class="caption"> <a href="http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg" rel="lightbox">写真1</a> </div> </div> <div class="thumbnail"> <a href="http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" rel="lightbox" title="クリスピー・クリーム・ドーナツ 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3113/3142386067_fc176636eb_m.jpg" width="240" height="180" alt="クリスピー・クリーム・ドーナツ" /></a> <div class="caption"> <a href="http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" rel="lightbox" title="クリスピー・クリーム・ドーナツ 新宿サザンテラス店">写真2(キャプション付)</a> </div> </div> </div> <!-- / CODE --> </div> </body> </html>
Lightweight Image Gallery with Thumbnails
サムネイル付きの画像ギャラリー
2008/12/28
Lightweight Image Gallery with Thumbnails
JavaScriptで、サムネイル付きの画像ギャラリーを実装する方法が掲載されています。

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Lightweight Image Gallery with Thumbnails | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- CSS --> <style type="text/css"> #jgal { list-style:none; width:200px; position:relative; } #jgal li { opacity:0.5; float:left; display:block; width:60px; height:60px; background-position:50% 50%; cursor:pointer; border:3px solid #fff; outline:1px solid #ddd; margin-right:14px; margin-bottom:14px; } #jgal li img { position:absolute; top:0; left:220px; display:none; border:3px solid #fff; outline:1px solid #ddd; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color:#bbb; opacity:0.99 /* safari bug */ } #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } #gallery { display: none; } </style> <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> <!-- JS --> <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> </head> <body> <div id="wrap"> <h1><a href='http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails'>Lightweight Image Gallery with Thumbnails</a> | 設置サンプル</h1> <!-- CODE --> <ul id="gallery"> <li><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="くまさんケーキ" /></li> <li><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="クリスピー・クリーム・ドーナツ" /></li> <li><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="CAFE EAT代官山S" /></li> <li><img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda.jpg" alt="Giottoのケーキ"></li> <li><img src="http://farm3.static.flickr.com/2339/2232216935_329eaf9a20.jpg" alt="ランチ@チャオタイ"></li> </ul> <div style="float:none; clear:both;"></div> <!-- / CODE --> </div> </body> </html>
Lytebox
Lightboxベース
unknown
Lytebox v3.22
Lightboxをベースに拡張したJSライブラリ。 画像のシングルイメージ、グループイメージ、スライドショーを作成したり、、HTMLコンテンツを画面上にレイヤーフレーム表示することができます。
基本動作はLightboxと同じですが、サムネイル画像をクリックした時にフェードインしながら画像を表示したり、 イメージギャラリーを自動化した「スライドショー」ができるのが特徴です。PAUSE、PLAY機能付きです。
イメージのレイヤ表示サイズは自動的にリサイズされてしまいますが、Webページの個別表示およびギャラリー表示サイズはA要素のREV属性に「幅・高さ・スクロールの有無」を指定できます。
<a href="http://www.google.jp" rel="lyteframe" title="Google"
rev="width:400px; height:300px; scrolling:no;">Google</a>


Suckerfish HoverLightbox
Lightbox Js使用の水平・垂直型ナビゲーションギャラリー
2009/4/8
Horizontal Suckerfish HoverLightbox
[JS]xfade2.js
Lightbox JSを使用したナビゲーションにマウスオーバーで出現する画像ギャラリー。 ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。 ナビゲーションは、水平型と垂直型のサンプルが掲載されています。 省スペースで画像ギャラリーを実装したいときに便利ですね。

<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Animated JavaScript Slideshow | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="/content/lib/suckerfish_hoverlightbox/navigation.js"></script> <script type="text/javascript" src="/content/lib/lightbox/lightbox.js"></script> <!-- CSS --> <style type="text/css"> /* Lightbox Control */ #lightbox { background-color:#000; padding:20px 20px 0 20px; color:#fff; } #lightboxDetails { padding-top:5px; } #lightboxCaption { float:left; color:#fff; font-size:11px; } #keyboardMsg { float:right; } #keyboardMsg a { color:#fff; text-decoration:none; letter-spacing:2px; text-transform:uppercase; font-weight:bold; } #lightbox img { border:none; } #overlay img { border:none; } #closebutton { display:none; } /* Horizontal(水平型ナビゲーションギャラリー) */ #horizontal { height:250px; } #horizontal ul#gallery { margin:0; height:60px; list-style:none; position:relative; } #horizontal ul#gallery li { border-right:1px solid #000; width:100px; display:block; float:left; text-align:center; } #horizontal ul#gallery li#first { border-left:1px solid #000; } #horizontal ul#gallery li:hover ul, ul#gallery li.sfhover ul { top:auto; left:0; } #horizontal ul#gallery li a { display:block; width:100px; line-height:30px; color:#000; text-decoration:none; } #horizontal ul#gallery li a:hover { background-color:#000; color:#fff; } #horizontal ul#gallery li ul { list-style:none; margin:0; padding:10px; width:570px; background-color:#000; position:absolute; left:-999em; } #horizontal ul#gallery li ul li { display:inline; text-align:left; clear:none; float:none; border:0; } #horizontal ul#gallery li ul li a { margin:2px; border:1px solid #ccc; padding:4px; position:relative; float:left; display:block; width:100px; height:75px; background-color:#333; } #horizontal ul#gallery li ul li a:hover { z-index:2; } #horizontal ul#gallery li ul li a img { position:absolute; width:100px; height:75px; } #horizontal ul#gallery li ul li a:hover img, ul#gallery li a:active img, ul#gallery li a:focus img { width:200px; height:150px; left:-50px; top:-37px; z-index:1; border:1px solid #000; } /* Vertical(垂直型ナビゲーションギャラリー) */ #vertical ul#gallery { margin:0; list-style:none; } #vertical ul#gallery li#first { border-top:1px solid #000; } #vertical ul#gallery li { clear:both; width:100px; position:relative; margin:0; padding:0; } #vertical ul#gallery li:hover ul, ul#gallery li.sfhover ul { left:100px; } #vertical ul#gallery li a { display:block; width:100px; height:30px; line-height:30px; color:#000; text-decoration:none; border-bottom:1px solid #000; } #vertical ul#gallery li a:hover { background-color:#000; color:#fff; } #vertical ul#gallery li ul { list-style:none; margin:0; padding:10px; width:570px; background-color:#000; position:absolute; left:-999em; top:-1px; } #vertical ul#gallery li ul li { display:inline; text-align:left; clear:none; position:static; z-index:2; } #vertical ul#gallery li ul li a { margin:2px; border:1px solid #fff; padding:4px; position:relative; float:left; display:block; width:100px; height:75px; background-color:#333; } #vertical ul#gallery li ul li a:hover { z-index:2; } #vertical ul#gallery li ul li a img { position:absolute; width:100px; height:75px; } #vertical ul#gallery li ul li a:hover img, ul#gallery li a:active img, ul#gallery li a:focus img { width:200px; height:150px; left:-50px; top:-37px; border:1px solid #000; z-index:2000; } </style> </head> <body> <div id="wrap"> <h1><a href='http://www.leigeber.com/2008/12/javascript-slideshow/'>Animated JavaScript Slideshow</a> | 設置サンプル</h1> <!-- CODE --> <h2>【水平型ナビゲーションギャラリー】</h2> <div id="horizontal"> <ul id="gallery"> <li id="first"><a href="gallery1/">高庵TOKYO</a> <ul> <li><a href="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" rel="lightbox" title="白子の昆布焼き"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="白子の昆布焼き" /></a></li> <li><a href="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" rel="lightbox" title="ササミ焼わさびマヨネーズ"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="ササミ焼わさびマヨネーズ" /></a></li> <li><a href="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4.jpg" rel="lightbox" title="揚げ物"><img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" alt="揚げ物" /></a></li> <li><a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" rel="lightbox" title="白レバー串みそ焼き"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="白レバー串みそ焼き" /></a></li> <li><a href="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg" rel="lightbox" title="屋台風羽根つき焼きラーメン"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="屋台風羽根つき焼きラーメン" /></a></li> <li><a href="http://farm4.static.flickr.com/3031/3141100435_24ebb86016.jpg" rel="lightbox" title="芋焼酎とグラス"><img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016_m.jpg" alt="芋焼酎とグラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3278/3141100261_e0139b971e.jpg" rel="lightbox" title="えいひれ"><img src="http://farm4.static.flickr.com/3278/3141100261_e0139b971e_m.jpg" alt="えいひれ" /></a></li> <li><a href="http://farm4.static.flickr.com/3124/3141100183_911b84afd5.jpg" rel="lightbox" title="モツァレラ入り軟骨つくね"><img src="http://farm4.static.flickr.com/3124/3141100183_911b84afd5_m.jpg" alt="モツァレラ入り軟骨つくね" /></a></li> <li><a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" rel="lightbox" title="白子の雲丹のせ炙り"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="白子の雲丹のせ炙り" /></a></li> <li><a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" rel="lightbox" title="自家製さつま揚げ二種"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="自家製さつま揚げ二種" /></a></li> </ul> </li> <li><a href="gallery2/">サザンテラス</a> <ul> <li><a href="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3130/3142386079_f2335019bd.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3130/3142386079_f2335019bd_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg" rel="lightbox" title="Starbucks Coffee 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" alt="Starbucks Coffee 新宿サザンテラス店" /></a></li> <li><a href="http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" rel="lightbox" title="クリスピー・クリーム・ドーナツ 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3113/3142386067_fc176636eb_m.jpg" alt="クリスピー・クリーム・ドーナツ 新宿サザンテラス店" /></a></li> </ul> </li> <li><a href="gallery3/">STARBUCKS</a> <ul> <li><a href="http://farm4.static.flickr.com/3113/3104684709_6911f58648.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3066/3055162549_d846be528d.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3187/3053314468_406d68da67.jpg" rel="lightbox" title="豆乳ラテ@STARBUCKS"><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_m.jpg" alt="豆乳ラテ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9.jpg" rel="lightbox" title="抹茶フローズンクリーム@STARBUCKS"><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_m.jpg" alt="抹茶フローズンクリーム@STARBUCKS" /></a></li> </ul> </li> </ul> <p> ↑ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。 </p> </div> <h2>【垂直型ナビゲーションギャラリー】</h2> <div id="vertical"> <p> ↓ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。 </p> <ul id="gallery"> <li id="first"><a href="gallery1/">高庵TOKYO</a> <ul> <li><a href="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" rel="lightbox" title="白子の昆布焼き"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="白子の昆布焼き" /></a></li> <li><a href="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" rel="lightbox" title="ササミ焼わさびマヨネーズ"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="ササミ焼わさびマヨネーズ" /></a></li> <li><a href="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4.jpg" rel="lightbox" title="揚げ物"><img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" alt="揚げ物" /></a></li> <li><a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" rel="lightbox" title="白レバー串みそ焼き"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="白レバー串みそ焼き" /></a></li> <li><a href="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg" rel="lightbox" title="屋台風羽根つき焼きラーメン"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="屋台風羽根つき焼きラーメン" /></a></li> <li><a href="http://farm4.static.flickr.com/3031/3141100435_24ebb86016.jpg" rel="lightbox" title="芋焼酎とグラス"><img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016_m.jpg" alt="芋焼酎とグラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3278/3141100261_e0139b971e.jpg" rel="lightbox" title="えいひれ"><img src="http://farm4.static.flickr.com/3278/3141100261_e0139b971e_m.jpg" alt="えいひれ" /></a></li> <li><a href="http://farm4.static.flickr.com/3124/3141100183_911b84afd5.jpg" rel="lightbox" title="モツァレラ入り軟骨つくね"><img src="http://farm4.static.flickr.com/3124/3141100183_911b84afd5_m.jpg" alt="モツァレラ入り軟骨つくね" /></a></li> <li><a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" rel="lightbox" title="白子の雲丹のせ炙り"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="白子の雲丹のせ炙り" /></a></li> <li><a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" rel="lightbox" title="自家製さつま揚げ二種"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="自家製さつま揚げ二種" /></a></li> </ul> </li> <li><a href="gallery2/">サザンテラス</a> <ul> <li><a href="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3130/3142386079_f2335019bd.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3130/3142386079_f2335019bd_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb_m.jpg" alt="イルミネーション@サザンテラス" /></a></li> <li><a href="http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg" rel="lightbox" title="Starbucks Coffee 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" alt="Starbucks Coffee 新宿サザンテラス店" /></a></li> <li><a href="http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" rel="lightbox" title="クリスピー・クリーム・ドーナツ 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3113/3142386067_fc176636eb_m.jpg" alt="クリスピー・クリーム・ドーナツ 新宿サザンテラス店" /></a></li> </ul> </li> <li><a href="gallery3/">STARBUCKS</a> <ul> <li><a href="http://farm4.static.flickr.com/3113/3104684709_6911f58648.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3066/3055162549_d846be528d.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3187/3053314468_406d68da67.jpg" rel="lightbox" title="豆乳ラテ@STARBUCKS"><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_m.jpg" alt="豆乳ラテ@STARBUCKS" /></a></li> <li><a href="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9.jpg" rel="lightbox" title="抹茶フローズンクリーム@STARBUCKS"><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_m.jpg" alt="抹茶フローズンクリーム@STARBUCKS" /></a></li> </ul> </ul> </li> </ul> </div> <!-- / CODE --> </div> </body> </html>
TripTracker
unknown
TripTracker
自動スライドショーができるイメージギャラリー。 ギャラリーの下に操作ボタンがあり、再生やスライドのコントロールの他に、メール添付や画像表示などのボタンもあります。 ただし、JSライブラリを外部JSに絶対URLで直接指定する必要があります。 ギャラリーの動作は、いろいろなAPI関数が用意されているので、カスタマイズできるみたいです。
