搜索附件  
吾侪 附件中心 吾侪生活 Discuz! lightgallery.js-master.zip

板块导航

热门下载

lightgallery.js-master.zip

 

discuz图片灯箱插件:
discuz图片灯箱插件
https://www.cnblogs.com/diaoniwa/p/6628878.html


该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:



在浏览器中显示的效果:



从图中可以看出,当用户点击“我的相册”中某一张图片时,则采用“灯箱”的方式显示选中图片,在显示图片时,还可以切换上下张和自动播放及关闭图片。



复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>图片灯箱插件</title>
        <link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
    </head>
   
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">我的相册</span>
            </div>
            <div class="content">
                <div class="divPics">
                    <ul>
                        <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
                            <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
                            <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
                        </a></li>
                        <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
                            <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $(".divPics a").lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });
        </script>
    </body>
</html>
https://www.jq22.com/jquery-info314


没有字幕,导航按钮或默认的背景覆盖。没有什么会分散用户的主要视线。

文件只有4KB大小。

可扩展和可配置的,如果默认的功能是不够的,你可以很容易地扩展插件自定义JavaScript函数,更改设置或使用了几个有用的方法的功能

反应灵敏,触摸友好。最热门话题的网页设计,他们都在这里。图片适合任何屏幕尺寸,对触摸功能的设备。

iOS,Android和Windows Phone兼容。除了Safari浏览器,浏览器,Firefox,Opera和IE浏览器的桌面版本。

jQuery的1.x和2.x兼容

https://github.com/sachinchoolur/lightgallery.js

与键盘。交互标准,但重要的箭头向左,向右键来切换图像和Esc键退出灯箱
https://blog.csdn.net/intcry/article/details/5943398

jQuery灯箱插件lightBox使用方法

https://www.discuz.net/thread-332932-1-1.html

来源:
http://www.huddletogether.com/projects/lightbox2/

□■按此看范例■□

只要点那个图就知道咯~

我的论坛已经整合叻= =||不过要注册...闲着没事的可以来看看
表说我打广告..
http://yapayapa.com

说明:此插件可以美化图片预览效果,我把它在DZ的代码放出来~希望大家喜欢~~
同时,请注意以下问题:
*1.对于本站附件一般都能显示,可是对于图片链接,如果图太大,将会造成在窗口打开~
*2.对于壁纸或者照片那些,类似的大图片,原始图过大会导致点击图片后响应速度很慢,虽然配有loading,但是无法关闭半透明的展示图层.所以请斟酌使用~
*3.此插件不会影响论坛速度,只有点图片才有响应~


一般适用于所有页面
对DZ的修改
1.header.htm中

{template css}下面加上

  • <script type="text/javascript" src="js/prototype.js"></script>
  • <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  • <script type="text/javascript" src="js/lightbox.js"></script>
  • <script language="JavaScript" src="include/common.js"></script>
  • <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

[color=rgb(51, 102, 153) !important]复制代码



2.viewthread.htm

寻找

  • <img src="attachment.php?aid=$attach[aid]&noupdate=yes" border="0">

[color=rgb(51, 102, 153) !important]复制代码



之前加入

  • <a href="attachment.php?aid=$attach[aid]&noupdate=yes" rel="lightbox">

[color=rgb(51, 102, 153) !important]复制代码



再找

  • onclick="if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}"

[color=rgb(51, 102, 153) !important]复制代码



将上面语句删除(避免和href代码冲突!)

最后找

  • onmousewheel="return imgzoom(this);">

[color=rgb(51, 102, 153) !important]复制代码



在其后加入

  • </a>

[color=rgb(51, 102, 153) !important]复制代码



-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------

寻找
  • <img src="$attachurl/$attach[attachment]" border="0">

[color=rgb(51, 102, 153) !important]复制代码



之前加入
  • <a href="$attachurl/$attach[attachment]" rel="lightbox">

[color=rgb(51, 102, 153) !important]复制代码




再找
  • onclick="if(!this.resized) {return false;} else {window.open('$attachurl/$attach[attachment]');}"

[color=rgb(51, 102, 153) !important]复制代码



将上面语句删除(避免和href代码冲突!)

最后找

  • onmousewheel="return imgzoom(this);">

[color=rgb(51, 102, 153) !important]复制代码



在其后加入

  • </a>

[color=rgb(51, 102, 153) !important]复制代码




3.include/discuzcode.func.php

查找
  • <img src=\"attachment.php?aid=$attach[aid]&noupdate=yes\" border=\"0\" onload=\"if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.alt='$language[attach_img_zoom]';}\" onmouseover=\"if(this.resized) this.style.cursor='hand';\" onclick=\"if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}\" onmousewheel=\"return imgzoom(this);\">" : "<img src=\"$attachurl/$attach[attachment]\" border=\"0\" onload=\"if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.alt='$language[attach_img_zoom]';}\" onmouseover=\"if(this.resized) this.style.cursor='hand';\" onclick=\"if(!this.resized) {return false;} else {window.open('".addslashes("$attachurl/$attach[attachment]")."');}\" onmousewheel=\"return imgzoom(this);\">");

[color=rgb(51, 102, 153) !important]复制代码



之前加入
  • <a href=\"attachment.php?aid=$attach[aid]&noupdate=yes\" rel=\"lightbox\">

[color=rgb(51, 102, 153) !important]复制代码



再找
  • onclick=\"if(!this.resized) {return false;} else {window.open('attachment.php?aid=$attach[aid]');}\"

[color=rgb(51, 102, 153) !important]复制代码


将上面语句删除(避免和href代码冲突!)

最后找
  • onmousewheel=\"return imgzoom(this);\">

[color=rgb(51, 102, 153) !important]复制代码



在其后加入

  • </a>

[color=rgb(51, 102, 153) !important]复制代码




查找
  • "bbcodeurl('\\1', '<img src=\"%s\" border=\"0\" onload=\"if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.alt=\'Click here to open new window\\nCTRL+Mouse wheel to zoom in/out\';}\" onmouseover=\"if(this.width>screen.width*0.45) {this.resized=true; this.width=screen.width*0.45; this.style.cursor=\'hand\'; this.alt=\'Click here to open new window\\nCTRL+Mouse wheel to zoom in/out\';}\" onclick=\"if(!this.resized) {return true;} else {window.open(\'%s\');}\" onmousewheel=\"return imgzoom(this);\">')",

[color=rgb(51, 102, 153) !important]复制代码



之前加入
  • <a href=\"%s\" rel=\"lightbox\">

[color=rgb(51, 102, 153) !important]复制代码



再找
  • onclick=\"if(!this.resized) {return true;} else {window.open(\'%s\');}\"

[color=rgb(51, 102, 153) !important]复制代码


将上面语句删除(避免和href代码冲突!)

最后找
  • onmousewheel=\"return imgzoom(this);\">

[color=rgb(51, 102, 153) !important]复制代码



在其后加入

  • </a>

[color=rgb(51, 102, 153) !important]复制代码



最后把压缩文件传送到根目录即可


完成

[ 本帖最后由 myavril 于 2006-7-4 19:38 编辑 ]








邮箱|首页|小黑屋|吾侪 ( 蜀ICP备2020029307号-4 )

GMT+8, 2025-10-20 19:26 , Processed in 0.084282 second(s), 15 queries , APCu On.

Powered by Discuz! X3.5

Copyright © , 吾侪网

返回顶部