画像ポップアウト・イメージギャラリー・スライドショー｜その他のJSライブラリ｜Ajax

TOP Ajax画像ポップアウト・イメージギャラリー・スライドショー

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)〔フェードイン切替スライドショー〕
その他

Animated JavaScript Slideshow
アニメーションする本格的なスライドショー

2008/12/27

Animated JavaScript Slideshow

Firefox、Internet Explorer、Opera、Safari、Chrome

This script is available for any personal or commercial projects under the creative commons license and is offered AS-IS, NO FREE SUPPORT PROVIDED.

［CSS］style.css
［JS］compressed.js

JavaScriptでアニメーションするスライドショーをたった5KBで実装できる超軽量ライブラリ。画像を切り替えると、画像の下部に半透明のボックスが現れ、画像のタイトルと説明文が表示されます。画像をa要素でくくれば、リンクを付けられます。スライドショーやサムネイル部分のスタイルやスピードなどは、JavaScriptの変数の値を変更することでカスタマイズ可能です。

<ul id="slideshow">
    <li>
        <h3>画像のタイトル</h3>
        <span>元画像URL</span>
        <p>画像の説明文</p>
        <a href="リンク先"><img src="サムネイル画像URL" alt="" /></a>
    </li>
</ul>

設置イメージ

Animated JavaScript Slideshowの設置サンプルサンプルを見る

<!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" />
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/content/lib/tinyslideshow/style.css" />
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.leigeber.com/2008/12/javascript-slideshow/'>Animated JavaScript Slideshow</a> | 設置サンプル</h1>
<!-- CODE -->
<ul id="slideshow">
    <li>
        <h3>ダークチェリーモカ@STARBUCKS</h3>
        <span>http://farm4.static.flickr.com/3023/3055162547_cde4e8921e.jpg</span>
        <p>ビターなチョコレートとチェリーの甘さがすごくマッチしてます。ホットで飲むとホイップクリームが溶けてとってもまろやか♪寒い日にぴったりですね！</p>
        <a href="http://www.flickr.com/photos/22559849@N06/3055162547/"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_t.jpg" alt="" /></a>
    </li>
    <li>
        <h3>バニラミルクフラペチーノ@STARBUCKS</h3>
        <span>http://farm4.static.flickr.com/3113/3104684709_6911f58648.jpg</span>
        <p>牛乳ヒゲできそうですよねｗ</p>
        <a href="http://www.flickr.com/photos/22559849@N06/3104684709/"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_t.jpg" alt="" /></a>
    </li>
    <li>
        <h3>白レバー串みそ焼き@高庵</h3>
        <span>http://farm4.static.flickr.com/3203/3105515562_b203eee85a.jpg</span>
        <p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうｗフォアグラステーキより美味しいかも！？</p>
        <a href="http://www.flickr.com/photos/22559849@N06/3105515562/"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_t.jpg" alt="" /></a>
    </li>
    <li>
        <h3>白子の雲丹のせ炙り@高庵</h3>
        <span>http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg</span>
        <p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ！口に入れるとじゅわーっとうまみが広がります。あー幸せ！</p>
        <a href="http://www.flickr.com/photos/22559849@N06/3104684027/"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" alt="" /></a>
    </li>
    <li>
        <h3>自家製さつま揚げ二種@高庵</h3>
        <span>http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg</span>
        <p>黒いのはしいたけじゃありませんｗさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます！</p>
        <a href="http://www.flickr.com/photos/22559849@N06/3104683957/"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" alt="" /></a>
    </li>
</ul>
<!-- スライドショー ＋ サムネイル -->
<div id="wrapper">
    <!-- スライドショー -->
    <div id="fullsize">
        <div id="imgprev" class="imgnav" title="前へ"></div>
        <div id="imglink"></div>
        <div id="imgnext" class="imgnav" title="次へ"></div>
        <div id="image"></div>
        <div id="information">
            <h3></h3>
            <p></p>
        </div>
    </div>
    <!-- サムネイル -->
    <div id="thumbnails">
        <div id="slideleft" title="左へスライド"></div>
        <div id="slidearea">
            <div id="slider"></div>
        </div>
        <div id="slideright" title="右へスライド"></div>
    </div>
