如何通过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 – 标题显示方式? (floatoutsideinside 或 over)
  • transitionIn – 转场开始. (fadeelastic, 或 none)
  • transitionOut – S转场结束 (fadeelastic, or none)
  • overlayShow – 叠加设置 true 或 false
  • width – 设置宽度,单位像素
  • height – 设置高度,单位像素
  • padding – 设置内边距,单位像素

微信扫一扫,关注微信公众号,获取最新资讯

留下回复

您的电邮不会被公布 必填字段标记为*