PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照：Nivo Slider

▼9つのエフェクト効果がかけられるイメージスライダー

デフォルト

あい♥いっと ぱちクリ(((o(*ﾟ▽ﾟ*)o))) イヤー(>_<)

画像リンク＋キャプションをHTML文で指定（strong要素＋a要素使用）

あい♥いっと from 「PIERRE HERME PARIS Aoyama」のディスプレイ！　お店のHPはココ.
ぱちクリ(((o(*ﾟ▽ﾟ*)o))) from 「PIERRE HERME PARIS Aoyama」のディスプレイ！　お店のHPはココ.
イヤー(>_<) from 「PIERRE HERME PARIS Aoyama」のディスプレイ！　お店のHPはココ.

サムネイル付き

ステータス：　

設置サンプルのソース

<!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.nivo.slider.js" ></script>
      <script type="text/javascript">
         $(function() {
            $('#slider1').nivoSlider();
            $('#slider2').nivoSlider({
               effect:'random', //Specify sets like: 'fold,fade,sliceDown'
               slices:15,
               startSlide:0, //Set starting Slide (0 index)
               directionNav:true, //Next & Prev
               animSpeed:500, //Slide transition speed
               pauseTime:3000,
               directionNavHide:true, //Only show on hover
               controlNav:true, //1,2,3...
               keyboardNav:true, //Use left & right arrows
               pauseOnHover:true, //Stop animation while hovering
               manualAdvance:false, //Force manual transitions
               captionOpacity:0.6, //Universal caption opacity
            });
            $('#slider3').nivoSlider({
               controlNavThumbs:true,
               controlNavThumbsSearch: '.jpg', //Replace this with...
               controlNavThumbsReplace: '_t.jpg', //...this in thumb Image src
               beforeChange: function(){$("#slider3_status").html("スライド切替前");},
               afterChange: function(){$("#slider3_status").html("スライド切替後");},
               slideshowEnd: function(){$("#slider3_status").html("スライド終了");} //Triggers after all slides have been shown
            });
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
/* The Nivo Slider styles */

.nivoSlider {
   position:relative;
   width:240px; /* 画像の幅 */
   height:240px;
   margin:20px 20px 40px 20px; padding:0;
   background:#202834 url("/content/img/ajax/loading.gif") no-repeat 50% 50%;
   -moz-box-shadow:0px 0px 10px #333;
   -webkit-box-shadow:0px 0px 10px #333;
   box-shadow:0px 0px 10px #333;
}

#slider3.nivoSlider {
      width:500px; height:500px;
}
.nivoSlider a {
   border:0;
}
.nivoSlider img {
   position:absolute;
   top:0; left:0;
   display:none;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
   position:absolute;
   top:0; left:0;
   width:100%; height:100%;
   margin:0; padding:0;
   z-index:60;
   display:none;
}
/* The slices in the Slider */
.nivo-slice {
   display:block;
   position:absolute;
   z-index:50;
   height:100%;
}
/* Caption styles */
.nivo-caption {
   position:absolute;
   left:0; bottom:0;
   background:#fff;
   color:#000;
   font-size:10px;
   opacity:0.6; /* Overridden by captionOpacity setting */
   width:100%;
   z-index:89;
}
.nivo-caption p {
   margin:0; padding:5px;
}
.nivo-caption a {
   display:inline!important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
   display:block;
   width:30px; height:30px;
   background:url("/content/img/ajax/arrows2.png") no-repeat;
   text-indent:-9999px;
   position:absolute;
   z-index:99;
   cursor:pointer;
}
a.nivo-nextNav {
   background-position:-30px 0;
   top:45%; right:15px;
}
a.nivo-prevNav {
   top:45%; left:15px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
   position:relative;
   z-index:99;
   cursor:pointer;
}
.nivo-controlNav a.active {
   font-weight:bold;
}
#slider3 {
   margin-bottom:130px;
}
#slider3 .nivo-controlNav {
   position:absolute;
   left:19%;
   bottom:-110px;
}
#slider3 .nivo-controlNav img {
   display:inline;
   position:relative;
   margin-right:10px;
   -moz-box-shadow:0px 0px 5px #333;
   -webkit-box-shadow:0px 0px 5px #333;
   box-shadow:0px 0px 5px #333;
}
#slider3 .nivo-controlNav a.active img {
   -moz-box-shadow:0px 0px 5px #fff;
   -webkit-box-shadow:0px 0px 5px #fff;
   box-shadow:0px 0px 5px #fff;
}
#slider3 .nivo-caption {
}
#slider1 .nivo-controlNav,
#slider2 .nivo-controlNav,
#slider4 .nivo-controlNav {
   position:absolute;
   left:47%; bottom:-30px;
}
#slider1 .nivo-controlNav a,
#slider2 .nivo-controlNav a,
#slider4 .nivo-controlNav a {
   display:block;
   width:10px;
   height:10px;
   background:url("/content/img/ajax/bullets.png") no-repeat;
   text-indent:-9999px;
   border:0;
   margin-right:3px;
   float:left;
}
#slider1 .nivo-controlNav a.active,
#slider2 .nivo-controlNav a.active,
#slider4 .nivo-controlNav a.active {
   background-position:-10px 0;
}

      </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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <p>参照：<a href='http://nivo.dev7studios.com/' target='_blank'>Nivo Slider</a></p>
         <p>▼9つのエフェクト効果がかけられるイメージスライダー</p>
