エフェクトがかっこいい画像スライドショー – nivo slider –
メインビジュアルで使える、画像のスライドショーを紹介したいと思います。
Nivo Sliderというエフェクトがかっこよくて豊富なプラグインです。
ダウンロード先は以下から
Nivo Slider – The World’s Most Popular jQuery & WordPress Image Slider
このプラグインでできることを簡単に説明します。
・画像のスライドショー（エフェクトが16種類！）
・スライドのコントローラーをつける(例：1,2,3,4 クリックするとその画像に移動)
・前へ、次へのボタンを設置
・スライド画像のサムネイルを設置(サムネイル画像は自分で作成しないといけない)
・画像の説明文をつけることができる
こんな感じです。
細かい設定もできますが、それは後ほど。
デモを作りましたので、ご覧下さい。
Nivo Sliderの使い方
まずは、上記サイトからダウンロードします。
ダウンロードしたファイルのjquery.nivo.slider.js,nivo-slider.cssをhead内に読み込みます。
|
1 2 3 | <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> |
nivo-slider.cssは自分で調節する必要があるかと思います。
そして、さらに、
|
1 2 3 4 5 | <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> |
を記載します。
htmlは、
|
1 2 3 4 5 6 | <div id="slider" class="nivoSlider"> <img src="" alt="" /> <img src="" alt="" /></a> <img src="" alt="" /> <img src="" alt="" /> </div> |
基本的にこれだけで大丈夫です。
画像をどこかへリンクさせたい場合は、
aタグで囲み、aタグのclassに、 nivo-imageLink をつけます。
また、キャプション(説明文)を付けたい場合は、imgのtitleタグに記載します。
デモのソースは以下になります。
デモはhtml5で書いています。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <link rel="stylesheet" href="css/nivo-slider.css" > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('.slide').nivoSlider({ effect: 'random', // エフェクトの設定 slices: 8, // アニメーション時のスライスの数 boxCols: 15, // アニメーション時の横の四角の数 boxRows: 10, // アニメーション時の縦の四角の数 animSpeed: 500, // スライドのアニメーションのスピード pauseTime: 5000, // 次のスライドに行くまでの表示時間 //startSlide: 0, // 最初のスライドの指定 directionNav: true, // 前へ次へのナビを表示 directionNavHide: false, // trueでマウスオン時、falseで常に表示 controlNav: true, // trueで1,2,3・・・と表示、falseで非表示 controlNavThumbs: false, // サムネイル画像を表示するか trueにするとcontrolNavは表示されなくなる controlNavThumbsFromRel: true, // スライド画像のrelにサムネイルの画像を指定する場合はtrue,falseの場合は下の２つの設定になる controlNavThumbsSearch: '.jpg', //画像の拡張子 controlNavThumbsReplace: '_thumb.jpg', // スライドの画像の名前 + _thumb.jpgがサムネイルになる keyboardNav: true, // キーボード左、右でスライドを操作 pauseOnHover: true, // 画像にマウスオンすると、ストップする manualAdvance: false, // Force manual transitions captionOpacity: 0.8, // キャプションの背景の透過度を設定 prevText: '<', // 前へボタンのテキスト nextText: '>', // 次へボタンのテキスト randomStart: false, // 最初のスライドをランダムで設定 startSlideを設定していると適用されない beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script> |
ちなみにエフェクトの種類は下記の設定があります。
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
HTML
|
1 2 3 4 5 6 7 8 | <div id="mainVisual"> <div class="slide"> <a href="" class="nivo-imageLink"><img src="photo1.jpg" alt="" /></a> <img src="photo2.jpg" alt="" title="説明文を入れることも可能です。" /> <a href="" class="nivo-imageLink"><img src="photo3.jpg" alt="" /></a> <img src="photo4.jpg" alt="" /> </div> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | /* * jQuery Nivo Slider v2.7.1 * http://nivo.dev7studios.com * * Copyright 2011, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ #mainVisual { background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 70%, #d5d5d5 80%, #cacaca 80%, #eeeeee 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(80%,#f3f3f3), color-stop(80%,#f3f3f3), color-stop(80%,#fefefe), color-stop(100%,#fefefe)); background-color: #DDDDDD; width: 100%; text-align: center; color: #FFF; border-bottom: 2px solid #FC0; margin-bottom: 20px; padding: 20px 0 40px; } .slide { width: 900px; margin: 0 auto; position: relative; box-shadow: 0px 3px 5px #999999; } .slide img { position: absolute; left: 0; top: 0; } /* 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:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* 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:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* 前へ、次へボタンのスタイル */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-directionNav a { font-size: 14px; text-decoration: none; background-color: #333333; color: #ffffff; padding: 0 8px 3px 8px; line-height: 28px; display: block; border: 1px solid #111111; border-radius: 3px; } .nivo-prevNav { left: -35px; } .nivo-nextNav { right: -35px; } /* コントロールのスタイル */ .nivo-controlNav { position: absolute; left:0; bottom: -28px; text-align: center; display: block; width: 100%; } /* 1,2,3,4ではなく丸にしています */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; text-indent: -9999px; display: inline-block; background-color: #ffffff; border-radius: 10px; width: 10px; height: 10px; box-shadow: 0px 0px 3px #999999; margin-right: 5px; } .nivo-controlNav a.active { font-weight:bold; background-color: #000000; } |
nivo-slider.cssを一部書き換えています。
エフェクトは豊富ですが、ひとつで設定すると、
なんか短調な感じがしてしまいますので、
randomに設定するのが良いのかもしれません。
Author Profile
スターフィールド編集部
SHARE
