slideViewer 1.1 | 設置サンプル
▼数字リンクにマウスオーバーすると、画像のタイトルがツールチップ表示されます。数字リンクをクリックすると、その数値の画像までスライドします。
▼数字リンクにマウスオーバーすると、画像のタイトルがツールチップ表示されます。数字リンクをクリックすると、その数値の画像までスライドします。
<!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>jQuery slideViewer 1.1 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="/content/lib/jquery/jquery-1.2.1.min.js" type="text/javascript" charest="utf-8"></script>
<script src="/content/lib/jquery/jquery.easing.1.3.js" type="text/javascript" charest="utf-8"></script>
<script src="/content/lib/jquery/jquery.tooltip.js" type="text/javascript" charest="utf-8"></script>
<script src="/content/lib/jquery/jquery.slideviewer.1.1.js" type="text/javascript" charest="utf-8"></script>
<style type="text/css">
/* slideViewer 1.0 default styles */
.svw { width:50px; height:20px; background:#fff;}
.svw ul{position:relative; left:-999em;}
.stripViewer { /* this is the DIV container for your UL of images */
position:relative;
overflow:hidden;
background:#000;
border:4px solid #000; /* this is the border. should have the same value for the links */
}
.stripViewer ul { /* this is your UL of images */
margin:0; padding:0;
position:relative;
left:0;
top:0;
width:1%;
list-style-type:none;
}
.stripViewer ul li { /* each image is arranged horizontally */
margin:0; padding:0;
float:left;
}
.stripTransmitter { /* this is the DIV for your transmitter (the UL generated at run time that commands the list)*/
overflow:auto;
width:1%;
}
.stripTransmitter ul { /* the auto-generated set of links */
position:relative;
list-style-type:none;
}
.stripTransmitter ul li{ /* in this list too, each LI is arranged horizontally */
width:20px;
float:left;
margin:0 1px 1px 0;
}
.stripTransmitter a{ /* the links. */
font:bold 10px Verdana, Arial;
text-align:center;
line-height:22px;
background:#000;
color:#fff;
text-decoration:none;
display:block;
border:1px solid #000;
}
.stripTransmitter a:hover { /* hover */
background:#ff8800;
color:#fff;
border:1px solid #ff8800;
}
.stripTransmitter a.current, .stripTransmitter a.current:hover { /* current */
background:#fff;
color:#000;
border:1px solid #000;
}
/* end slideViewer default styles */
#tooltip {
background:#fff;
color:#000;
opacity:0.85;
border:5px solid #dedede;
}
#tooltip h3 {
font:normal 10px Verdana;
margin:0;
padding:6px 2px;
border:0;
}
</style>
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygallery").slideView({toolTip:true});
$("div#mygallery2").slideView({toolTip:true,easeFunc:"easeInOutBack", easeTime:1200});
});
</script>
<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>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html'>slideViewer 1.1</a> | 設置サンプル</h1>
<p>▼数字リンクにマウスオーバーすると、画像のタイトルがツールチップ表示されます。数字リンクをクリックすると、その数値の画像までスライドします。</p>
<h2>easeInOutBack指定なし</h2>
<div id="mygallery" class="svw">
<ul>
<li><img alt="Christmas Party - 1" src="/content/lib/galleryimages/christmas-party-1.jpg" /></li>
<li><img alt="Christmas Party - 2" src="/content/lib/galleryimages/christmas-party-2.jpg" /></li>
<li><img alt="Christmas Party - 4" src="/content/lib/galleryimages/christmas-party-4.jpg" /></li>
<li><img alt="Christmas Party - 5" src="/content/lib/galleryimages/christmas-party-5.jpg" /></li>
<li><img alt="Christmas Party - 6" src="/content/lib/galleryimages/christmas-party-6.jpg" /></li>
<li><img alt="Christmas Party - 7" src="/content/lib/galleryimages/christmas-party-7.jpg" /></li>
<li><img alt="Christmas Party - 8" src="/content/lib/galleryimages/christmas-party-8.jpg" /></li>
<li><img alt="Christmas Party - 9" src="/content/lib/galleryimages/christmas-party-9.jpg" /></li>
</ul>
</div>
<h2>easeInOutBack指定あり</h2>
<div id="mygallery2" class="svw">
<ul>
<li><img alt="Christmas Party - 1" src="/content/lib/galleryimages/christmas-party-1.jpg" /></li>
<li><img alt="Christmas Party - 2" src="/content/lib/galleryimages/christmas-party-2.jpg" /></li>
<li><img alt="Christmas Party - 4" src="/content/lib/galleryimages/christmas-party-4.jpg" /></li>
<li><img alt="Christmas Party - 5" src="/content/lib/galleryimages/christmas-party-5.jpg" /></li>
<li><img alt="Christmas Party - 6" src="/content/lib/galleryimages/christmas-party-6.jpg" /></li>
<li><img alt="Christmas Party - 7" src="/content/lib/galleryimages/christmas-party-7.jpg" /></li>
<li><img alt="Christmas Party - 8" src="/content/lib/galleryimages/christmas-party-8.jpg" /></li>
<li><img alt="Christmas Party - 9" src="/content/lib/galleryimages/christmas-party-9.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>