Search

prototype.jsベース画像ポップアウト・イメージギャラリー・スライドショー

  1. Carousel〔ブロック要素をスクロールさせてスライド表示〕
  2. Couloir〔Flashを使用したサウンド効果のある画像ギャラリー〕
  3. FrogJS〔原寸大の画像がもわもわと中央に表示される回転式画像ギャラリー〕
  4. Lightbox〔画像ポップアップやホバーウィンドウ内でグループ化した画像をスライドショー〕
  5. Lightview〔画像スライドショー、角丸枠のLightbox系ライブラリ〕
  6. LightWindow〔様々なメディアを埋め込み可能なスライドショー、Ligitboxベース〕
  7. ProtoFlow〔iTuneのカバーフロー〕
  8. Prototype extension: Showcase〔画像ギャラリーを水平・垂直・斜め方向に回転表示〕

2008/11/18

Prototype plugin: Carousel

［CSS］carousel.css
［JS］prototype.js v1.6、scriptaculous.js v1.8（effects.js）、carousel.js、swfobject.js（Flash埋込用）

ブロック要素をスクロールさせてスライド表示するライブラリ。 水平方向にも垂直方向にも対応しています。タブでも切替可能ですし、先頭へ、前へ、次へ、末尾へといった位置コントロールもできます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects" charset="utf-8"></script>
<script type="text/javascript" src="carousel.js" charset="utf-8"></script>
<script type="text/javascript" src="swfobject.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="carousel.css" charset="utf-8" />
HTML 
<div class="main" id="main-2">
  <div class="menu">
    <a href="#" rel="toggle" class="carousel-control right ico ico-toggle"> </a>
    <a href="#" rel="slide-2-1" class="tab carousel-jumper selected">タイトル1</a>
    <a href="#" rel="slide-2-2" class="tab carousel-jumper">タイトル2</a>
    <a href="#" rel="slide-2-3" class="tab carousel-jumper">タイトル3</a>
    ・・・
  </div>
  <div class="scroller" id="scroller-2">
    <div class="content" id="content-2">
      <div class="slide" id="slide-2-1"><a href="リンク先URL" title=""><img src="画像URL" width="500" height="375" alt="" /></a></div>
      <div class="slide" id="slide-2-2"><a href="リンク先URL" title=""><img src="画像URL" width="500" height="375" alt="" /></a></div>
      <div class="slide" id="slide-2-3"><a href="リンク先URL" title=""><img src="画像URL" width="500" height="375" alt="" /></a></div>
      ・・・
    </div>
  </div>
  <a href="#" rel="last" class="carousel-control right ico ico-last"> </a>
  <a href="#" rel="next" class="carousel-control right ico ico-next"> </a>
  <a href="#" rel="first" class="carousel-control left ico ico-first"> </a>
  <a href="#" rel="prev" class="carousel-control left ico ico-prev"> </a>
</div>
<div class="clear"> </div>
<script type="text/javascript">
  Demo_2 = new Carousel(
    $('scroller-2'),
    $$('#scroller-2 .slide'),
    $$('#main-2 a.carousel-jumper', '#main-2 a.carousel-control'),
    {duration: 0.5, selectedClassName: 'selected'}
  );
</script>
Prototype plugin: Carouselの設置サンプルサンプルを見る
<!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>Prototype plugin: carousel | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/prototype/carousel.css" />
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
        <script type="text/javascript" src="/content/lib/prototype/carousel.js"></script>
        <script type="text/javascript" src="/content/js/swfobject.js"></script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.victorstanciu.ro/prototype-plugin-carousel/'>Prototype plugin: Carousel</a> | 設置サンプル</h1>
            <div class="main" id="main-1">
                <h2>水平方向にスライド</h2>
                <div class="menu">
                    <a href="#" rel="toggle" class="carousel-control right ico ico-toggle">&nbsp;</a>
                    <a href="#" rel="slide-1-1" class="tab carousel-jumper selected">HTML</a>
                    <a href="#" rel="slide-1-2" class="tab carousel-jumper">画像</a>
                    <a href="#" rel="slide-1-3" class="tab carousel-jumper">Flash</a>
                </div>
                <div class="scroller" id="scroller-1">
                    <div class="content" id="content-1">
                        <div class="slide" id="slide-1-1">
                            <h3>レ・クリスタリーヌ@南青山</h3>
                            <div class="cf">
                                <div style="width:180px; margin-right:10px; float:left">
                                    <a href="http://www.flickr.com/photos/22559849@N06/3022564628/" title="レ・クリスタリーヌ@南青山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3032/3022564628_7b0a5a6236_m.jpg" width="180" height="240" alt="レ・クリスタリーヌ@南青山" /></a>
                                </div>
                                <p>ポルトガル大使館の近くにある一軒やのフレンチレストラン。表参道のB1出口を出てマックスマーラーの角を曲がって、2分くらいのところなんだけど、場所はかなりわかりづらい。まさに隠れ家ｗ</p>
                                <p>ライトアップされた幻想的なアーチを抜けると、一軒家のフレンチレストランがお目見え。誰かのお屋敷に遊びに行ったような感じでくつろぎながらディナーを楽しめるすごく素敵なお店。</p>
                                <p>夜は入り口のアーチがライトアップ荒れていてとってもきれい。冬でなければ、お昼はテラスランチもいいかも！</p>
                            </div>
                        </div>
                        <div class="slide" id="slide-1-2">
                            <a href="http://www.flickr.com/photos/22559849@N06/3022564482/" title="レ・クリスタリーヌ@南青山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3149/3022564482_07be72bac7.jpg" width="500" height="375" alt="レ・クリスタリーヌ@南青山" /></a>
                        </div>
                        <div class="slide" id="slide-1-3"></div>
                        <script type="text/javascript">
                            var so = new SWFObject("/content/media/flash/va002a.swf", "va002a", "500", "375", "5", "#336699");
                            so.addParam("wmode", "transparent");
                            so.write("slide-1-3");
                        </script>
                    </div>
                </div>
                <a href="#" rel="last" class="carousel-control right ico ico-last">&nbsp;</a>
                <a href="#" rel="next" class="carousel-control right ico ico-next">&nbsp;</a>
                <a href="#" rel="first" class="carousel-control left ico ico-first">&nbsp;</a>
                <a href="#" rel="prev" class="carousel-control left ico ico-prev">&nbsp;</a>
            </div>
