Webpark
カテゴリ
タグ

Nivo Slider - jQueryを利用した画像のスライドショー

jQueryを利用した画像のスライドショーです。よくあるタイプですがかっこいいので紹介してみます。

サンプル

ページの切り替わり方がなかなかクールです。で、紹介しているのがこのサイト。

Nivo Slider

このサイトの一番下でJavaScriptとCSSをダウンロードできます。ダウンロードするのはProductionと書いてある方でいいと思います。ただ、CSSについてはそのままだとうまく表示されないと思うので以下のように変更して上書きします。
現在はCSSの追加なしで表示されるようになっています。また、全ファイルがzip形式でダウンロードできるようになっています。最後に書いたjavascriptのカスタマイズはまだ参考になるのでぜひご活用ください。
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */


/* ここからが追加部分 */

#slider {
	position:relative;
	min-height:220px;
	margin:30px 30px 60px 30px;
	background:#202834 url(images/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;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}


.nivo-controlNav {
	position:absolute;
	left:47%;
	bottom:-30px;
}
.nivo-controlNav a {
	display:block;
	width:10px;
	height:10px;
	background:url(images/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:-10px 0;
}

.nivo-directionNav a {
	display:block;
	width:32px;
	height:34px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-32px 0;
	right:10px;
}
a.nivo-prevNav {
	left:10px;
}

/* ここまでが追加部分 */

 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin: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:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* 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;
}
で、head内ででダウンロードしたファイルやjQueryを指定します。
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
さらに以下のコードを追加します。ここでスライドショーのカスタマイズが可能で、これは必要最低限のものです。
<script type="text/javascript">
  $(window).load(function() {
  $('#slider').nivoSlider();
  });
</script>
カスタマイズする場合は以下のコードをご参考に。
<script type="text/javascript">
  $(window).load(function() {
    $('#slider').nivoSlider({
    effect:'random',
    slices:5,
    animSpeed:500, //画像が切り替わるスピード
    pauseTime:3000, //画像が切り替わるまでの時間
    startSlide:2, //最初に表示する画像
    directionNav:true, //矢印を表示する
    directionNavHide:true, //マウスを乗せたときに矢印を表示
    controlNav:true, //1,2,3...
    controlNavThumbs:false, //下にサムネイルを使う場合
    controlNavThumbsSearch: '.jpg',
    controlNavThumbsReplace: '_thumb.jpg',
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //オンマウスで画像が止まる
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){} 
    });
  });
</script>
effectの種類については以下のとおりです。
• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random
最後にbody部分を書いてあげると完成です。
<div id="slider">
  <img src="images/up.jpg" alt="" />
  <img src="images/monstersinc.jpg" alt="" />
  <img src="images/nemo.jpg" alt="" title="This is an example of a caption" />
  <img src="images/walle.jpg" alt="" />
</div>
3つ目の画像のように画像にタイトルをつけると下にその内容が表示されます。最後に今回使用した画像をまとめてみたのでぜひご利用ください。
フィードやTwitterで最新情報をチェック

最新エントリーはフィードやTwitterでチェックできますので、ぜひご登録お願いします。

  
この記事に付いているタグの最新記事一覧
loading...
コメント
はじめまして。
WEB関係のブログを始めて、このページに使われているソースコードを表示する窓(?)を付けてみたいのですが、やり方がよくわからないので、おしえていただけないでしょうか。

解説しているサイトのURLでも構いません。
よろしくお願いします。
【2010/10/03 02:09】 | takuyamato3415 #Z3sKfwsA | [edit]
すごくわかりやすかったです!ありがとうございます。
【2010/12/01 17:41】 | moca #- | [edit]
はじめまして。
写真を撮って自分のHPに載せて楽しんでいる定年を過ぎたオジサンです。
写真の表示でスライドショーで掲載するのですがサムネイル作ったり編集するのが苦痛になりflash系の気に入ったフリーの簡単なスライドショーツールを使っていたらWindowsPCでは良いのですがipadではflashは作動せずでjavascript系のツールを捜して使い始めてました。操作性やデザインが気に入らなく捜してこの「Nivo slider」を見つけて説明に従って使ってみました。
操作性は気に入っています。
2点わからないことがあり、お教えて頂ければありがたいのですが・・・。
1)WindowsPCでは意図した様に表示できますが、それをipadで表示すると
 写真画像が画面の中央に表示されず左側に寄って表示されてしまいます。
 HTMLのalignやcssのpositionをabsolute⇔relativeと変えたりして見まし
 たが変わらずです。
 画像にカーソル当てると操作で画像の次、前の表示はできますがカーソル
 外しても自動に戻りません。
 http://tsutomu3.com/11year/0630rinseiji/sasayuri.html
