在DedeCMS5.5中实现LightBox2.0效果

LightBox介绍
LightBox图片展示效果的出现,改变了传统的图片浏览方式,极大地提高了用户的体验。LightBox的原理是通过jQuery在当前页面之上弹出一个层,并遮挡非弹出层的部份(降低非弹出层的亮度),然后把图片显示在弹出层内,这种方式的好处就是查看图片的时候页面不会刷新,更不会跳到另一个窗口或标签。而且还有一个体验相当棒的功能,当你点击非弹出层的部份时,脚本会关闭LightBox的弹出层。

DedeCMS中运用LightBox也越来越广泛,我们要实现的效果就是不论在列表页还是内容页,都希望点击图片后能以LightBox效果来展现。

LightBox的调用方式很简单,Html代码为:

<a href=”” rel=”lightbox” title=””>image</a>

其中的title可要可不要,当然有对SEO更好。那么我们重点需要解决的是如何调用href的内容,也即是图片的url地址。

列表页调用方法为:

<a href=”[field:picname/]” rel=”lightbox” title=”[field:title/]”>[field:image/]</a>

内容页调用方法为:

<a href=”{dede:field name=’picname’/}” rel=”lightbox” title=”{dede:field name=’title’/}”>{dede:field name=’image’/}</a>

只要把上述代码加入到列表页或者内容页,就可以轻松实现lightbox效果了。

有一种方法是在DedeCMS中修改编辑器,也就是传说中的手工实现LightBox效果,那样很麻烦。使用我的这个方法可以实现后台自动调用了,可以看出调用的是缩微图,也就是说你可以只上传缩微图,而不用在内容页中再去手工配置图片链接地址。

当然,需要提醒大家的是,LightBox的配置是很重要的,没有配置对当然就实现不了这个效果了。如果你发现浏览器下方提示“页面错误”,那很有可能是网页中加载的JS有误。LightBox配置中,主要需要把lightbox.js这个文件中调用的2个图片的位置定义准确;lightbox.css这个文件是修改展示效果的,中间也有调用的图片,都要设置好位置,当然CSS文件中的图片哪怕地址没有设置对,问题也不大,主要会影响系列图片的展示,不会影响单个图片的展示。

 

未经允许不得转载:把控人生 » 在DedeCMS5.5中实现LightBox2.0效果

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址