<!-- demo1 //-->
            <div class="clear">&nbsp;</div>
<!-- demo2 -->
            <div class="main" id="main-2">
                <h2>垂直方向にスライド</h2>
                <div class="menu">
                    <a href="#" rel="toggle" class="carousel-control right ico ico-toggle">&nbsp;</a>
                    <a href="#" rel="slide-2-1" class="tab carousel-jumper selected">モツ鍋</a>
                    <a href="#" rel="slide-2-2" class="tab carousel-jumper">赤から鍋20辛</a>
                    <a href="#" rel="slide-2-3" class="tab carousel-jumper">特選牛の内臓地獄鍋</a>
                    <a href="#" rel="slide-2-4" class="tab carousel-jumper">トマト入り塩モツ鍋</a>
                </div>
                <div class="scroller" id="scroller-2">
                    <div class="content" id="content-2">
                        <div class="slide" id="slide-2-1">
                            <a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" width="500" height="375" alt="モツ鍋@鳥小屋" /></a>
                        </div>
                        <div class="slide" id="slide-2-2">
                            <a href="http://www.flickr.com/photos/22559849@N06/2335201198/" title="赤から鍋20辛＠赤から by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf.jpg" width="500" height="375" alt="赤から鍋20辛＠赤から" /></a>
                        </div>
                        <div class="slide" id="slide-2-3">
                            <a href="http://www.flickr.com/photos/22559849@N06/3053111822/" title="特選牛の内臓地獄鍋＠雑草家 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66.jpg" width="500" height="375" alt="雑草家@特選牛の内臓地獄鍋" /></a>
                        </div>
                        <div class="slide" id="slide-2-4">
                            <a href="http://www.flickr.com/photos/22559849@N06/3025639598/" title="トマト入り塩モツ鍋@汁べえ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97.jpg" width="500" height="375" alt="トマト入り塩モツ鍋@汁べえ" /></a>
                        </div>
                    </div>
                </div>
                <a href="#" rel="last" class="carousel-control right ico ico-last">&nbsp;</a>
                <a href="#" rel="next" class="carousel-control right ico ico-next">&nbsp;</a>
                <a href="#" rel="first" class="carousel-control left ico ico-first">&nbsp;</a>
                <a href="#" rel="prev" class="carousel-control left ico ico-prev">&nbsp;</a>
            </div>
<!-- demo2 //-->
            <div class="clear">&nbsp;</div>
            <script type="text/javascript">
                Demo_1 = new Carousel($('scroller-1'), $$('#scroller-1 .slide'), $$('#main-1 a.carousel-jumper', '#main-1 a.carousel-control'), {duration: 0.5, selectedClassName: 'selected'});
                Demo_2 = new Carousel($('scroller-2'), $$('#scroller-2 .slide'), $$('#main-2 a.carousel-jumper', '#main-2 a.carousel-control'), {duration: 0.5, selectedClassName: 'selected'});
            </script>
        </div>
    </body>
</html>

Couloir
Flashを使用したサウンド効果のある画像ギャラリー

unknown

Couloir

Creative Commons 'Attribution-ShareAlike 2.0' License（表示-継承）
［CSS］master.css
［JS］prototype.js v1.6.0.3、scriptaculous.js v1.8（builder.js、effects.js）、behaviour.js（BSD）、soudemanager.js、slideshow.js

Flashを使用したサウンド効果のあるイメージギャラリー。 イメージサイズに合わせて自動的に表示領域がリサイズされます。 また、スライド時にピッピッとサウンドが鳴り、フェーディングしながら次のイメージに切り替わります。

ギャラリーに表示する画像のあるディレクトリと各画像名などの定義は、slideshow.js内に記述します。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=builder,effects" charset="utf-8"></script>
<script type="text/javascript" src="couloir/js/behaviour.js" charset="utf-8"></script>
<script type="text/javascript" src="couloir/js/soundmanager.js" charset="utf-8"></script>
<script type="text/javascript" src="couloir/js/slideshow.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" href="couloir/css/master.css" type="text/css" media="screen" charset="utf-8" />
HTML 
<div id="OuterContainer">
  <div id="Container">
    <img id="Photo" src="スペーサー画像URL" alt="" />
    <div id="LinkContainer">
        <a href="#" id="PrevLink" title="前の写真へ"><span>前へ</span></a>
        <a href="#" id="NextLink" title="次の写真へ"><span>次へ</span></a>
      </div>
      <div id="Loading"><img src="ローディング画像URL" width="48" height="47" alt="ローディング中..." /></div>
  </div>
</div>
<div id="CaptionContainer">
    <p><span id="Counter"> </span> <span id="Caption"> </span></p>
</div>
<script type="text/javascript">
  Behaviour.register(myrules);
</script>
slideshow.js 
// ギャラリーに表示する画像のあるディレクトリ
var photoDir = "lib/galleryimages/";

// 各写真の定義（名前・高さ・幅・タイトル）
var photoArray = new Array(
	new Array("christmas-party-1.jpg", "450", "300", "Christmas Party #1"),
	new Array("christmas-party-2.jpg", "450", "300", "Christmas Party #2"),
	new Array("christmas-party-3.jpg", "199", "300", "Christmas Party #3"),
	・・・
);
Couloirの設置サンプルサンプルを見る
<!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>Couloir | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <link rel="stylesheet" href="/content/lib/couloir/css/master.css" type="text/css" media="screen" />
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=builder,effects"></script>
        <script type="text/javascript" src="/content/lib/couloir/js/behaviour.js"></script>
        <script type="text/javascript" src="/content/lib/couloir/js/soundmanager.js"></script>
        <script type="text/javascript" src="/content/lib/couloir/js/slideshow.js"></script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.couloir.org/js_slideshow/'>Couloir</a> | 設置サンプル</h1>
            <div id="OuterContainer">
                <div id="Container">
                    <img id="Photo" src="/content/lib/couloir/img/c.gif" alt="" />
                    <div id="LinkContainer">
                        <a href="#" id="PrevLink" title="前の写真へ"><span>前へ</span></a>
                        <a href="#" id="NextLink" title="次の写真へ"><span>次へ</span></a>
                    </div>
                    <div id="Loading"><img src="/content/lib/couloir/img/loading_animated2.gif" width="48" height="47" alt="ローディング中..." /></div>
                </div>
            </div>
            <div id="CaptionContainer">
                <p><span id="Counter">&nbsp;</span> <span id="Caption">&nbsp;</span></p>
            </div>
            <script type="text/javascript">
                Behaviour.register(myrules);
            </script>
        </div>
    </body>
