設置サンプル
実行結果
ランダムにスライドショー
順番どおりにスライドショー
設置サンプルのソース
<!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 demo - Interface plugin for jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<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/interface/interface-1.2.js"></script>
<style type="text/css">
#slideShow1 {
width:240px;
height:380px;
padding:10px;
background-color:#000;
margin:10px;
}
#slideShow2 {
width:240px;
height:380px;
padding:10px;
background-color:#000;
margin:10px;
}
#slideShow1 a,
#slideShow2 a {
text-decoration:none;
}
.pagelinks a {
font-weight:bold;
color:#ccc;
font-size:11px;
}
.slideCaption {
background-color:#000;
text-align:center;
font-weight:bold;
color:#f90;
font-size:10px;
}
.pagelinks a.activeSlide {
color:#f90;
}
/* this is for IE so the prev/next links can be hovered*/
.nextSlide,
.prevSlide {
background-image:url(lib/galleryimages/spacer.gif);
}
.nextSlide:hover {
background-image:url(lib/galleryimages/nextslide.jpg);
background-repeat:no-repeat;
background-position:right center;
}
.prevSlide:hover {
background-image:url(lib/galleryimages/prevslide.jpg);
background-repeat:no-repeat;
background-position:left center;
}
.inputsTooltip {
border:1px solid #ccc;
background-color:#eee;
padding:4px;
color:#000;
font-size:11px;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}
#tooltipURL {
display:none;
}
</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><a href="http://interface.eyecon.ro/">Slideshow - Interface plugin for jQuery</a> | 設置サンプル</h1>
<h2>ランダムにスライドショー</h2>
<div id="slideShow1"></div>
<h2>順番どおりにスライドショー</h2>
<div id="slideShow2"></div>
<script type="text/javascript">
$(function(){
$.slideshow({
container:'slideShow1',
loader:'/content/lib/galleryimages/loading.gif',
linksPosition:'top',
linksClass:'pagelinks',
linksSeparator:' | ',
fadeDuration:400,
activeLinkClass:'activeSlide',
nextslideClass:'nextSlide',
prevslideClass:'prevSlide',
captionPosition:'bottom',
captionClass:'slideCaption',
autoplay:5,
random:true,
images:[
{
src:'http://farm4.static.flickr.com/3184/3025576118_50cfd53a2e_o.jpg',
caption:'ダチョウの卵の殻に入ったカクテル@Rose de Sahara'
},
{
src:'http://farm4.static.flickr.com/3235/3024747537_7d388975a4_o.jpg',
caption:'ワニのから揚げ@Rose de Sahara'
},
{
src:'http://farm4.static.flickr.com/3250/3024747513_69f14e618f_o.jpg',
caption:'カレー@Rose de Sahara'
},
{
src:'http://farm4.static.flickr.com/3180/3024747493_dea983d9b8_o.jpg',
caption:'ジャンバラヤ@Rose de Sahara'
}
]
})
$.slideshow({
container:'slideShow2',
loader:'/content/lib/galleryimages/loading.gif',
linksPosition:'top',
linksClass:'pagelinks',
linksSeparator:' | ',
fadeDuration:400,
activeLinkClass:'activeSlide',
nextslideClass:'nextSlide',
prevslideClass:'prevSlide',
captionPosition:'bottom',
captionClass:'slideCaption',
autoplay:5,
random:false,
images:[
{
src:'http://farm4.static.flickr.com/3184/3025576118_50cfd53a2e_o.jpg',
caption:'ダチョウの卵の殻に入ったカクテル@Rose de Sahara'
},
{
src:'http://farm4.static.flickr.com/3235/3024747537_7d388975a4_o.jpg',
caption:'ワニのから揚げ@Rose de Sahara'
},
{
src:'http://farm4.static.flickr.com/3250/3024747513_69f14e618f_o.jpg',
caption:'カレー@Rose de Sahara'
},
{
src:'http://farm4.static.flickr.com/3180/3024747493_dea983d9b8_o.jpg',
caption:'ジャンバラヤ@Rose de Sahara'
}
]
});
$('a').ToolTip({
className:'inputsTooltip',
position:'mouse'
});
});
</script>
</div>
</body>
</html>