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

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