mootoolsベース画像ポップアウト・イメージギャラリー・スライドショー
- MooTools Auto Captioning Images〔画像のキャプションを自動表示〕
- multibox〔mootools.ベースのLightbox〕
- noobSlide〔いろいろなタイプの画像ギャラリーや要素のスライドショー〕
- Sexy Lightbox 2〔画像とコンテンツをセクシーに表示〕
- Slideshow〔ズーム、フェード、ワイプなど様々なエフェクト効果がつけられるスライドショー〕
- SmoothGallery〔イメージをグループ化して、固定領域内でスライドショーができる画像ギャラリー〕
MooTools Auto Captioning Images
画像のキャプションを自動表示
2009/3/4
How to Auto Caption Images Using MooTools
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
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">どこから食べようか考えちゃうよねw</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分並んで買いましたw</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>
Sexy Lightbox 2
画像とコンテンツをセクシーに表示
unknown
Sexy Lightbox2
[CSS]sexy_lightbox2.css
[JS]mootools.js v1.2、sexylightbox.js
[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しまいた!ドーナツの箱がピザの箱みたいでアメリカン!よくハリウッド映画で警察官がドーナツよく食べてるシーンがあるけど、まさにああいうイメージ!さぞかし甘くて巨大なのかと思ってたら、意外とほどよい甘さでこぶり。生地はややわらかくてふんわり。想像していたのと大きさも味も違って、そのギャップにびっくりでしたw </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>
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>