</div>
<!-- JS -->
<script type="text/javascript" src="/content/lib/tinyslideshow/compressed.js"></script>
<script type="text/javascript">
    $('slideshow').style.display='none';
    $('wrapper').style.display='block';
    var slideshow=new TINY.slideshow("slideshow");
    window.onload=function(){
        slideshow.auto=true; /* 自動再生の有無 */
        slideshow.speed=5; /* スライドショーのスピード */
        slideshow.link="linkhover"; /* スライドショーの元画像のリンクが張られているときのクラス名 */
        slideshow.info="information"; /* スライドショーの情報表示部分のID名 */
        slideshow.thumbs="slider";    /* サムネイル部分のID名 */
        slideshow.left="slideleft"; /* サムネイルの左スライドコントロール部分のID名 */
        slideshow.right="slideright"; /* サムネイルの右スライドコントロール部分のID名 */
        slideshow.scrollSpeed=4; /* サムネイルのスクロールするスピード */
        slideshow.spacing=5; /* サムネイル画像の余白 */
        slideshow.active="red"; /* サムネイル画像の枠線 */
        slideshow.init("slideshow","image","imgprev","imgnext","imglink");
    }
</script>
<!-- / CODE -->
        </div>
    </body>
</html>

Carousel Slideshow
六角形の箱が回転しているような画像ギャラリー

2008/12/12

多角形の箱が回転しているような画像ギャラリーを実装できるJSライブラリ。四角形にするか6角形にするか指定できます！面の数は、Car_NoOfSidesに4、6、8、12のいずれかを指定します。例えば4角形にした場合は、少なくとも2枚の画像が必要になるなど、面の数によって最低限必要な画像の枚数が変わります。六角形の面部分に表示する画像は、Car_Image_Sourcesという名前の配列に、画像URL、画像のリンク先URLの順に指定します。画像サイズは、Car_Image_Width、Car_Image_Heightという変数にピクセル単位で指定します。回転のスピードや枠線色などは、すべて変数の値を変更することでカスタマイズすることができます。

設置イメージ

jQuery Image Stripの設置サンプルサンプルを見る

<!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>Carousel Slideshow | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript">
            window.onload=function(){
                Carousel();
            }
        </script>
        <script type="text/javascript">
/***********************************************
* Carousel Slideshow script- &copy; Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html 
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="404" height="202">
</div>
placeholder width:
4 sided: 1.42 * carousel image width + 3
6 sided: 2 * carousel image width +4
8 sided: 2.62 * carousel image width + 5
12 sided: 3.87 * carousel image width + 7
placeholder height: 
carousel image height+2

Insert onload in body tag
*********************************************************/

// 7 variables to control behavior
var Car_Image_Width=240;
var Car_Image_Height=180;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12

