首页 Emlog一款lightbox图片幻灯片浏览插件

Emlog一款lightbox图片幻灯片浏览插件

林哲 2018-1-12 0 百度收录:已收录 1514

来自杨小杰博客

之前移植emlog时就发现lightbox图片幻灯片浏览插件了,因为移植过程中出现了很大的困难,所以没有及时把教程写出来,今天抽空再研究了一下,才把这个lightbox图片幻灯片浏览插件教程写出来

    如果你要使用这款插件,那么一定需要引用jquery插件库,但是jquery的版本不能太高,版本过高不能正常使用,推荐jquery.min.js-1.7.1的版本,附件中也是1.7.1的版本

    其次你需要引用一个jquery.lightbox.css和一个jquery.lightbox.min.js这两个就是lightbox图片幻灯片浏览插件的关键,大致如下:

<script src="jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="lightbox/themes/default/jquery.lightbox.css" /> <script type="text/javascript" src="lightbox/jquery.lightbox.min.js"></script>
    具体路径请自行调整
    其次你需要写一个js挂载点,大概内容如下:
<!--幻灯片挂载--> <script type="text/javascript"> $(function($){ $(".acd a").has("img").each(function() { $(this).lightbox(); $(this).attr("rel","xygroup"); }); }); </script>
    然后放上一段引用图片的标准格式:
<div class="acd"><a href="图片地址" rel="xygroup"><img src="图片地址" ></a></div>
讲解一下:
  1. .acd是div的class可以任意更改,但是一定要匹配
  2. a标签是必须的,只有a标签才能引导幻灯片插件加载其链接的图片出来
  3. rel=”xygroup”也是必须加在a标签中的,如果a标签中没有rel=”xygroup”,幻灯片也是不能被成功加载的
上面的演示就是十分基础的演示了
    有的朋友会说了,如果插入图片的时候没有给img标签加a标签,那么应该怎么使用呢?
这个问题也是我在emlog移植到wordpress时遇到的问题,wordpress插入的图片是不包含a标签的,我们也不可能说每插入一个img图片就去改代码加a吧
    在我苦苦寻觅中,找到了这段代码,可以完美解决这个问题:
<!--给图片嵌套a标签--> <script type="text/javascript"> jQuery(document).ready(function($){ $('.acd img').each(function(i){ if (! this.parentNode.href) { $(this).wrap("<a href='"+this.src+"'></a>"); } }); }); </script>
    老样子,把.acd与你的div中的class匹配一下,然后你再看就会发现img被a标签包围了
    附件中有一个demo演示和需要用到的js、css


一款lightbox图片幻灯片浏览插件

lightbox图片幻灯片浏览插件大小:136K | 来源:蓝奏网盘
已经过安全软件检测无毒,请您放心下载。

#Emlog##Emlog图片幻灯片插件#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
赞赏作者
打赏作者 微信打赏
作者: 林哲 本文最后编辑于2018-1-12 09:56:14
林哲

一个草根站长,本站全部内容来源网络,有事联系QQ1420193311

作者的微博

发表评论