如何添加 Nivo Slideshow 到您的網站?

相關文章

Canva 免費雲服務圖片處理工具，易用又有用

29 1 月, 2017

短片製作 YouTube 現場錄製影片如何清除背景噪音

31 12 月, 2016

HTTPS 加密連線和免費 SSL 證書，更安全更利搜尋排名

21 10 月, 2016

如何添加 Nivo Slideshow 到您的網站? 我們使用 Web Page Maker 作為一個例子。

1. 解壓 nivoslider.zip 並上傳到 Web 服務器

2. 在 WPM 選擇菜單 “Insert” -> “HTML code …”, 鍵入以下:

<div id="slider3" style="width:960px;height:380px;">
 <img src="images/slideshow/slide-001.jpg" width="941" height="380" alt="" title="NextSpeak Mandarin TTS"/>
 <img src="images/slideshow/slide-002.jpg" width="941" height="380" alt="" title="NextOffice USB Edition"/>
 <img src="images/slideshow/slide-003.jpg" width="941" height="380" alt="" title="NextPDF + FormFiller"/>
 <img src="images/slideshow/slide-004.jpg" width="941" height="380" alt="" title="NextOffice 2010 Professional Edition"/>
 <img src="images/slideshow/slide-005.jpg" width="941" height="380" alt="" title="Newly launched Training Service"/>
 </div>
 <div id="htmlcaption">
 <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
 </div>
 <script type="text/javascript">
 jQuery(window).load(function() {
    jQuery("#slider3").nivoSlider({
       effect:"random",
       slices:5,
       boxCols:8,
       boxRows:4,
       animSpeed:500,
       pauseTime:3000,
       startSlide:0,
       directionNav:true,
       directionNavHide:true,
       controlNav:true,
       controlNavThumbs:false,
       controlNavThumbsFromRel:true,
       keyboardNav:true,
       pauseOnHover:true,
       manualAdvance:false
    });
 });
 </script>

3. In WPM, 選擇菜單”Format” -> “Page Properties” -> “Header”

<!--CSS FILES STARTS-->
 <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"/>
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
 <!--JS FILES STARTS-->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <!-- JQUERY -->
 <script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.js"></script>

4. 上傳你的圖片取代 image/slideshow/ 中的幻燈片範例。
5. 如果你想一個不同的的幻燈片大小，修改 941×380。