Search

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

  1. MooTools Auto Captioning Images〔画像のキャプションを自動表示〕
  2. multibox〔mootools.ベースのLightbox〕
  3. noobSlide〔いろいろなタイプの画像ギャラリーや要素のスライドショー〕
  4. Sexy Lightbox 2〔画像とコンテンツをセクシーに表示〕
  5. Slideshow〔ズーム、フェード、ワイプなど様々なエフェクト効果がつけられるスライドショー〕
  6. SmoothGallery〔イメージをグループ化して、固定領域内でスライドショーができる画像ギャラリー〕

MooTools Auto Captioning Images
画像のキャプションを自動表示

2009/3/4

How to Auto Caption Images Using MooTools

GNU一般公的使用許諾
mootools.js v1.2、sr-auto-caption-1.0.js

mootoolsを使用して画像のキャプションを自動表示する方法が掲載されています。 captionedクラスを指定したimg要素のalt属性の内容を取得し、画像の下にキャプション表示します。

設置イメージ設置イメージ
MooTools Auto Captioning Imagesの設置サンプルサンプルを見る
<!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>MooTools Auto Captioning Images | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <!-- JS -->
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-core-yc.js"></script>
        <script type="text/javascript" src="/content/lib/mootools/sr-auto-caption-1.0.js"></script>
        <!-- CSS -->
        <style type="text/css">
            img.captioned { padding:5px 0; }
            div.figure { width:240px; text-align:center; border:5px solid #333; background-color:#333; margin:5px; float:left; }
            p.caption { padding:0; margin:0; color:#fff; font-size:11px; font-weight:bold; }
            div.box { width:510px; background-color:#CBC0AA; margin:10px 5px; padding:10px; }
            div.box div.figure { margin-right:15px; }
            div.box div.author { font-size:.8em; text-align:right; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://sixrevisions.com/tutorials/mootools-tutorials/how-to-auto-caption-images-using-mootools/'>How to Auto Caption Images Using MooTools</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="cf">
    <img class="captioned" src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" title="アボカド シーザーサラダ" width="240" height="180" />
    <img class="captioned" src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" title="アボカド刺" width="240" height="180" />
</div>
<div class="box">
    <img class="captioned" src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_t.jpg" alt="ハニートースト" width="100" height="75" />
    <p><strong>ハニートースト@アボガドダイニング Platinum Lounge</strong></p>
    <p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！</p>
    <div class="author">by <a href="http://www.flickr.com/photos/22559849@N06/3273696493/" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr">php_javascript_room, on Flickr</a></div>
</div>
<!-- / CODE -->
        </div><!-- div#wrap -->
    </body>
</html>

multibox
mootools.ベースのLightbox

2008/11/21

multibox v1.3.1

Firefox 2 (mac / pc)、IE 6、IE 7、Safari (mac)
MIT
mootools.js v1.11、multibox.js、overlay.js（オプション）

mootools.ベースのLightbox。
同一画面上に画像ギャラリー、HTMLページ、指定したURLのページ、動画･音声ファイル、FlashムービーをLightboxのようにページ遷移しながらホバーウィンドウ表示することができます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="mootools.v1.11.js" charset="utf-8"></script>
<script type="text/javascript" src="overlay.js" charset="utf-8"></script>
<script type="text/javascript" src="multibox.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" href="multibox.css" type="text/css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="all" /><![endif]-->
HTML 
<!-- 画像ギャラリー -->
<a href="元画像URL" id="mb1" class="mb" title="タイトル">
  <img src="サムネイル画像URL" alt="" />
</a>
<div class="multiBoxDesc mb1">説明文</div>

<a href="元画像URL" id="mb2" class="mb" title="タイトル">
  <img src="サムネイル画像URL" alt="" />
</a>
<div class="multiBoxDesc mb2">説明文</div>

・・・
multiboxの設置サンプルサンプルを見る
<!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>multibox | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <script type="text/javascript" src="/content/lib/mootools/mootools.v1.11.js"></script>
        <script type="text/javascript" src="/content/lib/utils/overlay.js"></script>
        <script type="text/javascript" src="/content/lib/multibox/multibox.js"></script>
        <link rel="stylesheet" href="/content/lib/multibox/multibox.css" type="text/css" media="all" />
        <!--[if lte IE 6]><link rel="stylesheet" href="/content/lib/multibox/ie6.css" type="text/css" media="all" /><![endif]-->
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.phatfusion.net/multibox/'>multibox v1.3.1</a> | 設置サンプル</h1>

            <h2>画像ギャラリー</h2>
            <a href="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" id="mb1" class="mb" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="" /></a>
            <div class="multiBoxDesc mb1">どこから食べようか考えちゃうよねｗ</div>

            <a href="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" id="mb2" class="mb" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="" /></a>
            <div class="multiBoxDesc mb2">1時間20分並んで買いましたｗ</div>

            <a href="http://farm4.static.flickr.com/3029/2970912983_6a7632aa8a_o.jpg" id="mb3" class="mb" title="CAFE EAT@代官山"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="" /></a>
            <div class="multiBoxDesc mb3">フォカッチャとアメリカンサイズのカフェオレでまったり～♪</div>

            <h2>動画ファイルをウィンドウ表示</h2>

            <a href="media/SampleMovie.mov" rel="width:190,height:258" id="mb5" class="mb" title="Movie">QuickTime（.mov）</a>
            <div class="multiBoxDesc mb5">QuickTime</div><br>

            <a href="media/SampleMovie_low.wmv" rel="width:320,height:285" id="mb6" class="mb" title="Movie">Windows Media Player（.wmv）</a>
            <div class="multiBoxDesc mb6">Windows Media Player</div><br>

            <a href="media/SampleMovie.rm" rel="width:176,height:316" id="mb7" class="mb" title="Movie">RealPlayer（.rm）</a>
            <div class="multiBoxDesc mb7">RealPlayer</div><br>

            <h2>外部ファイルを読み込んで表示</h2>
            <a href="/content/demo/sample.html" rel="width:400,height:300" id="mb9" class="mb" title="HTMLページ（インラインフレーム）">指定したHTMLページをiframe内に読み込んでウィンドウ表示</a>
            <div class="multiBoxDesc mb9">指定したHTMLページをiframe内に読み込んでウィンドウ表示</div><br>

            <a href="#htmlElement" rel="type:element" id="mb11" class="mb" title="HTMLページ">ページ内の指定したID要素の内容をウィンドウ表示</a>
            <div class="multiBoxDesc mb11">ページ内の指定したID要素の内容をウィンドウ表示</div><br>
            <div id="htmlElement" style="padding:0; width:320px;">
                <p style="padding:0; margin:0;">
                    <a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" width="320" height="240" alt="クリスピー・クリーム・ドーナツ" /></a>
                </p>
                <h2>Krispy Kreme Doughnuts</h2>
                <p style="padding:10px;">
                    新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。ドーナツの箱がピザの箱みたいでアメリカン！すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました！
                </p>
            </div>

            <a href="http://www.google.co.jp/" rel="width:600,height:400" id="mb12" class="mb" title="外部サイト（インラインフレーム）">指定したURLのページをiframeに読み込んでウィンドウ表示</a>
            <div class="multiBoxDesc mb12">指定したURLのページをiframeに読み込んでウィンドウ表示</div><br>


            </div>
        <script type="text/javascript">
            var box = {};
            window.addEvent('domready', function(){
                box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
            });
        </script>
    </body>
</html>

noobSlide
いろいろなタイプの画像ギャラリーや要素のスライドショー

2008/12/12

noobSlide

［CSS］style.css
［JS］mootools.js v1.2、_class.noobSlide.js

いろいろなタイプの画像ギャラリーや要素のスライドショーを実装できるmootoolsプラグイン。 開始する画像番号やスライドのスピードを指定したり、頭出し（playback）、前へ、次へなどの送り機能や再生・停止機能、半透明の画像のキャプションを付けたりすることもできます。 画像のスライドショーでは、最後までスライドすると自動的に先頭に戻り、リピート再生されます。 また、画像の枚数が11枚ならitems: [0,1,2,3,4,5,6,7,8,9,10],のように、パラメータで渡す必要があります。

設置イメージ設置イメージ
noobSlideの設置サンプルサンプルを見る
<!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>noobSlide | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <!-- CSS -->
        <link rel="stylesheet" href="/content/lib/mootools/noobslide/style.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-core-yc.js"></script>
        <script type="text/javascript" src="/content/lib/mootools/noobslide/_class.noobSlide.js"></script>
        <script type="text/javascript">
            window.addEvent('domready',function(){
                /* 例1：自動再生、5秒おきにでスライド */
                var nS1 = new noobSlide({
                    box: $('box1'),
                    items: [0,1,2,3,4,5,6,7,8,9,10],
                    autoPlay: true
                });

                /* 例2 (transition: Bounce.easeOut) */
                var nS2 = new noobSlide({
                    box: $('box2'),
                    items: [0,1,2,3,4,5,6,7,8,9,10],
                    interval: 3000,
                    fxOptions: {
                        duration: 1000,
                        transition: Fx.Transitions.Bounce.easeOut,
                        wait: false
                    },
                    addButtons: {
                        previous: $('prev1'),
                        play: $('play1'),
                        stop: $('stop1'),
                        next: $('next1')
                    }
                });

                /* 例3 (play, stop, playback) */
                var nS3 = new noobSlide({
                    box: $('box3'),
                    items: [0,1,2,3,4,5,6,7,8,9,10],
                    interval: 1000,
                    startItem: 4,
                    addButtons: {
                        playback: $('playback3'),
                        stop: $('stop3'),
                        play: $('play3')
                    }
                });

                /* 例4 (walk to item) */
                var nS4 = new noobSlide({
                    box: $('box4'),
                    items: $$('#box4 div'),
                    size: 480,
                    handles: $$('#handles4 span'),
                    onWalk: function(currentItem,currentHandle){
                        $('info4').set('html',currentItem.getFirst().innerHTML);
                        this.handles.removeClass('active');
                        currentHandle.addClass('active');
                    }
                });

                /* 例5 (mode: vertical, using "onWalk" ) */
                var info5 = $('info5').set('opacity',0.5);
                var sampleObjectItems =[
                    {title:'雑草家@特選牛の内臓地獄鍋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3053111822/'},
                    {title:'モツ鍋@鳥小屋', autor:'PJ', date:'6 Dic 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375082/'},
                    {title:'トマト入り塩モツ鍋@汁べえ', autor:'PJ', date:'9 Feb 2007', link:'http://www.flickr.com/photos/22559849@N06/3025639598/'},
                    {title:'赤から鍋20辛＠赤から亭', autor:'PJ', date:'22 Jul 2007', link:'http://www.flickr.com/photos/22559849@N06/2335201198/'}
                ];
                var nS5 = new noobSlide({
                    mode: 'vertical',
                    box: $('box5'),
                    size: 180,
                    items: sampleObjectItems,
                    addButtons: {
                        previous: $('prev5'),
                        play: $('play5'),
                        stop: $('stop5'),
                        next: $('next5')
                    },
                    onWalk: function(currentItem){
                        info5.empty();
                        new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
                        new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info5);
                    }
                });

                /* 例6 (on "mouseenter" walk) */
                var info6 = $('box6').getNext().set('opacity',0.5);
                var sampleObjectItems2 =[
                    {title:'サインがいっぱい@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375214/'},
                    {title:'レバ刺@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3064/3031535599/'},
                    {title:'明太子玉子焼き@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3031535573/'},
                    {title:'モツ鍋@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375140/'},
                    {title:'モツ鍋@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375082/'},
                    {title:'モツ鍋@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375106/'},
                    {title:'ハツ刺@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375032/'},
                    {title:'ハツ刺@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375032/'},
                    {title:'モツ鍋の〆@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032374922/'},
                    {title:'モツ鍋の〆@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032374882/'},
                    {title:'ごちそうさま@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032374798/'}
                ];
                var nS6 = new noobSlide({
                    mode: 'vertical',
                    box: $('box6'),
                    items: sampleObjectItems2,
                    size: 180,
                    handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
                    handle_event: 'mouseenter',
                    addButtons: {
                        previous: $('prev6'),
                        play: $('play6'),
                        stop: $('stop6'),
                        playback: $('playback6'),
                        next: $('next6')
                    },
                    button_event: 'click',
                    fxOptions: {
                        duration: 1000,
                        transition: Fx.Transitions.Back.easeOut,
                        wait: false
                    },
                    onWalk: function(currentItem,currentHandle){
                        info6.empty();
                        new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
                        new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);
                        this.handles.set('opacity',0.3);
                        currentHandle.set('opacity',1);
                    }
                });
                //walk to next item
                nS6.next();
                
                /* 例7 */
                var startItem = 3; //or   0   or any
                var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
                var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
                var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
                var nS7 = new noobSlide({
                    box: $('box7'),
                    items: [0,1,2,3,4,5,6,7,8,9],
                    handles: $$('#thumbs_handles7 span'),
                    fxOptions: fxOptions7,
                    onWalk: function(currentItem){
                        thumbsFx.start(currentItem*60-568);
                    },
                    startItem: startItem
                });
                //walk to first with fx
                nS7.walk(0);

                //SAMPLE 8
                var handles8_more = $$('#handles8_more span');
                var nS8 = new noobSlide({
                    box: $('box8'),
                    items: $$('#box8 h3'),
                    size: 480,
                    handles: $$('#handles8 span'),
                    addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
                    onWalk: function(currentItem,currentHandle){
                        //style for handles
                        $$(this.handles,handles8_more).removeClass('active');
                        $$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
                        //text for "previous" and "next" default buttons
                        $('prev8').set('html','&lt;&lt; '+this.items[this.previousIndex].innerHTML);
                        $('next8').set('html',this.items[this.nextIndex].innerHTML+' &gt;&gt;');
                    }
                });
                //more "previous" and "next" buttons
                nS8.addActionButtons('previous',$$('#box8 .prev'));
                nS8.addActionButtons('next',$$('#box8 .next'));
                //more handle buttons
                nS8.addHandleButtons(handles8_more);
                //walk to item 3 witouth fx
                nS8.walk(3,false,true);

            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.efectorelativo.net/laboratory/noobSlide/'>noobSlide</a> | 設置サンプル</h1>
<!-- CODE -->
            <div id="cont">

<!-- 例1 -->
                <h2>例：画像を2枚ずつスライド（自動再生）</h2>
                <div class="sample">
                    <div class="mask1">
                        <div id="box1">
                            <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                        </div>
                    </div>
                </div>
<!-- / 例1 -->

<!-- 例2 -->
                <h2>例：画像のスライドショー（再生、停止、前へ、次へリンク付き）</h2>
                <div class="sample">
                    <div class="mask2">
                        <div id="box2">
                            <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                        </div>
                    </div>
                    <p class="buttons">
                        <span id="prev1">&lt;&lt; Previous</span>
                        <span id="play1">Play &gt;</span>
                        <span id="stop1">Stop</span>
                        <span id="next1">Next &gt;&gt;</span>
                    </p>
                </div>
<!-- / 例2 -->

<!-- 例3 -->
                <h2>例3：画像のスライドショー（頭出し、再生、停止リンク付き）</h2>
                <div class="sample">
                    <div class="mask2">
                        <div id="box3">
                            <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                        </div>
                    </div>
                    <p class="buttons">
                        <span id="playback3">&lt; Playback</span>
                        <span id="stop3">Stop</span>
                        <span id="play3">Play &gt;</span>
                    </p>
                </div>
<!-- / 例3 -->

<!-- 例4 -->
                <h2>例4：要素のスライドショー（リンククリックで該当する要素までスライドしながら表示）</h2>
                <div class="sample">
                    <div class="mask3">
                        <div id="box4">
                            <div>
                                <h3>1. モツ鍋@鳥小屋</h3>
                                <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_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a>
                                <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p>
                                <p>キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！</p>
                            </div>
                            <div>
                                <h3>2. 赤から鍋20辛＠赤から亭</h3>
                                <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_t.jpg" width="100" height="75" alt="赤から鍋20辛＠赤から亭" /></a>
                                <p>渋谷にある名古屋名物の「赤から鍋」と「セセリ焼き」が食べれる人気店！お値段はけっこうリーズナブルです。いつも込んでるので行くときは予約がおすすめ。</p>
                                <p>「赤から鍋」は辛さレベルを選べます。写真は「20辛」！友達とふたりで挑戦したけど、どろっどろしてる分、辛さ倍増（；　；）でもおいしかったです♪完食アドバイスとしては、、、まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ</p>
                            </div>
                            <div>
                                <h3>3. 特選牛の内臓地獄鍋@雑草家</h3>
                                <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_t.jpg" width="100" height="75" alt="雑草家@特選牛の内臓地獄鍋" /></a>
                                <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからｗ</p>
                                <p>ハツとかいろんな種類のホルモンが一度に楽しめます♪焼肉もいいけど、辛めの鍋でグツグツに込んだホルモンはモツ煮みたいにとろっとしてかなり美味しいです。〆は雑炊セットがおすすめ！溶き卵もいれましょう♪これまた絶品おじやですｗ</p>
                            </div>
                            <div>
                                <h3>4. トマト入り塩モツ鍋@汁べえ</h3>
                                <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_t.jpg" width="100" height="75" alt="トマト入り塩モツ鍋@汁べえ" /></a>
                                <p>下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！お鍋は店員さんが作ってくれます。少し煮えてくると、なんとボールにいっぱいはいったコラーゲンを投入するではありませんか！お肌が曲がり角の女子としてはうれしい限り♪</p>
                                <p>あと、ここのモツ鍋、トマトを入れるんです！はじめは！？って思ったけど、おそるおそる食べてみるとすごいトマトがいい味出してました！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品でした♪</p>
                            </div>
                            <div>
                                <h3>5. 火鍋@蘭苑菜館</h3>
                                <a href="http://www.flickr.com/photos/22559849@N06/3055992490/" title="火鍋@蘭苑菜館 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3184/3055992490_7941aefa75_t.jpg" width="75" height="100" alt="火鍋@蘭苑菜館" /></a>
                                <p>東銀座にある本場ムード満点の火鍋屋さん。本場ってことで、店員のおねぇさんはかなり愛想なしですｗオーダーすると怒ってるみたいな顔します（汗；</p>
                                <p>火鍋のスープは、激辛四川風の赤スープ、コラーゲンたっぷりの白スープ、それとめずらしく出汁のきいた鴨スープがあります！！2種類好きなのをチョイス！赤スープは、追加で辛くする薬味をもらえるので、激辛好きの人はそれを入れればどこまでも楽しめます♪紹興酒も美味しくて、辛い鍋といっしょだとついついお酒も進んじゃいます。鴨スープは〆にラーメンを投入すると、ラーメン屋さんもびっくりのとびっきりの鴨ラーメンになりますよ！是非お試しアーレ♪</p>
                            </div>
                        </div>
                    </div>
                    <h4>Show: <span id="info4"></span></h4>
                    <p class="buttons" id="handles4">
                        <span>1. 鳥小屋</span>
                        <span>2. 赤から亭</span>
                        <span>3. 雑草家</span>
                        <span>4. 汁べえ</span>
                        <span>5. 蘭苑菜館</span>
                    </p>
                </div>
<!-- / 例4 -->

<!-- 例5 -->
                <h2>例5：画像のスライドショー（画像情報＋リンク付き）</h2>
                <div class="sample">
                    <div class="mask2">
                        <div id="box5">
                            <span><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_m.jpg" alt="Photo" /></span>
                        </div>
                        <div id="info5" class="info"></div>
                    </div>
                    <p class="buttons">
                        <span id="prev5">&lt;&lt; Previous</span>
                        <span id="play5">Play &gt;</span>
                        <span id="stop5">Stop</span>
                        <span id="next5">Next &gt;&gt;</span>
                    </p>
                </div>
<!-- / 例5 -->

<!-- 例6 -->
                <h2>例6：左右にサムネイルを配置した画像ギャラリー（画像情報＋リンク付き）</h2>
                <div class="sample sample6">
                    <!-- 左側のサムネイル画像 -->
                    <div class="thumbs" id="handles6_1">
                        <div><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" alt="" /></div>
                    </div>
                    <!-- 原寸大画像 -->
                    <div class="mask6">
                        <div id="box6">
                            <div><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></div>
                        </div>
                        <div class="info"></div>
                    </div>
                    <!-- 右側のサムネイル画像 -->
                    <div class="thumbs" id="handles6_2">
                        <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_s.jpg" alt="" /></div>
                        <div><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_s.jpg" alt="" /></div>
                    </div>
                    <p class="buttons">
                        <span id="prev6">&lt;&lt; Previous</span>
                        <span id="playback6">&lt;Playback</span>
                        <span id="stop6">Stop</span>
                        <span id="play6">Play &gt;</span>
                        <span id="next6">Next &gt;&gt;</span>
                    </p>
                </div>
<!-- / 例6 -->

<!-- 例7 -->
                <h2>例7：サムネイル部分のカレント表示がFlashっぽい画像ギャラリー</h2>
                <div class="sample sample7">
                    <div class="mask6">
                        <!-- 原寸大画像 -->
                        <div id="box7">
                            <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                            <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                        </div>
                    </div>
                    <div id="thumbs7">
                        <!-- サムネイル画像 -->
                        <div class="thumbs">
                            <div><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_s.jpg" alt="" /></div>
                            <div><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_s.jpg" alt="" /></div>
                        </div>
                        <div id="thumbs_mask7"></div>
                        <p id="thumbs_handles7">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </p>
                    </div>
                </div>
<!-- / 例7 -->

<!-- 例8 -->
                <h2>例8：要素のスライドショー（パネル切替、ページ送り）</h2>
                <div class="sample sample8">
                    <p class="buttons" id="handles8">
                        <span>Pane 1</span>
                        <span>Pane 2</span>
                        <span>Pane 3</span>
                        <span>Pane 4</span>
                        <span>Pane 5</span>
                    </p>
                    <div class="mask3">
                        <div id="box8">
                            <div>
                                <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                                <h3>1. モツ鍋@鳥小屋</h3>
                                <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_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a>
                                <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p>
                                <p>キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！</p>
                            </div>
                            <div>
                                <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                                <h3>2. 赤から鍋20辛＠赤から亭</h3>
                                <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_t.jpg" width="100" height="75" alt="赤から鍋20辛＠赤から亭" /></a>
                                <p>渋谷にある名古屋名物の「赤から鍋」と「セセリ焼き」が食べれる人気店！お値段はけっこうリーズナブルです。いつも込んでるので行くときは予約がおすすめ。</p>
                                <p>「赤から鍋」は辛さレベルを選べます。写真は「20辛」！友達とふたりで挑戦したけど、どろっどろしてる分、辛さ倍増（；　；）でもおいしかったです♪完食アドバイスとしては、、、まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ</p>
                            </div>
                            <div>
                                <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                                <h3>3. 特選牛の内臓地獄鍋@雑草家</h3>
                                <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_t.jpg" width="100" height="75" alt="雑草家@特選牛の内臓地獄鍋" /></a>
                                <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからｗ</p>
                                <p>ハツとかいろんな種類のホルモンが一度に楽しめます♪焼肉もいいけど、辛めの鍋でグツグツに込んだホルモンはモツ煮みたいにとろっとしてかなり美味しいです。〆は雑炊セットがおすすめ！溶き卵もいれましょう♪これまた絶品おじやですｗ</p>
                            </div>
                            <div>
                                <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                                <h3>4. トマト入り塩モツ鍋@汁べえ</h3>
                                <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_t.jpg" width="100" height="75" alt="トマト入り塩モツ鍋@汁べえ" /></a>
                                <p>下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！お鍋は店員さんが作ってくれます。少し煮えてくると、なんとボールにいっぱいはいったコラーゲンを投入するではありませんか！お肌が曲がり角の女子としてはうれしい限り♪</p>
                                <p>あと、ここのモツ鍋、トマトを入れるんです！はじめは！？って思ったけど、おそるおそる食べてみるとすごいトマトがいい味出してました！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品でした♪</p>
                            </div>
                            <div>
                                <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                                <h3>5. 火鍋@蘭苑菜館</h3>
                                <a href="http://www.flickr.com/photos/22559849@N06/3055992490/" title="火鍋@蘭苑菜館 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3184/3055992490_7941aefa75_t.jpg" width="75" height="100" alt="火鍋@蘭苑菜館" /></a>
                                <p>東銀座にある本場ムード満点の火鍋屋さん。本場ってことで、店員のおねぇさんはかなり愛想なしですｗオーダーすると怒ってるみたいな顔します（汗；</p>
                                <p>火鍋のスープは、激辛四川風の赤スープ、コラーゲンたっぷりの白スープ、それとめずらしく出汁のきいた鴨スープがあります！！2種類好きなのをチョイス！赤スープは、追加で辛くする薬味をもらえるので、激辛好きの人はそれを入れればどこまでも楽しめます♪紹興酒も美味しくて、辛い鍋といっしょだとついついお酒も進んじゃいます。鴨スープは〆にラーメンを投入すると、ラーメン屋さんもびっくりのとびっきりの鴨ラーメンになりますよ！是非お試しアーレ♪</p>
                            </div>
                        </div>
                    </div>
                    <p class="buttons">
                        <span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>
                    </p>
                    <p class="buttons">
                        <span id="playback8">&lt;Playback</span>
                        <span id="stop8">Stop</span>
                        <span id="play8">Play &gt;</span>
                    </p>
                    <p class="buttons" id="handles8_more">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                    </p>
                </div>
<!-- / 例8 -->
            </div>
<!-- / CODE -->
        </div><!-- div#wrap -->
    </body>
</html>

Sexy Lightbox 2
画像とコンテンツをセクシーに表示

unknown

Sexy Lightbox2

MIT
［CSS］sexy_lightbox2.css
［JS］mootools.js v1.2、sexylightbox.js

Lightbox2ベースのmootools.jsを使用した画像とコンテンツをセクシーに表示するJSライブラリ。 動きが滑らかで、表示時に画面をスクロールしてもちゃんと表示部分がついてきます。

画像は1枚でも複数の画像をグループ化してギャラリー風に表示することもできます。 コンテンツは、インラインコンテンツを表示したり、指定したURLをインラインフレーム表示したり、外部ファイルを読み込んで表示することができます。

表示時の角丸枠を白枠にしたり、オーバーレイの背景色を変更することが出来ます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="mootools-1.2-core-yc.js" type="text/javascript" charset="utf-8"></script>
<script src="sexylightbox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  window.addEvent('domready', function(){
    new SexyLightBox();
    new SexyLightBox({find:'sexywhite',color:'white', OverlayStyles:{'background-color':'#000'}});
  });
</script>
<!-- CSS -->
<link rel="stylesheet" href="sexylightbox.css" type="text/css" charset="utf-8" />
<style type="text/css">
  #img_container ul { display:block; padding:0; margin:0; list-style:none; }
  #img_container ul li { display:inline; margin:0 10px 0 0; padding:0; }
  #img_container ul li a img { border:3px solid #ccc; }
  #img_container ul li a:hover img { border:3px solid #ff6699; }
  #login { width:95%; margin:0 auto; padding:0; border:0; background:transparent url(lib/sexy_lightbox2/sexyimages/user.png) no-repeat left bottom; }
  #login legend { font-weight:bold; margin:0; padding:0; }
  #login p { margin:5px 0; }
  #login input.txt { width:146px; height:22px; border:1px solid #ccc; }
  #login .right { text-align:right; }
</style>
HTML 
<!-- テキストリンク -->
<a href="元画像URL" rel="sexywhite">画像を「白枠」でセクシーに表示</a>
<a href="元画像URL" rel="sexylightbox">画像を「黒枠」でセクシーに表示</a>

<!-- 単一画像 -->
<p><a href="元画像URL" rel="sexylightbox" title="説明文"><img src="サムネイル画像URL" alt="" /></a></p>

<!-- 画像ギャラリー -->
<div id="img_container">
  <ul>
    <li><a href="元画像URL" rel="sexylightbox[ギャラリー名]" title="タイトル"><img src="サムネイル画像URL" alt=""/></a></li>
    <li><a href="元画像URL" rel="sexylightbox[ギャラリー名]" title="タイトル"><img src="サムネイル画像URL" alt=""/></a></li>
    ・・・
  </ul>
</div>
<br style="float:none; clear:both;" />
Sexy Lightbox2の設置サンプルサンプルを見る
<!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>Sexy Lightbox2 | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <script src="/content/lib/mootools/mootools-1.2-core-yc.js" type="text/javascript"></script>
        <script src="/content/lib/sexy_lightbox2/sexylightbox.js" type="text/javascript"></script>
        <script type="text/javascript">
          window.addEvent('domready', function(){
            new SexyLightBox();
            new SexyLightBox({find:'sexywhite',color:'white', OverlayStyles:{'background-color':'#000'}});
          });
        </script>
        <link rel="stylesheet" href="/content/lib/sexy_lightbox2/sexylightbox.css" type="text/css" />
        <style type="text/css">
            #img_container ul { display:block; padding:0; margin:0; list-style:none; }
            #img_container ul li { display:inline; margin:0 10px 0 0; padding:0; }
            #img_container ul li a img { border:3px solid #ccc; }
            #img_container ul li a:hover img { border:3px solid #ff6699; }
            #login { width:95%; margin:0 auto; padding:0; border:0; background:transparent url(/content/lib/sexy_lightbox2/sexyimages/user.png) no-repeat left bottom; }
            #login legend { font-weight:bold; margin:0; padding:0; }
            #login p { margin:5px 0; }
            #login input.txt { width:146px; height:22px; border:1px solid #ccc; }
            #login .right { text-align:right; }
        </style>
    </head>
    <body>
        <h1><a href='http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2'>Sexy Lightbox2</a> | 設置サンプル</h1>
        <h2>テキストリンク</h2>
        <p><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" rel="sexywhite">画像を「白枠」でセクシーに表示</a></p>
        <p><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" rel="sexylightbox">画像を「黒枠」でセクシーに表示</a></p>

        <h2>画像リンク</h2>
        <p><a href="/content/img/pic1.png" rel="sexylightbox" title="<a href='http://krispykreme.jp/index.html'>Krispy Kreme Doughnuts</a>"><img src="/content/img/pic1-thumb.png" alt="" /></a></p>

        <h2>画像をグループ化してギャラリー表示</h2>
        <div id="img_container">
            <ul>
                <li><a href="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" rel="sexylightbox[group1]" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt=""/></a></li>
                <li><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" rel="sexylightbox[group1]" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt=""/></a></li>
                <li><a href="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2.jpg" rel="sexylightbox[group1]" title="CAFE EAT@代官山"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt=""/></a></li>
            </ul>
        </div>
        <br style="float:none; clear:both;" />

        <h2>インラインコンテンツ</h2>

        <div id="myOnPageContent" style="display:none;">
            <a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" width="75" height="75" alt="クリスピー・クリーム・ドーナツ" align="left" style="margin:0 5px 5px 0; border:5px solid #af632f;" /></a>
            新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。1時間20分も並んでGETしまいた！ドーナツの箱がピザの箱みたいでアメリカン！よくハリウッド映画で警察官がドーナツよく食べてるシーンがあるけど、まさにああいうイメージ！さぞかし甘くて巨大なのかと思ってたら、意外とほどよい甘さでこぶり。生地はややわらかくてふんわり。想像していたのと大きさも味も違って、そのギャップにびっくりでしたｗ
        </div>

        <p>
          <a href="/content/lib/sexy_lightbox2TB_inline?height=200&width=400&inlineId=myOnPageContent" rel="sexylightbox" title="Krispy Kreme Doughnuts">インラインコンテンツ表示</a>
        </p>
        <p>
          <a href="/content/lib/sexy_lightbox2TB_inline?height=150&width=300&inlineId=myOnPageContent" rel="sexylightbox" title="Krispy Kreme Doughnuts">インラインコンテンツ表示（スクロールあり）</a>
        </p>


        <h2>インラインフレームコンテンツ</h2>
        <p><a href="http://www.google.com?TB_iframe=true&height=450&width=800" rel="sexylightbox" >Google</a></p>

        <h2>Ajaxコンテンツ</h2>
        <p><a href="/content/lib/sexy_lightbox2/data.html?height=210&width=455"  rel="sexylightbox" title="Contenido cargado via AJAX.">外部ファイル読み込み</a></p>
        <p><a href="/content/lib/sexy_lightbox2/login.html?height=160&width=300" rel="sexylightbox" >ログイフォーム</a></p>
        <p><a href="/content/lib/sexy_lightbox2/video.html?height=390&width=465" rel="sexylightbox" >You Tube</a></p>
    </body>
</html>

Slideshow
ズーム、フェード、ワイプなど様々なエフェクト効果がつけられるスライドショー

unknown

Slideshow: A JavaScript class for Mootools

IE 6+、Firefox、Opera、Safari、Camino
MIT
mootools.js v1.11、slideshow.rc1.packed.js

ズーム、フェード、ワイプなどスライドショーの画像切替時の効果を簡単に実装できるライブラリ。 サムネイルギャラリーもあります（画像名の命名規則あり、原寸大画像はXX.jpg、サムネイル画像はXXt.jpg）。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="mootools.v1.11.js" charset="utf-8"></script>
<script type="text/javascript" src="slideshow.rc1.packed.js" charset="utf-8"></script>
<script type="text/javascript">
  window.onload=function(){
    /* 基本的なスライドショー */
    myShow1=new Slideshow(
      'my_slideshow1', {
        hu:'lib/galleryimages/thumbnail/christmas-party-',
        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg']
    });
    ・・・
</script>
<!-- CSS -->
<style type="text/css">
  .slideshow { margin:1em; }
  .slideshow p { padding-top:9px; }
  .slideshow ul {  background-color:#fff; bottom:-13px; right:0; position:absolute; overflow:hidden; padding:5px 0; z-index: 10001; }
  .slideshow ul a { background-position:50% 50%; cursor:pointer; display:block; width:30px; height:25px; margin-right:5px; opacity:0.5; }
  .slideshow ul a.active, 
  .slideshow ul a:hover { opacity:1; }
  .slideshow ul li { float:left; list-style:none; }
</style>
HTML 
<!-- 基本的なスライドショー -->
<div id="my_slideshow1" class="slideshow">
  <img src="lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
</div>
サンプルを見る
<!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: A Javascript class for Mootools | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <script type="text/javascript" src="/content/lib/mootools/mootools.v1.11.js"></script>
        <script type="text/javascript" src="/content/lib/mootools/slideshow.rc1.packed.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                /* Basic */
                myShow1=new Slideshow(
                    'my_slideshow1',
                    {
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-',
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg']
                    }
                );
                /* Pan and zoom options */
                myShow2=new Slideshow(
                    'my_slideshow2',
                    {
                        type: 'combo', pan: 'rand', zoom: 'rand', duration: [2000, 4000],
                        width: 140, height: 120, 
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Push */
                myShow_push=new Slideshow(
                    'my_slideshow_push',
                    {
                        type:'push', duration: [1000, 2000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Wipe */
                myShow_wipe=new Slideshow(
                    'my_slideshow_wipe',
                    {
                        type:'wipe', duration: [1000, 2000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Fade */
                myShow_fade=new Slideshow(
                    'my_slideshow_fade',
                    {
                        type: 'fade', duration: [2000, 4000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Pan */
                myShow_pan=new Slideshow(
                    'my_slideshow_pan',
                    {
                        type: 'pan', duration: [2000, 4000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Zoom */
                myShow_zoom=new Slideshow(
                    'my_slideshow_zoom',
                    {
                        type: 'zoom', duration: [2000, 4000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Combo */
                myShow_combo=new Slideshow(
                    'my_slideshow_combo',
                    {
                        type: 'combo', duration: [2000, 4000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Arrow */
                myShow_arrow=new Slideshow(
                    'my_slideshow_arrow',
                    {
                        type:'push', navigation:'arrows', transition:Fx.Transitions.bounceOut, duration: [1000, 2000], width:140, height:120,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/thumbnail/christmas-party-'
                    }
                );
                /* Thumbnail */
                myShow_thumbnail=new Slideshow(
                    'my_slideshow_thumbnail',
                    {
                        type:'combo', navigation:'thumbnails', duration:[2000, 4000], width:450, height:300,
                        images:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg'],
                        hu:'/content/lib/galleryimages/christmas-party-'
                    }
                );
            }
        </script>
        <style type="text/css">
            .slideshow { margin:1em; }
            .slideshow p { padding-top:9px; }
            .slideshow ul {  background-color:#fff; bottom:-13px; right:0; position:absolute; overflow:hidden; padding:5px 0; z-index: 10001; }
            .slideshow ul a { background-position:50% 50%; cursor:pointer; display:block; width:30px; height:25px; margin-right:5px; opacity:0.5; }
            .slideshow ul a.active, 
            .slideshow ul a:hover { opacity:1; }
            .slideshow ul li { float:left; list-style:none; }
            /* Thumbnail */
            #my_slideshow_thumbnail { border:1px solid #ccc; background-color:#fff; padding:20px 20px 0 20px; }
            #my_slideshow_thumbnail ul { position:relative; top:0; left:0; padding-left:5px; }
            /* Arrow */
            #my_slideshow_arrow ul a { cursor: pointer; display: block; float: left; margin: 0 4px 0 0; height: 10px; overflow: hidden; width: 11px; }
            #my_slideshow_arrow ul a.prev { background-image:url(/content/img/icon/panL.gif); width:11px; }
            #my_slideshow_arrow ul a.next { background-image:url(/content/img/icon/panR.gif); margin-right:0; width:11px; }
            #my_slideshow_arrow ul a.active, 
            #my_slideshow_arrow ul a.prev:hover,
            #my_slideshow_arrow ul a.next:hover { background-position:0 -11px; }
            #my_slideshow_arrow ul li { float:left; list-style:none; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href="http://www.electricprism.com/aeron/slideshow/">Slideshow: A Javascript class for Mootools</a> | 設置サンプル</h1>
            <p>自動的に写真が入れ替わります。</p>
            <h2>スライドショー</h2>
            <div id="my_slideshow1" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <div class="cf">
                <div style="float:left; width:460px;">
                    <h2>スライドショー（Pan and zoom options）</h2>
                    <div id="my_slideshow2" class="slideshow">
                        <div><!-- this is the slideshow element -->
                            <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" width="450" height="300" />
                        </div>
                        <ul><!-- this is the navigation element -->
                            <li><a class="prev"></a></li>
                            <li><a class="next"></a></li>
                        </ul>
                        <p></p><!-- this is the captions element -->
                    </div>
                </div>
            </div>

            <div class="cf">
                <div style="float:left; width:460px;">
            <h2>スライドショー（Push）</h2>
            <div id="my_slideshow_push" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <h2>スライドショー（Wipe）</h2>
            <div id="my_slideshow_wipe" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <h2>スライドショー（Fade）</h2>
            <div id="my_slideshow_fade" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <h2>スライドショー（Pan）</h2>
            <div id="my_slideshow_pan" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <h2>スライドショー（Zoom）</h2>
            <div id="my_slideshow_zoom" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <h2>スライドショー（Combo）</h2>
            <div id="my_slideshow_combo" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>

            <h2>スライドショー（Arrow）</h2>
            <div id="my_slideshow_arrow" class="slideshow">
                <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" alt="Christmas Party" />
            </div>
            <br clear="all" />

            <h2>サムネイル（Thumbnail）</h2>
            <div id="my_slideshow_thumbnail" class="slideshow">
                <img src="/content/lib/galleryimages/christmas-party-1.jpg" alt="Christmas Party" />
            </div>
            <br clear="all" />
            <p>写真素材：<a href="http://www.nwyhstockimages.com/">NWYH Stock Image Library</a></p>
        </div>
    </body>
</html>

SmoothGallery
イメージをグループ化して、固定領域内でスライドショーができる画像ギャラリー

unknown

JonDesign's SmoothGallery 2.0

IE 6.0+、Firefox、Opera、Safari
GPL（GNU一般公的使用許諾）：ソースコードの再配布・改変可
mootools.js v1.11、jd.gallery.js、jd.gallery.set.js

イメージをグループ化して、固定領域内でスライドショーができるイメージギャラリー。 コンパクトでハイクオリティ！デザインがかっこいいです。 通常のイメージギャラリーの場合は「jd.gallery.js」、イメージをグループ化して複数のイメージギャラリーを配置する場合は「jd.gallery.set.js」を使用します。 固定領域に入りきらない縦長の画像は、縮小されずに切り取られます。

イメージギャラリーイメージギャラリー
グループギャラリーグループギャラリー
グループギャラリーグループギャラリー
グループギャラリー：サムネイル表示機能グループギャラリー：サムネイル表示機能
JonDesign's SmoothGallery 2.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>JonDesign's SmoothGallery | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <link rel="stylesheet" href="/content/lib/smoothgallery/css/jd.gallery.css" type="text/css" />
        <script type="text/javascript" src="/content/lib/mootools/mootools.v1.11.js"></script>
        <script type="text/javascript" src="/content/lib/smoothgallery/scripts/jd.gallery.js"></script>
        <script type="text/javascript" src="/content/lib/smoothgallery/scripts/jd.gallery.set.js"></script>
        <script type="text/javascript">
            function startGallery() {
                var myGallery = new gallery($('myGallery'), { timed: false });
                document.myGallerySet = new gallerySet($('myGallerySet'), { timed: false });
            }
            window.addEvent('domready',startGallery);
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href="http://smoothgallery.jondesign.net/">JonDesign's SmoothGallery</a> | 設置サンプル</h1>
            <h2>イメージギャラリー</h2>
            <div id="myGallery">
                <div class="imageElement">
                    <h3>Achievement #1</h3>
                    <p>Achievement #1 の説明文。</p>
                    <a href="#" title="open image" class="open"></a>
                    <img src="/content/lib/galleryimages/achievement-1.jpg" class="full" />
                    <img src="/content/lib/galleryimages/thumbnail/achievement-1.jpg" class="thumbnail" />
                </div>
                <div class="imageElement">
                    <h3>Achievement #2</h3>
                    <p>Achievement #2 の説明文。</p>
                    <a href="#" title="open image" class="open"></a>
                    <img src="/content/lib/galleryimages/achievement-2.jpg" class="full" />
                    <img src="/content/lib/galleryimages/thumbnail/achievement-2.jpg" class="thumbnail" />
                </div>
            </div>
            <h2>グループギャラリー</h2>
            <div id="myGallerySet">
<!-- Achievement [start] -->
                <div id="gallery1" class="galleryElement">
                    <h2>Achievement</h2>
                    <div class="imageElement">
                        <h3>Achievement #1 Title</h3>
                        <p>Achievement #1 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/achievement-1.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/achievement-1.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Achievement #2 Title</h3>
                        <p>Achievement #2 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/achievement-2.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/achievement-2.jpg" class="thumbnail" />
                    </div>
                </div>
<!-- Achievement [end] //-->

<!-- Imagenation [start] -->
                <div id="gallery2" class="galleryElement">
                    <h2>Imagination</h2>
                    <div class="imageElement">
                        <h3>Imagination #1 Title</h3>
                        <p>Imagination #1 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/imagination-1.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/imagination-1.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Imagination #2 Title</h3>
                        <p>Imagination #2 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/imagination-2.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/imagination-2.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Imagination #3 Title</h3>
                        <p>Imagination #3 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/imagination-3.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/imagination-3.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Imagination #4 Title</h3>
                        <p>Imagination #4 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/imagination-4.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/imagination-4.jpg" class="thumbnail" />
                    </div>
                </div>
<!-- Imagination [end] //-->

<!-- Christmas Party [start] -->
                <div id="gallery3" class="galleryElement">
                    <h2>Christmas Party</h2>
                    <div class="imageElement">
                        <h3>Christmas Party #1 Title</h3>
                        <p>Christmas Party #1 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-1.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #2 Title</h3>
                        <p>Christmas Party #2 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-2.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-2.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #3 Title</h3>
                        <p>Christmas Party #3 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-3.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-3.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #4 Title</h3>
                        <p>Christmas Party #4 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-4.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-4.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #5 Title</h3>
                        <p>Christmas Party #5 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-5.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-5.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #6 Title</h3>
                        <p>Christmas Party #6 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-6.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-6.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #7 Title</h3>
                        <p>Christmas Party #7 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-7.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-7.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #8 Title</h3>
                        <p>Christmas Party #8 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-8.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-8.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Christmas Party #9 Title</h3>
                        <p>Christmas Party #9 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/christmas-party-9.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/christmas-party-9.jpg" class="thumbnail" />
                    </div>
                </div>
<!-- Christmas Party [end] //-->


<!-- Technology [start] -->
                <div id="gallery4" class="galleryElement">
                    <h2>Technology</h2>
                    <div class="imageElement">
                        <h3>Technology #1 Title</h3>
                        <p>Technology #1 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/technology-1.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/technology-1.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Technology #2 Title</h3>
                        <p>Technology #2 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/technology-2.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/technology-2.jpg" class="thumbnail" />
                    </div>
                    <div class="imageElement">
                        <h3>Technology #3 Title</h3>
                        <p>Technology #3 Description</p>
                        <a href="#" title="open image" class="open"></a>
                        <img src="/content/lib/galleryimages/technology-3.jpg" class="full" />
                        <img src="/content/lib/galleryimages/thumbnail/technology-3.jpg" class="thumbnail" />
                    </div>
                </div>
<!-- Technology [end] //-->
            </div><!-- div#wrap/div#content/div#myGallerySet -->
        </div><!-- div#wrap -->
    </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