<!-- CODE -->
<h2>デフォルト</h2>
<div id="slider1">
   <img src="http://farm2.static.flickr.com/1347/5102269406_1011f6ce14_m.jpg" alt="あい♥いっと" />
   <img src="http://farm5.static.flickr.com/4112/5102266032_4f272fd87d_m.jpg" alt="ぱちクリ(((o(*ﾟ▽ﾟ*)o)))" />
   <img src="http://farm2.static.flickr.com/1208/5102266466_123033e5ed_m.jpg" alt="イヤー(>_<)" />
</div>
<h2>画像リンク＋キャプションをHTML文で指定（strong要素＋a要素使用）</h2>
<div id="slider2">
   <a href="http://www.flickr.com/photos/22559849@N06/5102269406/"><img src="http://farm2.static.flickr.com/1347/5102269406_1011f6ce14_m.jpg" alt="" title="#htmlcaption1" /></a>
   <a href="http://www.flickr.com/photos/22559849@N06/5102266032/"><img src="http://farm5.static.flickr.com/4112/5102266032_4f272fd87d_m.jpg" alt="" title="#htmlcaption2" /></a>
   <a href="http://www.flickr.com/photos/22559849@N06/5102266466/"><img src="http://farm2.static.flickr.com/1208/5102266466_123033e5ed_m.jpg" alt="" title="#htmlcaption3" /></a>
</div>
<div id="htmlcaption1" class="nivo-html-caption">
    <strong>あい♥いっと</strong> <em>from 「PIERRE HERME PARIS Aoyama」のディスプレイ！</em>　<a href="http://www.pierreherme.co.jp/boutiques/">お店のHPはココ</a>.
</div>
<div id="htmlcaption2" class="nivo-html-caption">
    <strong>ぱちクリ(((o(*ﾟ▽ﾟ*)o)))</strong> <em>from 「PIERRE HERME PARIS Aoyama」のディスプレイ！</em>　<a href="http://www.pierreherme.co.jp/boutiques/">お店のHPはココ</a>.
</div>
<div id="htmlcaption3" class="nivo-html-caption">
    <strong>イヤー(>_<)</strong> <em>from 「PIERRE HERME PARIS Aoyama」のディスプレイ！</em>　<a href="http://www.pierreherme.co.jp/boutiques/">お店のHPはココ</a>.
</div>

<h2>サムネイル付き</h2>
<p>ステータス：<span id="slider3_status">　</span></p>
<div id="slider3">
   <img src="http://farm2.static.flickr.com/1347/5102269406_1011f6ce14.jpg" alt="" title="あい♥いっと" />
   <img src="http://farm5.static.flickr.com/4112/5102266032_4f272fd87d.jpg" alt="" title="ぱちクリ(((o(*ﾟ▽ﾟ*)o)))" />
   <img src="http://farm2.static.flickr.com/1208/5102266466_123033e5ed.jpg" alt="" title="イヤー(>_<)" />
</div>
<!-- / CODE -->
      </div>
   </body>
</html>