WordPress轻松实现图片缩略图幻灯展示效果的插件推荐

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插件的参数还有许多,有爱好的兄弟能够到插件官网主页进行深化知道,需求注意的是,为了作用上的规整和漂亮,有关的图像尽量在上载到相册中之前,能把尺度处理成共同