/* array to specify images and optional links. 
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg","http://www.flickr.com/photos/22559849@N06/2974008614/",
"http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg","http://www.flickr.com/photos/22559849@N06/2973155055/",
"http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg","http://www.flickr.com/photos/22559849@N06/2973352946/",
"http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda.jpg","http://www.flickr.com/photos/22559849@N06/2971768652/"
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]); 
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.dynamicdrive.com/dynamicindex14/carousel.htm'>Carousel Slideshow</a> | 設置サンプル</h1>
<!-- CODE -->
            <div id="Carousel" style="position:relative">
                <img src="/content/img/ajax/placeholder.gif" width="371" height="225" />
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

FancyZoom 1.1
画像クリックでギャラリー中央に元画像をズームアップ表示

2008/12/15

FancyZoom 1.1

個人サイトでの利用は無料だが、商用利用の場合は有料。

FancyZoom.js、FancyZoomHTML.js

画像をクリックすると、画面中央に原寸大画像をズームアップ表示する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>

設置イメージ

FancyZoom 1.1の設置サンプルサンプルを見る

<!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

IE 5.5+、Firefox 1.5+、Opera 8.5+、Safari

GPL（個人利用であれば再配布・改変可）

AJS.js、AJS_fx.js、gb_scripts.js

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>

» 設置サンプルを見る

フルスクリーン

ウィンドウサイズ指定+画面中央に表示

Webサイトギャラリー

イメージギャラリー

Highslide JS

unknown

Highslide JS

IE 5+、Firefox 1.5+、Opera 8.5+、Netscape 7.2、Safari 2+(Windows Safari 3+)、Konqueror 3.5

Creative Commons Attribution-NonCommericial 2.5（表示-非営利 2.5 一般）

highslide.js

以下の例のように、1つの画像にサムネイルビュアーを設置するタイプと、複数のサムネイルを関連付けたスライドショータイプがあります。原寸表示した時に、画像説明文などのテキストも表示できます。

その他、HTMLコンテンツ、スクロールするHTMLコンテンツ、Ajaxによる動的コンテンツ表示、インラインフレーム、Flash表示もできます。

設置イメージ

サンプルを見る

<!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>Highslide JS の設置例</title>
        <script type="text/javascript" src="/content/lib/highslidejs/js/highslide.js"></script>
        <script type="text/javascript">
            hs.graphicsDir = '/content/lib/highslidejs/graphics/';
            window.onload = function() { hs.preloadImages(5); }
        </script>
        <style type="text/css">
            * {
                font-family: Verdana, Helvetica;
                font-size: 10pt;
            }
            .highslide {
                cursor: url("/content/lib/highslidejs/graphics/zoomin.cur"), pointer;
                outline: none;
            }
            .highslide img {
                border: 2px solid gray;
            }
            .highslide:hover img {
                border: 2px solid silver;
            }

            .highslide-image {
                border-bottom: 1px solid white;
            }
            .highslide-image-blur {
            }
            .highslide-caption {
                display: none;
                border-bottom: 1px solid white;
                font-family: Verdana, Helvetica;
                font-size:11px;
                padding: 5px;
                background-color: maroon;
                color:#fff;
            }
            .highslide-loading {
                display: block;
                color: white;
                font-size: 9px;
                font-weight: bold;
                text-transform: uppercase;
                text-decoration: none;
                padding: 3px;
                border-top: 1px solid white;
                border-bottom: 1px solid white;
                background-color: black;
            }
            a.highslide-credits,
            a.highslide-credits i {
                padding: 2px;
                color: #fff;
                text-decoration: none;
                font-size: 10px;
            }
            a.highslide-credits:hover,
            a.highslide-credits:hover i {
                color: white;
                background-color: gray;
            }
            .highslide-display-block {
                display: block;
            }
            .highslide-display-none {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="highslide-container"></div>
        <h1><a href='http://vikjavev.no/highslide/'>Highslide JS</a>の設置サンプル</h1>
        <p>
            <a id="thumb1" href="/content/img/pic1.png" class="highslide" onclick="return hs.expand(this)">
                <img src="/content/img/pic1-thumb.png" alt="Highslide JS" title="クリックで拡大表示" width="120" height="90" />
            </a>
        </p>
        <div class='highslide-caption' id='caption-for-thumb1'>
            話題のクリスピー・クリーム・ドーナツ（*・ω・*）
        </div>
        <p>
            <a id="thumb2" href="/content/img/pic2.png" class="highslide" onclick="return hs.expand(this)">
                <img src="/content/img/pic2-thumb.png" alt="Highslide JS" title="クリックで拡大表示" width="120" height="90" />
            </a>
        </p>
        <div class='highslide-caption' id='caption-for-thumb2'>
            新宿アルタの地下にあるクマ顔のケーキ（*・ω・*）
        </div>
    </body>
</html>

Image Cross Fader
クロスフェード切替する画像スライドショー（再生・停止ボタン付き）

unknown

Image Cross Fader v1.0.1

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

設置イメージ

Image Cross Faderの設置サンプルサンプルを見る

<!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 &copy; PHP & JavaScript Room</div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Lightbox JS
現在のページに画像をオーバーレイ表示

unknown

Lightbox JS

» prototype.jsとscriptaculous.jsのエフェクトライブラリを使用した「Lightbox v2」はこちら

すべてのモダンブラウザ

Creative Commons 2.5（表示 2.5 一般）

［CSS］lightbox.css／［JS］lightbox.js

overlay.png、loading.gif、close.gif

リンク（テキストまたはサムネイル画像）をクリックすると、現在のページ上に原寸大画像をスタイルシートでオーバーレイ表示する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>

設置イメージ

Lightbox JSの設置サンプルサンプルを見る

<!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

IE 5+、Firefox、Safari、Opera 8+(opacityなし）

JavaScriptで、サムネイル付きの画像ギャラリーを実装する方法が掲載されています。

設置イメージ

Lightweight Image Gallery with Thumbnailsの設置サンプルサンプルを見る

<!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

IE 5.01(SP2) &、5.5(SP2) & 6.0(SP2) & 7.0、Firefox 1.5+、Opera 9.23+

Creative Commons Attribution 3.0 License.（表示）

lytebox.js

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>

» 設置サンプルを見る

スライドショー

HTMLコンテンツ

phatfusion: slideshow
サムネイル付きの画像ギャラリー

2008/12/28

phatfusion: slideshow

Firefox 2 (mac / pc)、IE6、IE7、Safari (mac)

MIT

mootools.js v1.11、backgroundslider.js、slideshow.js v1.3

サムネイルとコントロール付きの画像ギャラリーを実装できるJSライブラリ。画像はフェードしながらスムーズに切り替わり、現在表示されている画像のサムネイルが枠線でハイライト表示されます。ハイライト表示の枠線は、次に表示する画像へとスムーズにアニメーション移動します。

設置イメージ

phatfusion: slideshowの設置サンプルサンプルを見る

<!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>phatfusion: slideshow | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="/content/lib/mootools/mootools.v1.11.js"></script>
        <script type="text/javascript" src="/content/lib/utils/backgroundslider.js"></script>
        <script type="text/javascript" src="/content/lib/mootools/slideshow_v1.3.js"></script>
        <!-- CSS -->
        <style type="text/css">
            /**************************************************************
            SlideShow
            v 1.3
            **************************************************************/
            .slideshowContainer {
                border:1px solid #ccc;
                width:500px;
                height:375px;
                margin-bottom: 5px;
            }
            .loading {
                background: url("/content/lib/galleryimages/loading.gif") center no-repeat;
            }
            .slideshowThumbnail {
                outline: none;
            }
            .slideshowThumbnail img {
                border:1px solid #fff;
                padding:5px;
                margin-right:10px;
            }
            a:hover.slideshowThumbnail img {
                border:1px solid #666;
                padding:5px;
            }
            .current img {
                border:1px solid red;
                padding:5px;
            }
            .outline {
                border:1px solid orange;
                z-index:0;
                position:absolute;
            }
            #thumbnails {
                width:500px;
                margin:0 0 0 5px;
            }
            #thumbnails p {
                margin:5px 0;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.phatfusion.net/slideshow/'>phatfusion: slideshow</a> | 設置サンプル</h1>
