無憂主機的客戶在使用WordPress制作企業(yè)網(wǎng)站的過程中，經(jīng)常會因為要展示某個產(chǎn)品的細節(jié)效果圖，而需要在產(chǎn)品詳細頁中插入多張圖片。但是如果單純的把圖片一張張從上往下插入的話，對于用戶的閱讀體驗而言可能會大打折扣。好在WordPress有很多功能插件，可以幫助我們很輕松的實現(xiàn)多樣化的相冊展示效果，今天無憂主機小編就來介紹一下如何利用插件實現(xiàn)產(chǎn)品縮略圖幻燈展示。 現(xiàn)在實現(xiàn)的結(jié)構(gòu)就是大圖下方有一系列的小圖片，點擊的時候進行幻燈切換，過度效果可以在插件中自行設(shè)置。在此我們需要用到兩個插件，一個是大名鼎鼎的NextGEN Gallery，基本上推薦WordPress相冊插件的文章都會提到它；第二個算是NextGEN Gallery的衍生產(chǎn)品，用于生成幻燈效果的JJ NextGen JQuery Slider插件。 1、首先安裝好這兩個插件。先在NextGEN Gallery中創(chuàng)建一個Gallery相冊圖集比如名稱為“demo”，并上傳若干相應(yīng)的圖片，至于幾張合適，就要視乎幻燈中大圖的寬度能容納多少張縮略圖及間隙的寬度總和了。 2、接下來我們記下這個Gallery相冊的ID號，比如demo圖集的ID號為8的話，那么我們就可以在產(chǎn)品介紹頁面中插入以下JJ NextGen JQuery Slider的簡碼： [jj-ngg-jquery-slider gallery="8" width="524" height="350" controlnavthumbs="nextgen_thumbs" thumbsheight="40" thumbswidth="40" thumbscontainerheight="50" thumbsgap="10" ] 無憂主機小編大致的解釋一下里面一些參數(shù)的意思： 1.gallery：其值指的是此處應(yīng)用幻燈效果的NGG相冊ID號； 2.width和height：幻燈中大圖所占區(qū)域的尺寸； 3.controlnavthumbs：以縮略圖的形式進行幻燈導(dǎo)航切換控制； 4.thumbsheight和thumbswidth：縮略圖的尺寸； 5.thumbscontainerheight：大圖下方縮略圖容器的高度，需要比縮略圖本身高度大一點； 6.thumbsgap：縮略圖之間的間距，以px為單位； 無憂主機小編溫馨提示: JJ NextGen JQuery Slider插件的參數(shù)還有很多，有興趣的朋友可以到插件官網(wǎng)主頁進行深入了解，需要注意的是，為了效果上的整齊和美觀，相關(guān)的圖片盡量在上傳到相冊中之前，能把尺寸處理成一致。 這樣無憂主機小編就完成網(wǎng)站的裝飾了，這樣會使我們的網(wǎng)站更加客戶體驗度喲，反正無憂主機小編感覺網(wǎng)站比以前是更加的智能化了，如果有和無憂主機小編一起愛好的站長朋友就動起手來吧！

本文地址：http://www.gle-technology.com/wordpress/15721.html