html5中文学习网

您的位置: 首页 > 网站及特效实例 > jquery特效 » 正文

jQuery lightBox插件图片点击放大

[ ] 已经帮助:人解决问题
iD9HTML5中文学习网 - HTML5先行者学习网
运行代码    保存代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。

 iD9HTML5中文学习网 - HTML5先行者学习网

一、Lightbox Tour

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox-tour" title="张含韵小美女">

iD9HTML5中文学习网 - HTML5先行者学习网

简要说明iD9HTML5中文学习网 - HTML5先行者学习网

  • 这里a标签的rel值是lightbox-tour,JavaScript文件通过a标签的rel属性自动判断是否要执行lightbox效果
  • 显示的图片信息来自a标签的title属性,title内部的文字通过英文的":"冒号属性区分描述的标题和内容,标题样式为粗体,默认含图片链接,内容文字粗细正常,原项目CSS中此处字体大小为10px,但是对于中文而言,10px偏小,所以我已经改为12像素。
  • 大图的链接地址直接写在a标签的href上,有时HTML DOM tree尚未完全加载是点击a标签会直接打开图片,可以用name代替href解决这一问题,需修改原JavaScript文件。

二、自动创建lightbox组

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox-myGroup" title="张含韵小美女">

iD9HTML5中文学习网 - HTML5先行者学习网

简要说明iD9HTML5中文学习网 - HTML5先行者学习网

  • 这里a标签的rel值是lightbox-myGroup,所谓分组,就是JavaScript会将rel属性一致的a标签划分为一组。只要a标签的rel属性以"lightbox- * "为结构。都可以触发lightbox效果。所以这里的效果与上面Lightbox Tour是一样的,这里的rel改为"lightbox-my"也是一样的效果。

三、独立的lightbox效果

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox" title="张含韵小美女">

iD9HTML5中文学习网 - HTML5先行者学习网

简要说明iD9HTML5中文学习网 - HTML5先行者学习网

  • 与上面分组示例唯一的差别就是这里a标签的rel值是lightbox,没有任何后缀。这里的lightbox就是关键,当rel为lightbox时,JavaScript会将此a标签下的img图片当作一个独立的个体来处理,即没有“上一张”,“下一张”的图片切换。

四、手动创建分组

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" title="张含韵小美女">

$(function(){
	$("#manualGroup a").lightbox();		   
});

iD9HTML5中文学习网 - HTML5先行者学习网

简要说明iD9HTML5中文学习网 - HTML5先行者学习网

  • 这里与上面不同,上面的实例都是通过a标签的rel值判断是否是要应用lightbox效果。而这里没有rel属性,是手动创建分组,方法就是$("选择器").lightbox();
  • 本实例可以说是最简单的手动创建lightbox效果的例子了,lightbox效果还有其他的些方法,下面会有简要介绍。

五、一些参数使用举例

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" title="张含韵小美女">

$(function(){
    $("#paramsTest a").lightbox();	
    //------------------
    $.Lightbox.construct({
        show_linkback: false,
        opacity: 0.6,
        text: {
            image: '照片'
        }
    });		   
});

iD9HTML5中文学习网 - HTML5先行者学习网

简要说明iD9HTML5中文学习网 - HTML5先行者学习网

  • 这里示例的几个参数有三个,依次表示:是否显示右上角的反向链接(false不显示),黑色覆盖层透明度(0.6,默认是0.9),其中的一个文字替换为“照片”(原来是“图片”,原项目js中为"image")
  • 为了显示效果是由于这里的点击失效的,所以js代码中添加了一个简单的判读。
(责任编辑:html5先行者
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助