WordPress插件实现图片缩略图幻灯展示效果

在使用WordPress制作企业网站的过程中，经常会因为要展示某个产品的细节效果图，而需要在产品详细页中插入多张图片。但是如果单纯的把图片一张张从上往下插入的话，对于用户的阅读体验而言可能会大打折扣。好在WordPress有很多功能插件，可以帮助我们很轻松的实现多样化的相册展示效果，今天就来介绍一下如何利用插件实现产品缩略图幻灯展示。

 上面是大致的效果图：

 现在实现的结构就是大图下方有一系列的小图片，点击的时候进行幻灯切换，过度效果可以在插件中自行设置。在此我们需要用到两个插件，一个是大名鼎鼎的NextGEN Gallery，基本上推荐WordPress相册插件的文章都会提到它；第二个算是NextGEN Gallery的衍生产品，用于生成幻灯效果的JJ NextGen JQuery Slider插件。

 首先安装好这两个插件。先在NextGEN Gallery中创建一个Gallery相册图集比如名称为“demo”，并上传若干相应的图片，至于几张合适，就要视乎幻灯中大图的宽度能容纳多少张缩略图及间隙的宽度总和了。

 

接下来我们记下这个Gallery相册的ID号，比如demo图集的ID号为8的话，那么我们就可以在产品介绍页面中插入以下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" ]

 

大致的解释一下里面一些参数的意思：

1.gallery：其值指的是此处应用幻灯效果的NGG相册ID号；

2.width和height：幻灯中大图所占区域的尺寸；

3.controlnavthumbs：以缩略图的形式进行幻灯导航切换控制；

4.thumbsheight和thumbswidth：缩略图的尺寸；

5.thumbscontainerheight：大图下方缩略图容器的高度，需要比缩略图本身高度大一点；

6.thumbsgap：缩略图之间的间距，以px为单位；

 

JJ NextGen JQuery Slider插件的参数还有很多，有兴趣的朋友可以到插件官网主页进行深入了解，需要注意的是，为了效果上的整齐和美观，相关的图片尽量在上传到相册中之前，能把尺寸处理成一致。