<!-- CODE -->
            <div id="slideshowContainer" class="slideshowContainer"></div>
                <div id="thumbnails">
                    <a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" class="slideshowThumbnail"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_t.jpg" alt="白レバー串みそ焼き@高庵" /></a>
                    <a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" class="slideshowThumbnail"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" alt="白子の雲丹のせ炙り@高庵" /></a>
                    <a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" class="slideshowThumbnail"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" alt="自家製さつま揚げ二種@高庵" /></a>
                    <a href="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" class="slideshowThumbnail"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_t.jpg" alt="白子の昆布焼き@高庵" /></a>
                    <a href="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" class="slideshowThumbnail"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_t.jpg" alt="ササミ焼わさびマヨネーズ@高庵" /></a>
                    <p>
                        <a href="#" onclick="show.play(); return false;">再生</a>
                        　|　
                        <a href="#" onclick="show.stop(); return false;">停止</a>
                        　|　
                        <a href="#" onclick="show.next(); return false;">次へ</a>
                        　|　
                        <a href="#" onclick="show.previous(); return false;">前へ</a>
                    </p>
                </div>
            </div>
            <script type="text/javascript">
                window.addEvent('domready',function(){
                    var obj = {
                        wait: 3000, 
                        effect: 'fade',
                        duration: 1000, 
                        loop: true, 
                        thumbnails: true,
                        backgroundSlider: true,
                        onClick: function(i){alert(i)}
                    }
                    show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);
                    show.play();
                });
            </script>
