如何通过Widgetkit让你的图片具有lightbox效果

Widgetkit是一款强大的wordpress主题扩展插件，国人翻译为中文工具箱。这个工具箱功能非常强大，感兴趣的朋友可以看看点金主题网的首页，幻灯片和下面的文字集就是通过Widgetkit实现的。今天我要告诉大家的是通过Widgetkit让你的图片具有lightbox效果。这个效果是目前做产品展示的主题一个必备的功能。

1、首先你必须安装了Widgetkit。

2、然后加入data-lightbox=”on”即可

<a data-lightbox="on" href="image_lb.jpg"><img src="image.jpg" width="180" height="120" alt="" /></a>

3、现在预览一下，是不是效果出来了。

本站预览：https://www.dianjin123.com/gerenwangzhanyuanma/2470.html

如果你想创建一组图像或视频，可以通过下面方法实现：

<a data-lightbox="group:mygroup" href="image1_lb.jpg"><img src="image1.jpg" width="180" height="120" alt="" /></a>
<a data-lightbox="group:mygroup" href="image2_lb.jpg"><img src="image2.jpg" width="180" height="120" alt="" /></a>

红色的就是你要增加的。

这个widgetkit的lightbox还允许你为lightbox增加效果：

<a data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="http://www.google.com">Lightbox</a>

下面是一些参数说明：

• titlePosition – 标题显示方式? (float, outside, inside 或 over)
• transitionIn – 转场开始. (fade, elastic, 或 none)
• transitionOut – S转场结束 (fade, elastic, or none)
• overlayShow – 叠加设置 true 或 false
• width – 设置宽度，单位像素
• height – 设置高度，单位像素
• padding – 设置内边距，单位像素