スライドショー「NivoSlider」
'15.11.25以下のスクリプトをダウンロード
HTMLのスライドショーを表示したい部分に以下を挿入
<div class="theme-default"> <div id="slider" class="nivoSlider"> <img src="/materias/画像ファイル" data-thumb="/materias/画像ファイル" alt=""> <a href="任意のURL"><img src="/materias/画像ファイル" data-thumb="/materias/サムネイル画像" alt="" title="キャプション文字列"></a> <img src="/materias/画像ファイル" data-thumb="/materias/サムネイル画像" alt="" data-transition="slideInLeft"> <img src="/materias/画像ファイル" data-thumb="/materias/サムネイル画像" alt="" title="#htmlcaption"> </div> <div id="htmlcaption" class="nivo-html-caption">キャプション文字列</div> </div>
キャプションにリンクや装飾を含めたい場合は「title」タグに「#htmlcaption」を書き込み、DIV内で記載
HTMLの</body>タグの直前に以下を挿入
<script src="/js/jquery-1.7.1.min.js"></script> <script src="/js/jquery.nivo.slider.js"></script> <script> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
CSSに以下を追記
.theme-default .nivoSlider { position:relative; background:#fff url(/materials/loading.gif) no-repeat 50% 50%; margin-bottom:0px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; } .theme-default .nivoSlider img { position:absolute; top:0px; left:0px; display:none; } .theme-default .nivoSlider a { border:0; display:block; } .theme-default .nivo-controlNav { text-align: center; padding: 20px 0; } .theme-default .nivo-controlNav a { display:inline-block; width:22px; height:22px; background:url(../images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin: 0 2px; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; } .theme-default .nivo-directionNav a { display:block; width:30px; height:30px; background:url(../images/arrows.png) no-repeat; text-indent:-9999px; border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0; right:15px; } .theme-default a.nivo-prevNav { left:15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; } .theme-default .nivo-controlNav.nivo-thumbs-enabled { width: 100%; } .theme-default .nivo-controlNav.nivo-thumbs-enabled a { width: auto; height: auto; background: none; margin-bottom: 5px; } .theme-default .nivo-controlNav.nivo-thumbs-enabled img { display: block; width: 120px; height: auto; } .nivoSlider { position:relative; width:700px; height:auto; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; } /* 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%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } /* Caption styles */.nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; width:100%; z-index:8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter:alpha(opacity=8); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */} .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */.nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */.nivo-controlNav { text-align:center; padding: 15px 0; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }
(View1701)