杨小杰博客提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

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

Young小杰2018-1-9 14:34网站搭建 (8)680已收录小标签: lightbox 看图插件 原创

    之前移植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大小:136.26KB | 来源:本地下载 | 下载次数:

评论排行榜

(切勿水评,一经发现封IP)

评论:

评果 Maxthon 5.2.2.1000 Windows 7广东省广州市 电信 2018-05-13 12:28
有没有插件直接一点的呀(*/ω\*)
Young小杰四川省 电信 2018-05-13 12:29
@评果:插件不好搞
林哲 Google Chrome 55.0.2883.87 Windows 7湖北省荆州市 电信 2018-02-28 06:38
来支持一下
风神小站 SouGou Browser 2.X 非主流操作系统新疆 联通 2018-01-16 14:39
哎,我的友链也没了对方不想跟你说话并向你丢了一朵小黄花献花
Young小杰局域网 对方和您在同一内部网 2018-01-16 19:36
@风神小站:没了
小河 Google Chrome 53.0.2785.104 非主流操作系统上海市闸北区 电信 2018-01-09 17:26
喜欢自带的uc大图浏览。
7788资源网 Google Chrome 39.0.2171.95 Windows 7福建省福州市 电信 2018-01-09 14:40
7788资源网-------路过-------www.7788ners.com
Young小杰四川省成都市 电信 2018-01-09 17:30
@7788资源网:到底是路过还是打广告

发表评论:

签到 赞赏 丢小花 请勾选我再发表评论!