<!-- / CODE -->
        </div>
    </body>
</html>

Slideshow Alternative
スライドショー（フェード切替）

2008/12/28

Slideshow Alternative

［CSS］slideshow1.css、slideshow2.css（JSで読み込み）
［JS］xfade2.js

クロスフェードしながら自動で切り替わる画像ギャラリーを実装できるJSライブラリ。

設置イメージ

Slideshow Alternativeの設置サンプルサンプルを見る

<!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>Slideshow Alternative | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="/content/lib/slideshow_alternative/xfade2.js"></script>
        <!-- CSS -->
        <link rel="stylesheet" href='/content/lib/slideshow_alternative/slideshow1.css' type="text/css" />
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://sonspring.com/journal/slideshow-alternative'>Slideshow Alternative</a> | 設置サンプル</h1>
<!-- CODE -->
            <div id="rotator">
                <a href="http://9rules.com/"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" alt="白レバー串みそ焼き@高庵" /></a>
                <a href="http://cssbeauty.com/"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" alt="白子の雲丹のせ炙り@高庵" /></a>
                <a href="http://godbit.com/"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" alt="自家製さつま揚げ二種@高庵" /></a>
                <a href="http://stylegala.com/"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" alt="白子の昆布焼き@高庵" /></a>
                <a href="http://yahoo.com/"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" alt="ササミ焼わさびマヨネーズ@高庵" /></a>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Suckerfish HoverLightbox
Lightbox Js使用の水平・垂直型ナビゲーションギャラリー

2009/4/8

Horizontal Suckerfish HoverLightbox

［CSS］slideshow1.css、slideshow2.css（JSで読み込み）
［JS］xfade2.js

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

設置イメージ

Suckerfish HoverLightboxの設置サンプルサンプルを見る

<!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

個人利用なら無料。商用利用はライセンス購入が必要。

http://slideshow.triptracker.net/slide.js（直リンク）

自動スライドショーができるイメージギャラリー。ギャラリーの下に操作ボタンがあり、再生やスライドのコントロールの他に、メール添付や画像表示などのボタンもあります。ただし、JSライブラリを外部JSに絶対URLで直接指定する必要があります。ギャラリーの動作は、いろいろなAPI関数が用意されているので、カスタマイズできるみたいです。

» 設置サンプルを見る

イメージギャラリー

Ultimate Fade-in slideshow (v1.51)
フェードイン切替スライドショー

unknown

Ultimate Fade-in slideshow (v1.51) - Dynamic Drive

Firefox 1+、IE5+、Opera 7+

JavaScriptで、画像にフェード効果を付けてスライドショーする方法が掲載されています。

head要素内に変数、画像配列、関数などの必要なスクリプトを記述します。画像にリンクを設置する場合は、画像配列の2番目の要素にリンク先のURLを指定します。リンクを別窓で開く場合は、画像配列の3番目の要素に「_new」を指定します。