2)写真画像の周りにhtmlの<table>で額縁を付けると、画像のタイトルが中央でなくて左詰めになり、その部分の画像の透過率が0になってしまいます。
(windowsPCの場合)
ipadでは、1)と異なり中央に表示されます。
画像にカーソル当てると操作で画像の次、前の表示はできますがカーソル
外しても自動に戻らないのは、1)と同じです。
 http://tsutomu3.com/11year/0630rinseiji/sasayuri_new.html

よろしくお願いいたします。
【2011/07/08 17:32】 | Tsutomu #a/DvULaM | [edit]
Tsutomuさん、はじめまして。
長野はいいところですね~。
去年初めて夏に行きましたが、夏もいいところでした。

1点目については38行目の
<DIV ALIGN="CENTER">

<div style="width:720px; marign:0 auto;">
に変更してあげると真ん中に表示されると思います。

以前このブログでも紹介しているのでこちらをご参考に
http://weboook.blog22.fc2.com/blog-entry-260.html#c1


画像のタイトルというのは画像の下の方にあるものでしょうか?
でしたら、以下のCSSの追加で真ん中によると思います。
.nivo-caption{text-align:center;}​


透過についてIEはopacityに対応できていないことが問題かもしれません。
どうしてもieに対応させる場合は以下のページなんかをご参考にしてください。
http://weboook.blog22.fc2.com/blog-entry-260.html#d-3


ちょっと見当違いの答えもあるかもしれませんが
ご参考になれば幸いです。
【2011/07/09 09:42】 | 管理人 #E2ywrYdA | [edit]
参考にさせて頂きます。(不勉強で済みませんです(;_;))

画像のタイトルはご指摘のものです。

ご丁寧に対応をありがとうございました。
【2011/07/10 13:54】 | Tsutomu #a/DvULaM | [edit]
よかったです。
うまくいくことを願っています~
【2011/07/14 17:46】 | 管理人 #- | [edit]
はじめまして!
「jquery スライドショー」のキーワードで訪問させて頂きました。
こちらのご紹介のおかげで無事にスライドショー組み込むことが出来ました。

ただ、苦戦したのがControlNavやControlDirectionNavの部分でした。
本日2011年8月23日現在でのNivo-SliderからダウンロードしたZipに
入っていたCSSだと、テキスト表示になってしまい、
管理人さんが記載されている補足部分を追加した上で
競合しているClassを削除して解決することが出来ました。

というわけで参考ばかりにこちらで継ぎ接ぎしたものを掲載しておきたかったのですが、
FC2の仕様でスパム判定されてしまったので割愛させて頂きます。。

またこちらのブログ、お邪魔させて頂きます!
【2011/08/23 16:24】 | QN #- | [edit]
QNさん
お役に立ててよかったです。
バージョンアップが盛んなようで、その都度仕様が変わるみたいですね。

このブログは70%以上が英数字だとスパム判定されるようにしています。
せっかくなのにすいません。

またお立ち寄りください。
【2011/08/28 22:08】 | 管理人 #E2ywrYdA | [edit]
こちら参考になります!
申し訳ございませんが一点確認させてください。

うまく動いたもの、インターネット環境の遅いパソコンでは
最初の1秒間設定した画像が上から下まで並んでしまいます。

これを無くし、最初から1点だけまとめておくという方法はどうすればよろしいでしょうか?
【2013/10/30 00:29】 | dt #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけましたら幸いです。技術的なご質問には答えられないことが多いかと思います。

トラックバック
トラックバックURL:
Latest Articles
Popular Articles
  • このエントリーをはてなブックマークに追加