</html>

FrogJS
原寸大の画像がもわもわと中央に表示される回転式画像ギャラリー

2008/11/15

FrogJS Javascript Gallery

Creative Commons Attribution 2.5
prototype.js v1.6.0.3、scriptaculous.js v1.8（effects.js）、frog.js v1.1

サムネイル画像クリックで、原寸大の画像がもわもわと中央に表示されていく回転式の画像ギャラリー。 現在表示している原寸大画像の前後の画像のサムネイル画像が両端に表示されます。 サムネイル画像と原寸大の画像をそれぞれ用意する必要があります。

head要素内で必要なライブラリを読み込み、ギャラリー部分はHTMLで指定できるので、ソースをごちゃごちゃ書かずに実装できます。 画像のタイトル（a要素のtitle属性）、画像のリンク先（a要素のrel属性）、元画像（a要素のhref属性）、サムネイル画像（img要素のsrc属性）、説明文（img要素のalt属性）を指定します。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects" charset="utf-8"></script>
<script type="text/javascript" src="frog.js" charset="utf-8"></script>
r<!-- CSS ->
<style type="text/css">
  #FrogJS { width:760px; height:600px; margin:0 auto; }
  #FrogJSCredit { text-align:right; font-size:90%; color:#999; padding:1px; }
  #FrogJSCaption { text-align:left; line-height:140%; }
</style>
HTML 
<div id="FrogJS">
  <a href="元画像URL" title="タイトル" rel="リンク先">
     <img src="サムネイル画像URL" alt="説明文" />
  </a>
  ・・・
</div>
FrogJS Javascript Galleryの設置サンプルサンプルを見る
<!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>FrogJS Javascript Gallery | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
        <script type="text/javascript" src="/content/lib/frogjs/frog.js"></script>
        <style type="text/css">
            #FrogJS { width:760px; height:600px; margin:0 auto; }
            #FrogJSCredit { text-align:right; font-size:90%; color:#999; padding:1px; }
            #FrogJSCaption { text-align:left; line-height:140%; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.puidokas.com/portfolio/frogjs/'>FrogJS Javascript Gallery</a></h1>
            <div id="FrogJS">
                <a href="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66.jpg" title="雑草家@特選牛の内臓地獄鍋4 by php_javascript_room, on Flickr" rel="http://www.flickr.com/photos/22559849@N06/2972504611/">
                    <img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_s.jpg" width="75" height="75" alt="外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるｗハツとかいろんな種類のホルモンが楽しめます♪" />
                </a>
                <a href="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr" rel="http://www.flickr.com/photos/22559849@N06/2972504611/">
                    <img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" width="75" height="75" alt="中目黒にある「鳥小屋」のモツ鍋。キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ" />
                </a>
                <a href="http://farm3.static.flickr.com/2149/2233006792_515e55a9c5_o.jpg" title="火鍋 by php_javascript_room, on Flickr" rel="http://www.flickr.com/photos/22559849@N06/2233006792/">
                    <img src="http://farm3.static.flickr.com/2149/2233006792_5a1342be35_s.jpg" width="75" height="75" alt="コラ～ゲンたぷ～りな白いスープと、激辛四川風の赤いスープ。シメにラーメン入れたら、マジウマス★" />
                </a>
                <a href="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf.jpg" title="赤から亭@赤から鍋20辛 by php_javascript_room, on Flickr" rel="http://www.flickr.com/photos/22559849@N06/2335201198/">
                    <img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_s.jpg" width="75" height="75" alt="渋谷の赤から亭で「20辛」に友達とふたりで挑戦！どろっどろしてて、辛かった（；　；）でもおいしかった（*・ω・*）v　完食アドバイス！まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ" />
                </a>
                <a href="http://farm4.static.flickr.com/3185/3025639598_b11345ee97.jpg" title="塩モツ鍋@汁べえ  by php_javascript_room, on Flickr" rel="http://www.flickr.com/photos/22559849@N06/3025639598/">
                    <img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_s.jpg" width="75" height="75" alt="下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！モツ鍋にトマト!?ってはじめは思ったけど、すごいトマトがいい味出してるんです！！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品♪" />
                </a>
            </div>
        </div>
    </body>
</html>

Lightbox
画像ポップアップやホバーウィンドウ内でグループ化した画像をスライドショー

unknown

Lightbox v2.03.3

すべてのモダンブラウザ
Creative Commons 2.5（表示 2.5 一般）
［CSS］lightbox.css
［JS］prototype.js v1.6.0.3、scriptaculous.js v1.8（effects.js）、lightbox.js

リンク（テキストまたはサムネイル画像）をクリックすると、現在のページ上に原寸大画像をスタイルシートでレイヤー表示するJSライブラリです。 大きな画像など、画像の読み込みに時間がかかる場合は、読み込まれるまでローディングイメージが表示されます。

1枚の画像のみの個別表示、複数画像をグループ化するギャラリー表示の2タイプがあります。 いずれの表示方法もHTMLタグをルールに基づいて記述するだけで、簡単に実装できます。

サムネイル画像のサイズはそろえた方がキレイですが、原寸大画像のサイズは自動的に取得されるのでそろえる必要はありません。 prototype.jsとscriptaculous.jsのエフェクトライブラリを併用しているため、レイヤー表示時に、原寸大画像サイズに合わせてスルスルと表示領域がリサイズされます。

A要素のTITLE属性に指定した文字列が、原寸大表示時に画像の下に表示されます。 文字数制限はないので説明文をつけてもいいですね。

スタイルシートでフォントサイズを%指定すると表示が崩れるので、フォントサイズをピクセル指定するか、「ightbox.css」の指定をオーバーライドする必要があります。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="prototype-1.6.0.3.js" type="text/javascript" charset="utf-8"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript" charset="utf-8"></script>
<script src="lightbox.js" type="text/javascript" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" href="lightbox.css" type="text/css" charset="utf-8" />
<style type="text/css">
  .hide { display:none; }
</style>
HTML 
<!-- シングル -->
<a href="元画像URL" rel="lightbox" title="タイトル">
  <img src="サムネイル画像URL" alt="" />
</a>

<!-- イメージセット -->
<a href="元画像URL" rel="lightbox[ギャラリー名]" title="タイトル">
  <img src="サムネイル画像URL" alt="" />
