設置サンプル
実行結果
設置サンプルのソース
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.opacityrollover.js"></script>
<script type="text/javascript">
$(function(){
/* flickr情報を出力 */
$imgs={
"真鴨堂@青山":[
["http://farm3.static.flickr.com/2725/4355326311_3573f905af.jpg","http://farm3.static.flickr.com/2725/4355326311_3573f905af_s.jpg","白レバーのたたき 胡麻葱塩和え"],
["http://farm3.static.flickr.com/2696/4356051268_a7ae822e1b.jpg","http://farm3.static.flickr.com/2696/4356051268_a7ae822e1b_s.jpg","鶏皮揚げ"],
["http://farm5.static.flickr.com/4007/4353881684_74a1d1f53e.jpg","http://farm5.static.flickr.com/4007/4353881684_74a1d1f53e_s.jpg","「真鴨」の炭火焼"],
["http://farm3.static.flickr.com/2725/4355326311_3573f905af.jpg","http://farm3.static.flickr.com/2725/4355326311_3573f905af_s.jpg","鶏皮揚げ"],
["http://farm5.static.flickr.com/4049/4353590744_1d096a5866.jpg","http://farm5.static.flickr.com/4049/4353590744_1d096a5866_s.jpg","国産「真鴨」すき鍋"],
["http://farm5.static.flickr.com/4070/4250633567_239deae31a_o.jpg","http://farm5.static.flickr.com/4070/4250633567_4139e5f082_s.jpg","国産「真鴨」しゃぶしゃぶ"],
["http://farm3.static.flickr.com/2725/4251263542_83cc59fd5d_o.jpg","http://farm3.static.flickr.com/2725/4251263542_2774fcbd00_s.jpg","国産「真鴨」しゃぶしゃぶ"],
["http://farm3.static.flickr.com/2718/4251252856_af6ee82fbb_o.jpg","http://farm3.static.flickr.com/2718/4251252856_1b745e373c_s.jpg","真鴨、軍鶏、ほろほろ鳥刺"],
["http://farm5.static.flickr.com/4045/4251271844_1d4795417d.jpg","http://farm5.static.flickr.com/4045/4251271844_1d4795417d_s.jpg","しそアイス"]
],
"モテなし@渋谷":[
["http://farm3.static.flickr.com/2641/4208733830_97e3896748_o.jpg","http://farm3.static.flickr.com/2641/4208733830_61daa4241f_s.jpg","通がうなった明太子"],
["http://farm5.static.flickr.com/4057/4208706662_021ba67bf5_o.jpg","http://farm5.static.flickr.com/4057/4208706662_9b26260b88_s.jpg","馬肉三点盛り"]
],
"福みみ@渋谷":[
["http://farm3.static.flickr.com/2527/4193010288_532f1b80db.jpg","http://farm3.static.flickr.com/2527/4193010288_532f1b80db_s.jpg","ネギトロとアボカドの生春巻"],
["http://farm3.static.flickr.com/2615/4193010340_2d4150a571.jpg","http://farm3.static.flickr.com/2615/4193010340_2d4150a571_s.jpg","ざる豆富に柚子胡椒"],
],
"ぼんじり@溝の口":[
["http://farm3.static.flickr.com/2687/4262397412_a54f28d252_o.jpg","http://farm3.static.flickr.com/2687/4262397412_2c872f719e_s.jpg","薩摩地鶏刺"],
["http://farm5.static.flickr.com/4002/4262481788_b9b524e9fb_o.jpg","http://farm5.static.flickr.com/4002/4262481788_da09295af8_s.jpg","ししとうとニンニク焼き"],
["http://farm5.static.flickr.com/4071/4262478814_3104c5c1df_o.jpg","http://farm5.static.flickr.com/4071/4262478814_d379639126_s.jpg","オスししゃも焼き"]
],
"こうあん@新宿":[
["http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg","http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_s.jpg","自家製さつま揚げ二種"],
["http://farm4.static.flickr.com/3166/3104684235_537e3463be.jpg","http://farm4.static.flickr.com/3166/3104684235_537e3463be_s.jpg","黒糖焼酎「一番橋」"],
["http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg","http://farm4.static.flickr.com/3197/3141927210_be00d22544_s.jpg","白子の昆布焼き"],
["http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg","http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_s.jpg","ササミ焼わさびマヨネーズ"],
["http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4.jpg","http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_s.jpg","揚げ物"],
["http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg","http://farm4.static.flickr.com/3015/3104684027_a215663229_s.jpg","白子の雲丹のせ炙り"],
["http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg","http://farm4.static.flickr.com/3215/3141100545_e21269fb11_s.jpg","白レバー串みそ焼き"],
["http://farm4.static.flickr.com/3203/3105515562_b203eee85a.jpg","http://farm4.static.flickr.com/3203/3105515562_b203eee85a_s.jpg","白レバー串みそ焼き"],
["http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg","http://farm4.static.flickr.com/3247/3141926720_08ebc48824_s.jpg","屋台風羽根つき焼きラーメン"]
],
"あぶらや@新宿":[
["http://farm5.static.flickr.com/4004/4315917216_068f1b3fe6.jpg","http://farm5.static.flickr.com/4004/4315917216_068f1b3fe6_s.jpg","ブレイン鉄板"],
["http://farm5.static.flickr.com/4033/4315916194_5be32bab14.jpg","http://farm5.static.flickr.com/4033/4315916194_5be32bab14_s.jpg","白レバー鉄板"]
]
}
var s="";
for(var i in $imgs){
$title=i;
for(var j=0; j<$imgs[i].length; j++){
$original=$imgs[i][j][0];
$thumb=$imgs[i][j][1];
$desc=$imgs[i][j][2];
s+='<li>';
s+=' <a class="thumb" name="leaf" href="'+$original+'" title="'+$title+'">';
s+=' <img src="'+$thumb+'" alt="'+$desc+'" />';
s+=' </a>';
s+=' <div class="caption">';
s+=' <div class="download">';
s+=' <a href="'+$original+'">Download Original</a>';
s+=' </div>';
s+=' <div class="image-title">'+$title+'</div>';
s+=' <div class="image-desc">'+$desc+'</div>';
s+=' </div>';
s+='</li>';
}
}
$("#thumbs ul.thumbs").append(s);
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!-- CSS -->
<style type="text/css">
div#page {
width: 900px;
background-color: #fff;
margin: 0 auto;
text-align: left;
border:1px solid #ddd;
}
div#container {
padding: 20px;
}
div.content {
display: none;
float: right;
width: 550px;
}
div.content a, div.navigation a {
text-decoration: none;
color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #ccc;
}
div.download {
float: right;
}
div.caption-container {
position: relative;
clear: left;
height: 75px;
}
span.image-caption {
display: block;
position: absolute;
width: 550px;
top: 0;
left: 0;
}
div.caption {
padding: 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
width:75px; height:75px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h2 class='h'>設置サンプル</h2>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://www.twospy.com/galleriffic/'>Galleriffic</a></p>
<!-- CODE -->
<h2>サムネイルのロールオーバー効果とクロスフェードスライドショー</h2>
<div id="page">
<div id="container">
<!-- 画像表示エリア -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<!-- サムネイルナビゲーション -->
<div id="thumbs" class="navigation">
<ul class="thumbs noscript"></ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>