<script type="text/javascript">
・・・
var fadeimages=new Array();
/* 画像配列 */
fadeimages[0]=["http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "", ""] //plain image syntax
fadeimages[1]=["http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://www.flickr.com/photos/22559849@N06/3143248598/", ""] //image with link syntax
fadeimages[2]=["http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://www.flickr.com/photos/22559849@N06/3142386073/", "_new"] //image with link and target syntax
fadeimages[3]=["http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://www.flickr.com/photos/22559849@N06/3142386067/", "_new"] //image with link and target syntax

var fadeimages2=new Array();
/* 画像配列 */
fadeimages2[0]=["http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "", ""] //plain image syntax
fadeimages2[1]=["http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://www.flickr.com/photos/22559849@N06/3143248598/", ""] //image with link syntax
fadeimages2[2]=["http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://www.flickr.com/photos/22559849@N06/3142386073/", "_new"] //image with link and target syntax
fadeimages2[3]=["http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://www.flickr.com/photos/22559849@N06/3142386067/", "_new"] //image with link and target syntax
・・・
</script>

body要素内にスライドショーを表示する部分します。 head要素内の画像配列を変数名が重複しないように増やし、body要素内の関数の呼び出しを追加することで、いくつでも配置することができます。

<script type="text/javascript">
/*
new fadeshow(
    画像配列名,
    スライドショーの幅（＝画像の幅px）,
    スライドショーの高さ（＝画像の高さpx）,
    枠線サイズ,
    フェード速度（3秒なら3000）,
    マウスオーバーで一時停止の有無（一時停止するなら1、しないなら0）,
    ランダム再生（画像配列からランダム再生するなら"R"、しないなら0）
)
*/
new fadeshow(fadeimages, 500, 375, 0, 3000, 1, "R");
new fadeshow(fadeimages2, 500, 375, 0, 3000, 0)
</script>

設置イメージ

Ultimate Fade-in slideshowの設置サンプルサンプルを見る

<!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>Ultimate Fade-in slideshow | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript">
            /* **********************************************
            * Ultimate Fade-In Slideshow (v1.51): &copy; Dynamic Drive (http://www.dynamicdrive.com)
            * This notice MUST stay intact for legal use
            * Visit http://www.dynamicdrive.com/ for this script and 100s more.
            ********************************************** */

            var fadeimages=new Array();
            /* 画像パス設定 */
            fadeimages[0]=["http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "", ""] //plain image syntax
            fadeimages[1]=["http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://www.flickr.com/photos/22559849@N06/3143248598/", ""] //image with link syntax
            fadeimages[2]=["http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://www.flickr.com/photos/22559849@N06/3142386073/", "_new"] //image with link and target syntax
            fadeimages[3]=["http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://www.flickr.com/photos/22559849@N06/3142386067/", "_new"] //image with link and target syntax

            var fadeimages2=new Array();
            /* 画像パス設定 */
            fadeimages2[0]=["http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg", "", ""] //plain image syntax
            fadeimages2[1]=["http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg", "http://www.flickr.com/photos/22559849@N06/3143248598/", ""] //image with link syntax
            fadeimages2[2]=["http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg", "http://www.flickr.com/photos/22559849@N06/3142386073/", "_new"] //image with link and target syntax
            fadeimages2[3]=["http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg", "http://www.flickr.com/photos/22559849@N06/3142386067/", "_new"] //image with link and target syntax

            var fadebgcolor="red"

            /* NO need to edit beyond here///////////// */

            var fadearray=new Array(); /* array to cache fadeshow instances */
            var fadeclear=new Array(); /* array to cache corresponding clearinterval pointers */

            var dom=(document.getElementById) //modern dom browsers
            var iebrowser=document.all

            function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
            this.pausecheck=pause
            this.mouseovercheck=0
            this.delay=delay
            this.degree=10 /* initial opacity degree (10%) */
            this.curimageindex=0
            this.nextimageindex=1
            fadearray[fadearray.length]=this
            this.slideshowid=fadearray.length-1
            this.canvasbase="canvas"+this.slideshowid
            this.curcanvas=this.canvasbase+"_0"
            if (typeof displayorder!="undefined")
            theimages.sort(function() {return 0.5 - Math.random();})
            this.theimages=theimages
            this.imageborder=parseInt(borderwidth)
            this.postimages=new Array() /* preload images */
            for (p=0;p<theimages.length;p++){
            this.postimages[p]=new Image()
            this.postimages[p].src=theimages[p][0]
            }

            var fadewidth=fadewidth+this.imageborder*2
            var fadeheight=fadeheight+this.imageborder*2

            if (iebrowser&&dom||dom) /* if IE5+ or modern browsers (ie: Firefox) */
            document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
            else
            document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

            if (iebrowser&&dom||dom) /* if IE5+ or modern browsers such as Firefox */
            this.startit()
            else{
            this.curimageindex++
            setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
            }
            }

            function fadepic(obj){
            if (obj.degree<100){
            obj.degree+=10
            if (obj.tempobj.filters&&obj.tempobj.filters[0]){
            if (typeof obj.tempobj.filters[0].opacity=="number") /* if IE6+ */
            obj.tempobj.filters[0].opacity=obj.degree
            else /* else if IE5.5- */
            obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
            }
            else if (obj.tempobj.style.MozOpacity)
            obj.tempobj.style.MozOpacity=obj.degree/101
            else if (obj.tempobj.style.KhtmlOpacity)
            obj.tempobj.style.KhtmlOpacity=obj.degree/100
            else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
            obj.tempobj.style.opacity=obj.degree/101
            }
            else{
            clearInterval(fadeclear[obj.slideshowid])
            obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
            obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
            obj.populateslide(obj.tempobj, obj.nextimageindex)
            obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
            setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
            }
            }

            fadeshow.prototype.populateslide=function(picobj, picindex){
            var slideHTML=""
            if (this.theimages[picindex][1]!="") /* if associated link exists for image */
            slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
            slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
            if (this.theimages[picindex][1]!="") /* if associated link exists for image */
            slideHTML+='</a>'
            picobj.innerHTML=slideHTML
            }

            fadeshow.prototype.rotateimage=function(){
            if (this.pausecheck==1) /* if pause onMouseover enabled, cache object */
            var cacheobj=this
            if (this.mouseovercheck==1)
            setTimeout(function(){cacheobj.rotateimage()}, 100)
            else if (iebrowser&&dom||dom){
            this.resetit()
            var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
            crossobj.style.zIndex++
            fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
            this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
            }
            else{
            var ns4imgobj=document.images['defaultslide'+this.slideshowid]
            ns4imgobj.src=this.postimages[this.curimageindex].src
            }
            this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
            }

            fadeshow.prototype.resetit=function(){
            this.degree=10
            var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
            if (crossobj.filters&&crossobj.filters[0]){
            if (typeof crossobj.filters[0].opacity=="number") /* if IE6+ */
            crossobj.filters(0).opacity=this.degree
            else /* else if IE5.5- */
            crossobj.style.filter="alpha(opacity="+this.degree+")"
            }
            else if (crossobj.style.MozOpacity)
            crossobj.style.MozOpacity=this.degree/101
            else if (crossobj.style.KhtmlOpacity)
            crossobj.style.KhtmlOpacity=this.degree/100
            else if (crossobj.style.opacity&&!crossobj.filters)
            crossobj.style.opacity=this.degree/101
            }

            fadeshow.prototype.startit=function(){
            var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
            this.populateslide(crossobj, this.curimageindex)
            if (this.pausecheck==1){ /* IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER */
            var cacheobj=this
            var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
            crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
            crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
            }
            this.rotateimage()
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm'>Ultimate Fade-in slideshow (v1.51)</a> | 設置サンプル</h1>
<!-- CODE -->
            <p>▼自動再生＋ランダム再生（マウスオーバーするとスライドショーが一時停止します）</p>
            <script type="text/javascript">
                //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, optionalRandomOrder)
                new fadeshow(fadeimages, 500, 375, 0, 3000, 1, "R")
            </script>
            <br>
            <p>▼自動再生</p>
            <script type="text/javascript">
                new fadeshow(fadeimages2, 500, 375, 0, 3000, 0)
            </script>
<!-- / CODE -->
        </div>
    </body>
</html>

その他

unknown

Download (E)² Photo Gallery Beta V0.9 （PHP＋mootools.js使用）[デモ]

その他のJSライブラリ フェード

その他のJSライブラリ 透過PNGをIE6に対応させる方法いろいろ

PHP & JavaScript Room

その他のJSライブラリ画像ポップアウト・イメージギャラリー・スライドショー

Animated JavaScript Slideshow
アニメーションする本格的なスライドショー

Animated JavaScript Slideshow

Carousel Slideshow
六角形の箱が回転しているような画像ギャラリー

Carousel Slideshow

FancyZoom 1.1
画像クリックでギャラリー中央に元画像をズームアップ表示

FancyZoom 1.1

GreyBox

GreyBox v5.53

Highslide JS

Highslide JS

Image Cross Fader
クロスフェード切替する画像スライドショー（再生・停止ボタン付き）

Image Cross Fader v1.0.1

Lightbox JS
現在のページに画像をオーバーレイ表示

Lightbox JS

Lightweight Image Gallery with Thumbnails
サムネイル付きの画像ギャラリー

Lightweight Image Gallery with Thumbnails

Lytebox
Lightboxベース

Lytebox v3.22

phatfusion: slideshow
サムネイル付きの画像ギャラリー

phatfusion: slideshow

Slideshow Alternative
スライドショー（フェード切替）

Slideshow Alternative

Suckerfish HoverLightbox
Lightbox Js使用の水平・垂直型ナビゲーションギャラリー

Horizontal Suckerfish HoverLightbox

TripTracker

TripTracker

Ultimate Fade-in slideshow (v1.51)
フェードイン切替スライドショー

Ultimate Fade-in slideshow (v1.51) - Dynamic Drive

その他

関連コンテンツ

その他のJSライブラリ画像ポップアウト・イメージギャラリー・スライドショー

Animated JavaScript Slideshowアニメーションする本格的なスライドショー

Carousel Slideshow六角形の箱が回転しているような画像ギャラリー

FancyZoom 1.1画像クリックでギャラリー中央に元画像をズームアップ表示

GreyBox

Highslide JS

Image Cross Faderクロスフェード切替する画像スライドショー（再生・停止ボタン付き）

Lightbox JS現在のページに画像をオーバーレイ表示

Lightweight Image Gallery with Thumbnailsサムネイル付きの画像ギャラリー

LyteboxLightboxベース

phatfusion: slideshowサムネイル付きの画像ギャラリー

Slideshow Alternativeスライドショー（フェード切替）

Suckerfish HoverLightboxLightbox Js使用の水平・垂直型ナビゲーションギャラリー

TripTracker

Ultimate Fade-in slideshow (v1.51)フェードイン切替スライドショー

その他

関連コンテンツ

Animated JavaScript Slideshow
アニメーションする本格的なスライドショー

Carousel Slideshow
六角形の箱が回転しているような画像ギャラリー

FancyZoom 1.1
画像クリックでギャラリー中央に元画像をズームアップ表示

Image Cross Fader
クロスフェード切替する画像スライドショー（再生・停止ボタン付き）

Lightbox JS
現在のページに画像をオーバーレイ表示

Lightweight Image Gallery with Thumbnails
サムネイル付きの画像ギャラリー

Lytebox
Lightboxベース

phatfusion: slideshow
サムネイル付きの画像ギャラリー

Slideshow Alternative
スライドショー（フェード切替）

Suckerfish HoverLightbox
Lightbox Js使用の水平・垂直型ナビゲーションギャラリー

Ultimate Fade-in slideshow (v1.51)
フェードイン切替スライドショー