</a>
<a href="元画像URL" rel="lightbox[ギャラリー名]" title="タイトル" class="hide"></a>
<a href="元画像URL" rel="lightbox[ギャラリー名]" title="タイトル" class="hide"></a>
・・・
Lightbox v2.03.3の設置サンプルサンプルを見る
<!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>Lightbox JS v2.03.3 | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <link rel="stylesheet" href="/content/lib/lightbox2/lightbox.css" type="text/css" />
        <script src="/content/lib/prototype/prototype-1.6.0.3.js" type="text/javascript"></script>
        <script src="/content/lib/scriptaculous/scriptaculous.js?load=effects" type="text/javascript"></script>
        <script src="/content/lib/lightbox2/lightbox.js" type="text/javascript"></script>
        <style type="text/css">
        div.gallery { margin:1em 0; padding:0; }
        div.gallery ul { margin:0; padding:0; list-style:none; overflow:hidden; }
        div.gallery li { margin:0 0 1em 10px; padding:0; display:block; float:left; width:160px; text-align:center; background-color:#eee; border:1px solid #ccc; list-style:none; }
        div.gallery p { margin:0 0 5px 0; padding:0; }
        div.gallery div.title { margin:0 0 10px 0; padding:2px 5px; background-color:#ccc; color:#fff; font-weight:bold; }
        div.gallery div.image { margin:10px auto; padding:0; width:140px; height:120px; overflow:hidden; }
        .hide { display:none; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox JS v2.03.3</a> | 設置サンプル</h1>
            <div id="content">
                <h2>シングルイメージ</h2>
                <p>
                    <a href="/content/lib/galleryimages/image.jpg" rel="lightbox" title="クリスマス・パーティー"><img src="/content/lib/galleryimages/thumb/image.jpg" width="140" height="120" alt="Image" /></a>
                </p>
                <h2>イメージセット</h2>
                <div class="gallery">
                    <ul>
                        <!-- Achievement [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Achievement</div>
                                <p>
                                    <a href="/content/lib/galleryimages/achievement-1.jpg" rel="lightbox[achievement]" title="Achievement #1"><img src="/content/lib/galleryimages/thumb/achievement.jpg" width="140" height="120" alt="Achievement" /></a>
                                    <a href="/content/lib/galleryimages/achievement-2.jpg" rel="lightbox[achievement]" title="Achievement #2" class="hide">Achievement #2</a>
                                </p>
                            </div>
                        </li>
                        <!-- Achievement [end] //-->

                        <!-- Imagination [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Imagination</div>
                                <p>
                                    <a href="/content/lib/galleryimages/imagination-1.jpg" rel="lightbox[imagination]" title="Imagination #1"><img src="/content/lib/galleryimages/thumb/imagination.jpg" width="140" height="120" alt="Imagination" /></a>
                                    <a href="/content/lib/galleryimages/imagination-2.jpg" rel="lightbox[imagination]" title="Imagination #2" class="hide">#2</a>
                                    <a href="/content/lib/galleryimages/imagination-3.jpg" rel="lightbox[imagination]" title="Imagination #3" class="hide">#3</a>
                                    <a href="/content/lib/galleryimages/imagination-4.jpg" rel="lightbox[imagination]" title="Imagination #4" class="hide">#4</a>
                                </p>
                            </div>
                        </li>
                        <!-- Imagination [end] //-->

                        <!-- Christmas Party [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Christmas Party</div>
                                <p>
                                    <a href="/content/lib/galleryimages/christmas-party-1.jpg" rel="lightbox[christmas-party]" title="Christmas Party #1"><img src="/content/lib/galleryimages/thumb/christmas-party.jpg" width="140" height="120" alt="Christmas Party" /></a>
                                    <a href="/content/lib/galleryimages/christmas-party-2.jpg" rel="lightbox[christmas-party]" title="Christmas Party #2" class="hide">#2</a>
                                    <a href="/content/lib/galleryimages/christmas-party-3.jpg" rel="lightbox[christmas-party]" title="Christmas Party #3" class="hide">#3</a>
                                    <a href="/content/lib/galleryimages/christmas-party-4.jpg" rel="lightbox[christmas-party]" title="Christmas Party #4" class="hide">#4</a>
                                    <a href="/content/lib/galleryimages/christmas-party-5.jpg" rel="lightbox[christmas-party]" title="Christmas Party #5" class="hide">#5</a>
                                    <a href="/content/lib/galleryimages/christmas-party-6.jpg" rel="lightbox[christmas-party]" title="Christmas Party #6" class="hide">#6</a>
                                    <a href="/content/lib/galleryimages/christmas-party-7.jpg" rel="lightbox[christmas-party]" title="Christmas Party #7" class="hide">#7</a>
                                    <a href="/content/lib/galleryimages/christmas-party-8.jpg" rel="lightbox[christmas-party]" title="Christmas Party #8" class="hide">#8</a>
                                    <a href="/content/lib/galleryimages/christmas-party-9.jpg" rel="lightbox[christmas-party]" title="Christmas Party #9" class="hide">#9</a>
                                </p>
                            </div>
                        </li>
                        <!-- Christmas Party [end] //-->

                        <!-- Technology [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Technology</div>
                                <p>
                                    <a href="/content/lib/galleryimages/technology-1.jpg" rel="lightbox[technology]" title="Technology #1"><img src="/content/lib/galleryimages/thumb/technology.jpg" width="140" height="120" alt="Technology" /></a>
                                    <a href="/content/lib/galleryimages/technology-2.jpg" rel="lightbox[technology]" title="Technology #2" class="hide">#2</a>
                                    <a href="/content/lib/galleryimages/technology-3.jpg" rel="lightbox[technology]" title="Technology #3" class="hide">#3</a>
                                </p>
                            </div>
                        </li>
                        <!-- Technology [end] //-->
                    </ul>
                </div><!-- div#wrap/div#content/div.gallery -->
                <p>写真素材：<a href="http://www.nwyhstockimages.com/">NWYH Stock Image Library</a></p>
            </div><!-- div#wrap/div#content -->
        </div><!-- div#wrap -->
    </body>
</html>

Lightview
画像スライドショー、角丸枠のLightbox系ライブラリ

unknown

Lightview v1.1.0

すべてのモダンブラウザ
Attribution-No Derivative Works 3.0 Unported（表示-改変禁止）
［CSS］lightview.css
［JS］prototype.js v1.6.2+、scriptaculous.js v1.8.1+（effects.js）、lightview.js

サムネイル画像をクリックすると、表示する画像のサイズに合わせて、枠線がスムーズにリサイズされます。 「prototype.js」は、1.6.0.2以上のバージョンでないと動作しません。 また、枠のデザインを角丸にするなど、CSSで簡単にカスタマイズができます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="/prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects" charset="uft-8"></script>
<script type="text/javascript" src="lightview.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="lightview.css" />
<style type="text/css">
  .hide { display:none; }
</style>
HTML 
<!-- シングルイメージ -->
<a href="元画像URL" class="lightview" title="タイトル">
  <img src="サムネイル画像URL" alt="" />
</a>

<!-- イメージセット -->
<a href="元画像URL" class="lightview" rel="gallery[ギャラリー名]" title="タイトル">
  <img src="サムネイル画像URL" alt="" />
</a>
<a href="元画像URL" class="lightview hide" rel="gallery[ギャラリー名]" title="タイトル"></a>
<a href="元画像URL" class="lightview hide" rel="gallery[ギャラリー名]" title="タイトル"></a>
・・・
Lightview v1.1.0の設置サンプルサンプルを見る
<!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>Lightview v1.1.0 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/lightview/lightview.css" />
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects" charset="uft-8"></script>
        <script type="text/javascript" src="/content/lib/lightview/lightview.js"></script>
        <style type="text/css">
            div.gallery { margin:1em 0; padding:0; }
            div.gallery ul { margin:0; padding:0; list-style:none; overflow:hidden; }
            div.gallery li { margin:0 0 1em 10px; padding:0; display:block; float:left; width:160px; text-align:center; background-color:#eee; border:1px solid #ccc; }
            div.gallery p { margin:0 0 5px 0; padding:0; }
            div.gallery div.title { margin:0 0 10px 0; padding:2px 5px; background-color:#ccc; color:#fff; font-weight:bold; }
            div.gallery div.image { margin:10px auto; padding:0; width:140px; height:120px; overflow:hidden; }
            .hide { display:none; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル：<a href="http://www.nickstakenburg.com/projects/lightview/">Lightview v1.1.0</a></h1>
            <div id="content">
                <h2>シングルイメージ</h2>
                <p><a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightview" title="クリスマスパーティー"><img src="/content/lib/galleryimages/thumbnail/christmas-party-9.jpg" width="140" height="120" alt="Image" /></a></p>
                <h2>イメージセット</h2>
                <div class="gallery">
                    <ul>
                        <!-- Achievement [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Achievement</div>
                                <p>
                                    <a href="/content/lib/galleryimages/achievement-1.jpg" class="lightview" rel="gallery[achievement]" title="Achievement #1"><img src="/content/lib/galleryimages/thumb/achievement.jpg" width="140" height="120" alt="Achievement" /></a>
                                    <a href="/content/lib/galleryimages/achievement-2.jpg" class="lightview hide" rel="gallery[achievement]" title="Achievement #2">#2</a>
                                </p>
                            </div>
                        </li>
                        <!-- Achievement [end] //-->

                        <!-- Imagination [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Imagination</div>
                                <p>
                                    <a href="/content/lib/galleryimages/imagination-1.jpg" class="lightview" rel="gallery[imagination]" title="Imagination #1"><img src="/content/lib/galleryimages/thumb/imagination.jpg" width="140" height="120" alt="Imagination" /></a>
                                    <a href="/content/lib/galleryimages/imagination-2.jpg" class="lightview hide" rel="gallery[imagination]" title="Imagination #2">#2</a>
                                    <a href="/content/lib/galleryimages/imagination-3.jpg" class="lightview hide" rel="gallery[imagination]" title="Imagination #3">#3</a>
                                    <a href="/content/lib/galleryimages/imagination-4.jpg" class="lightview hide" rel="gallery[imagination]" title="Imagination #4">#4</a>
                                </p>
                            </div>
                        </li>
                        <!-- Imagination [end] //-->

                        <!-- Christmas Party [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Christmas Party</div>
                                <p>
                                    <a href="/content/lib/galleryimages/christmas-party-1.jpg" class="lightview" rel="gallery[christmas-party]" title="Christmas Party #1"><img src="/content/lib/galleryimages/thumb/christmas-party.jpg" width="140" height="120" alt="Christmas Party" /></a>
                                    <a href="/content/lib/galleryimages/christmas-party-2.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #2">#2</a>
                                    <a href="/content/lib/galleryimages/christmas-party-3.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #3">#3</a>
                                    <a href="/content/lib/galleryimages/christmas-party-4.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #4">#4</a>
                                    <a href="/content/lib/galleryimages/christmas-party-5.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #5">#5</a>
                                    <a href="/content/lib/galleryimages/christmas-party-6.jpg" class="lightview hide hideery" rel="gallery[christmas-party]" title="Christmas Party #6">#6</a>
                                    <a href="/content/lib/galleryimages/christmas-party-7.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #7">#7</a>
                                    <a href="/content/lib/galleryimages/christmas-party-8.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #8">#8</a>
                                    <a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightview hide" rel="gallery[christmas-party]" title="Christmas Party #9">#9</a>
                                </p>
                            </div>
                        </li>
                        <!-- Christmas Party [end] //-->

                        <!-- Technology [start] -->
                        <li>
                            <div class="cf">
                                <div class="title">Technology</div>
                                <p>
                                    <a href="/content/lib/galleryimages/technology-1.jpg" class="lightview" rel="lightbox[technology]" title="Technology #1"><img src="/content/lib/galleryimages/thumb/technology.jpg" width="140" height="120" alt="Technology" /></a>
                                    <a href="/content/lib/galleryimages/technology-2.jpg" class="lightview hide" rel="lightbox[technology]" title="Technology #2">#2</a>
                                    <a href="/content/lib/galleryimages/technology-3.jpg" class="lightview hide" rel="lightbox[technology]" title="Technology #3">#3</a>
                                </p>
                            </div>
                        </li>
                        <!-- Technology [end] //-->
                    </ul>
                </div><!-- div#wrap/div#content/div.gallery -->
                <p>写真素材：<a href="http://www.nwyhstockimages.com/">NWYH Stock Image Library</a></p>
            </div><!-- div#wrap/div#content -->
        </div><!-- div#wrap -->
    </body>
</html>

LightWindow
様々なメディアを埋め込み可能なスライドショー、Ligitboxベース

unknown

LightWIndow v2.0

［win］IE 6+、Firefox、Safari 3+、Opera
［mac］Firefox、Safari,Opera、Netscape
MIT
prototype.js v1.6.0.3、effects.js v1.8、lightwindow.js

画像ギャラリーや多様なメディアをLightBox風にポップアップ表示するLightboxベースの多機能なライブラリ。

画像やWebページだけでなく、Flash、Windows Media Playerなどの動画、PDF（swf）もインライン表示できます。 これらを関連付けて、1つの総合ギャラリーとして各ギャラリーごとに選択して表示できることもできるところが特徴です。

PDFをFlash Paper（swf形式）に変換するには、Print2Flash（無料）を使用しました。

HEAD 
<!-- JS -->
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects" charset="utf-8"></script>
<script type="text/javascript" src="/lightwindow.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/lightwindow/lightwindow.css" />
<style type="text/css">
  textarea { width:100%; margin:1em 0; padding:10px; font-size:85%; background-color:#fff; }
  .hidden { display:none; }
</style>
HTML 
<!-- Windows Media Playerをポップアップウィンドウ表示 -->
<a href="動画ファイルURL" 
  class="lightwindow page-options" 
  params="lightwindow_width=320,lightwindow_height=285,lightwindow_loading_animation=false,lightwindow_iframe_embed=true">
テキスト
</a>

<!-- Webページをポップアップウィンドウ表示 -->
<a href="URL" class="lightwindow page-options" title="タイトル" caption="説明文">テキスト</a>

<!-- 画像をポップアップウィンドウ表示 -->
<a href="元画像URL" class="lightwindow page-options" title="タイトル" author="Unknown" caption="説明文">テキスト</a>

<!-- 画像ギャラリーをポップアップウィンドウ表示 -->
<a href="元画像URL" class="lightwindow page-options" rel="Random[ギャラリー名]" title="タイトル" caption="説明文" author="Unknown">テキスト</a>
<a href="元画像URL" class="lightwindow hidden" rel="Random[ギャラリー名]" title="タイトル" caption="説明文" author="Unknown"></a>
<a href="元画像URL" class="lightwindow hidden" rel="Random[ギャラリー名]" title="タイトル" caption="説明文" author="Unknown"></a>
・・・
LightWIndow v2.0の設置サンプルサンプルを見る
<!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>LightWindow v2.0 | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/lightwindow/lightwindow.css" />
        <style type="text/css">
            textarea { width:100%; margin:1em 0; padding:10px; font-size:85%; background-color:#fff; }
            .hidden { display:none; }
        </style>
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
        <script type="text/javascript" src="/content/lib/lightwindow/lightwindow.js"></script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href="http://www.stickmanlabs.com/lightwindow/">LightWindow v2.0</a> | 設置サンプル</h1>
            <h2>Media</h2>
            <h3>Windows Media Player</h3>
            <p><a href="http://phpjavascriptroom.com/content/media/SampleMovie.asf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=285,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" >Windows Media Player埋め込み（asf）</a></p>
            <textarea><a href="http://phpjavascriptroom.com/content/media/SampleMovie.asf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=285,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" >Windows Media Player埋め込み（asf）</a></textarea>
            <p>※asx、wmv形式には対応していない模様。絶対パス（URI）を指定。相対パス不可。</p>
            <p>※なぜかレイヤーを閉じようとすると、ブラウザが強制終了します。</p>

            <h3>Flash（シングル）</h3>
            <p><a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=110" title="クマさんが踊り続けるwelcomeムービー">Flash埋め込み（swf）</a></p>
            <textarea><a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=110" title="クマさんが踊り続けるwelcomeムービー">Flash埋め込み（swf）</a></textarea>
            <p>※Flash素材は、<a href="http://www.f-shower.com/">FLASH SHOWER</a>さんからお借りしました。</p>

            <h3>Flash（ギャラリー）</h3>
            <p>
                <a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=320,lightwindow_height=110" title="Gallery: クマさんが踊り続けるwelcomeムービー" author="FLASH SHOWERさん">SWF Gallery - Header #1</a>
                <a href="/content/media/flash/mv003b.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=500,lightwindow_height=400" title="Gallery: 植物が伸びるwelcomeムービー" author="FLASH SHOWERさん">Header #2</a>
                <a href="/content/media/flash/va002a.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=300,lightwindow_height=250" title="Gallery: バレンタイン用ムービー" author="FLASH SHOWERさん">Header #3</a>
            </p>
            <textarea><a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=320,lightwindow_height=110" title="Gallery: クマさんが踊り続けるwelcomeムービー" author="FLASH SHOWERさん">SWF Gallery - Header #1</a>
<a href="/content/media/flash/mv003b.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=500,lightwindow_height=400" title="Gallery: 植物が伸びるwelcomeムービー" author="FLASH SHOWERさん">Header #2</a>
<a href="/content/media/flash/va002a.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=300,lightwindow_height=250" title="Gallery: バレンタイン用ムービー" author="FLASH SHOWERさん">Header #3</a>                            </textarea>

            <h3>PDF（swf形式）</h3>
            <p><a href="/content/demo/sample.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" >Flash Paper</a></p>
            <textarea><a href="/content/demo/sample.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" >Flash Paper</a></textarea>
            <p>※PDFをFlash Paper（swf形式）に変換するには、<a href='http://www.print2flash.com/'>Print2Flash</a>（無料）を使用しました。</p>

            <h3>YouTube</h3>
            <p><a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 映画「300」トレイラー" >You Tube（映画「300」トレイラー）</a></p>
            <textarea><a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 映画「300」トレイラー" >You Tube（映画「300」トレイラー）</a></textarea>

            <h2>Webサイト</h2>
            <h3>Webページをポップアップウィンドウ表示</h3>
            <p><a href="http://www.yahoo.co.jp/" class="lightwindow page-options" title="Ruby on Rails" caption="Yahoo! JAPAN">Yahoo! JAPAN</a></p>
            <textarea><a href="http://www.yahoo.co.jp/" class="lightwindow page-options" title="Ruby on Rails" caption="Yahoo! JAPAN">Yahoo! JAPAN</a></textarea>

            <h3>インラインフレームからポップアウト表示</h3>
            <p><iframe id="iframe_test" src="/content/lib/lightwindow/iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe></p>
            <textarea><iframe id="iframe_test" src="/content/lib/lightwindow/iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe></textarea>

            <h2>画像</h2>
            <h3>シングル</h3>
            <p><a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow page-options" title="クリスマスパーティー" author="Unknown" caption="仕事してたって、クリスマス気分♪">画像表示</a></p>
            <textarea><a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow page-options" title="クリスマスパーティー" author="Unknown" caption="仕事してたって、クリスマス気分♪">画像表示</a></textarea>
            <p><a href="http://farm3.static.flickr.com/2178/2334373239_4fdfaaa68b_o.jpg" class="lightwindow page-options" title="スタバの抹茶フローズンクリーム" author="Me" caption="まだ寒いのに、フローズン！しかも照らす席（汗；クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。">Flickrの画像を表示</a></p>
            <textarea><a href="http://farm3.static.flickr.com/2178/2334373239_4fdfaaa68b_o.jpg" class="lightwindow page-options" title="スタバの抹茶フローズンクリーム" author="Me" caption="まだ寒いのに、フローズン！しかも照らす席（汗；クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。">Flickrの画像を表示</a></textarea>

            <h3>ギャラリー</h3>
            <p>
                <a href="/content/lib/galleryimages/christmas-party-1.jpg" class="lightwindow page-options" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[1]" caption="なにやらクリスマスパーティーの打ち合わせの模様。" author="Unknown">クリスマスパーティ</a>
                <a href="/content/lib/galleryimages/christmas-party-2.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[2]" caption="おべんとう食べてるｗ" author="Unknown">#2</a>
                <a href="/content/lib/galleryimages/christmas-party-3.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[3]" caption="クリスマスですから、シャンパンだってラッパ飲みしちゃいます！" author="Unknown">#3</a>
                <a href="/content/lib/galleryimages/christmas-party-4.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[4]" caption="千鳥足でも踊れば分かりませんｗ" author="Unknown">#4</a>
                <a href="/content/lib/galleryimages/christmas-party-5.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[5]" caption="どさくさにまぎれてセクハラか！？" author="Unknown">#5</a>
                <a href="/content/lib/galleryimages/christmas-party-6.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[6]" caption="あーぁ。いますねこういうよっぱゲ。。" author="Unknown">#6</a>
                <a href="/content/lib/galleryimages/christmas-party-7.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[7]" caption="マイペースにもほどがあるとは、まさにｗ" author="Unknown">#7</a>
                <a href="/content/lib/galleryimages/christmas-party-8.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[8]" caption="リンボーダンスなんて調子に乗ってやってると怪我するよｗ" author="Unknown">#8</a>
                <a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[9]" caption="忙しくたって、クリスマス気分は味わえます、っていい例。" author="Unknown">#9</a>
            </p>
            <textarea><a href="/content/lib/galleryimages/christmas-party-1.jpg" class="lightwindow page-options" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[1]" caption="なにやらクリスマスパーティーの打ち合わせの模様。" author="Unknown">クリスマスパーティ</a>
<a href="/content/lib/galleryimages/christmas-party-2.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[2]" caption="おべんとう食べてるｗ" author="Unknown">#2</a>
<a href="/content/lib/galleryimages/christmas-party-3.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[3]" caption="クリスマスですから、シャンパンだってラッパ飲みしちゃいます！" author="Unknown">#3</a>
<a href="/content/lib/galleryimages/christmas-party-4.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[4]" caption="千鳥足でも踊れば分かりませんｗ" author="Unknown">#4</a>
<a href="/content/lib/galleryimages/christmas-party-5.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[5]" caption="どさくさにまぎれてセクハラか！？" author="Unknown">#5</a>
<a href="/content/lib/galleryimages/christmas-party-6.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[6]" caption="あーぁ。いますねこういうよっぱゲ。。" author="Unknown">#6</a>
<a href="/content/lib/galleryimages/christmas-party-7.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[7]" caption="マイペースにもほどがあるとは、まさにｗ" author="Unknown">#7</a>
<a href="/content/lib/galleryimages/christmas-party-8.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[8]" caption="リンボーダンスなんて調子に乗ってやってると怪我するよｗ" author="Unknown">#8</a>
<a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[9]" caption="忙しくたって、クリスマス気分は味わえます、っていい例。" author="Unknown">#9</a></textarea>
            <p>
                <a href="/content/lib/galleryimages/imagination-1.jpg" class="lightwindow page-options" rel="Evolution?[imagination]" title="経企会議" caption="いい大人が寄ってたかって、社名を考え込んでますｗ">経企会議</a>
                <a href="/content/lib/galleryimages/imagination-2.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="遊んでるのかと思いきや、ロゴの組み合わせをしてるようですｗ]">image #2</a>
                <a href="/content/lib/galleryimages/imagination-3.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="おやｗ何かひらめいたみたいですｗ]">image #3</a>
                <a href="/content/lib/galleryimages/imagination-4.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="どうやら決まったみたいですねーｗ]">image #4</a>
            </p>
            <textarea><a href="/content/lib/galleryimages/imagination-1.jpg" class="lightwindow page-options" rel="Evolution?[imagination]" title="経企会議" caption="いい大人が寄ってたかって、社名を考え込んでますｗ">経企会議</a>
<a href="/content/lib/galleryimages/imagination-2.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="遊んでるのかと思いきや、ロゴの組み合わせをしてるようですｗ]">image #2</a>
<a href="/content/lib/galleryimages/imagination-3.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="おやｗ何かひらめいたみたいですｗ]">image #3</a>
<a href="/content/lib/galleryimages/imagination-4.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="どうやら決まったみたいですねーｗ]">image #4</a></textarea>

            <h3>フォーム</h3>
            <p><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options">送信フォーム</a></p>
            <textarea><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options">送信フォーム</a></textarea>
            <p><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options">送信フォーム（好きな位置に表示）</a></p>
            <textarea><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options">送信フォーム（好きな位置に表示）</a></textarea>
        </div>
    </body>
</html>

ProtoFlow
iTuneのカバーフロー

unknown

Proto Flow

［CSS］prettify.css、protoFlow.css
［JS］prototype.js v1.6.0.3、scriptaculous.js v1.8（slider.js）、reflection.js、protoFlow.js、prettify.js

iTuneのカバーフローをJavaScriptで実装できるライブラリ。 HTML部分の記述がシンプルなのがよいです。 img要素のalt属性に指定した代替テキストが、画像のタイトルとして表示されます。

HEAD 
<!-- JS -->
<script src="prototype-1.6.0.3.js" type="text/javascript" charset="utf-8"></script>
<script src="scriptaculous.js?load=slider" type="text/javascript" charset="utf-8"></script>
<script src="reflection.js" type="text/javascript" charset="utf-8"></script>
<script src="protoFlow.js" type="text/javascript" charset="utf-8"></script>
<script src="prettify.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  Event.observe(window, 'load', function() {
    prettyPrint();
    cf = new ProtoFlow($("protoflow"), {
      captions: true, 
      useReflection: true
    });
  });
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="prettify.css" />
<link rel="stylesheet" type="text/css" href="protoFlow.css" />
<style type="text/css">
  div.captionHolder { font-size:12px; }
</style>
HTML 
<div id="bodyWrap">
   <div id="protoflow">
    <script type="text/javascript">
      var photo={
        "画像URL" : "タイトル",
        "画像URL" : "タイトル",
        "画像URL" : "タイトル",
        ・・・
        "画像URL" : "タイトル"
      }
      for(var url in photo){
        document.write("<img src='"+url+"' alt='"+photo[url]+"' />\n");
      }
    </script>
  </div>
</div>
Proto Flowの設置サンプルサンプルを見る
<!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>Protoflow | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/protoflow/site/prettify.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/protoflow/protoFlow.css" />
        <style type="text/css">
            div.captionHolder { font-size:12px; }
        </style>
        <script src="/content/lib/prototype/prototype-1.6.0.3.js" type="text/javascript"></script>
        <script src="/content/lib/scriptaculous/scriptaculous.js?load=slider" type="text/javascript"></script>
        <script src="/content/lib/reflection/reflection.js" type="text/javascript"></script>
        <script src="/content/lib/protoflow/protoFlow.js" type="text/javascript"></script>
        <script src="/content/lib/protoflow/site/prettify.js" type="text/javascript"></script>
        <script type="text/javascript">
            Event.observe(window, 'load', function() {
                prettyPrint();
                cf = new ProtoFlow($("protoflow"), {
                    captions: true, 
                    useReflection: true
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://blog.deensoft.com/2008/03/10/protoflow-first-preview-release/'>Proto Flow</a> | 設置サンプル</h1>
            <div id="bodyWrap">
                 <div id="protoflow">
                    <script type="text/javascript">
                    /* Flickの写真を読み込み */
                    var photo={
                        "http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" : "サインがいっぱい@鳥小屋",
                        "http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" : "レバ刺@鳥小屋",
                        "http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" : "明太子玉子焼き@鳥小屋",
                        "http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" : "モツ鍋@鳥小屋",
                        "http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" : "モツ鍋@鳥小屋",
                        "http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" : "モツ鍋@鳥小屋",
                        "http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" : "ハツ刺@鳥小屋",
                        "http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" : "ハツ刺@鳥小屋",
                        "http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" : "モツ鍋の〆@鳥小屋",
                        "http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" : "モツ鍋の〆@鳥小屋",
                        "http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" : "ごちそうさま@鳥小屋"
                    }
                    for(var url in photo){
                        document.write("<img src='"+url+"' alt='"+photo[url]+"' />\n");
                    }
                    </script>
                </div>
            </div>
        </div>
    </body>
</html>

Prototype extension: Showcase
画像ギャラリーを水平・垂直・斜め方向に回転表示

2008/11/19

Prototype extension: Showcase

MIT
prototype.js v1.6、scriptaculous.js v1.8（effects.js）、showcase.js

画像ギャラリーを回転表示するライブラリ。 水平・垂直・斜め方向に対応しています。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects" charset="utf-8"></script>
<script type="text/javascript" src="showcase.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/prototype/showcase.css" charset="utf-8" />
HTML 
<div class="showcase" id="horizontal">
  <a href="#previous" class="controls previous" rel="previous">–</a>
  <a href="#next" class="controls next" rel="next">+</a>
  <ul>
    <li><a href="#" title="タイトル"><img src="画像URL" alt="1" /></a></li>
    <li><a href="#" title="タイトル"><img src="画像URL" alt="2" /></a></li>
    <li><a href="#" title="タイトル"><img src="画像URL" alt="3" /></a></li>
    ・・・
  </ul>
</div>
<script type="text/javascript">
  document.observe('dom:loaded', function () {
    new Showcase.Horizontal($$('#horizontal ul li'),$$('#horizontal a.controls'), {duration: 0.3});
  });
</script>
Prototype extension: Showcaseの設置サンプルサンプルを見る
<!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>Prototype extension: Showcase | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/prototype/showcase.css" />
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
        <script type="text/javascript" src="/content/lib/prototype/showcase.js"></script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://dev.victorstanciu.ro/experimente/prototype-showcase/'>Prototype extension: Showcase</a> | 設置サンプル</h1>
            <h2>水平方向に回転表示</h2>
            <div class="showcase" id="horizontal">
                <a href="#previous" class="controls previous" rel="previous">&ndash;</a>
                <a href="#next" class="controls next" rel="next">+</a>
                <ul>
                    <li><a href="#" title="サインがいっぱい@鳥小屋"><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="1" /></a></li>
                    <li><a href="#" title="レバ刺@鳥小屋"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="2" /></a></li>
                    <li><a href="#" title="明太子玉子焼き@鳥小屋"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="3" /></a></li>
                    <li><a href="#" title="モツ鍋@鳥小屋"><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="4" /></a></li>
                    <li><a href="#" title="モツ鍋@鳥小屋"><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="5" /></a></li>
                    <li><a href="#" title="モツ鍋@鳥小屋"><img src="http://farm4.static.flickr.com/3239/3032375082_24f44c06ba_o.jpg" alt="6" /></a></li>
                    <li><a href="#" title="ハツ刺@鳥小屋"><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="7" /></a></li>
                    <li><a href="#" title="ハツ刺@鳥小屋"><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="8" /></a></li>
                    <li><a href="#" title="モツ鍋の〆@鳥小屋"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="9" /></a></li>
                    <li><a href="#" title="モツ鍋の〆@鳥小屋"><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="10" /></a></li>
                    <li><a href="#" title="モツ鍋完食@鳥小屋"><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="11" /></a></li>
                </ul>
            </div>
            <script type="text/javascript">
                document.observe('dom:loaded', function () {
                    new Showcase.Horizontal($$('#horizontal ul li'), $$('#horizontal a.controls'), {duration: 0.3});
                });
            </script>
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women