基于jQuery的Lightbox-balupton图片展示插件
作者:佳明妈 来源:懒人建站 2010-02-05 人气:
基于jQuery的Lightbox-balupton图片展示插件的原作者:Benjamin Arthur Lupton
http://jquery.com/plugins/project/jquerylightbox_bal
在您页面的头部head中嵌入如下如下代码链接必须的JavaScript文件。 <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>
前面一个JavaScript文件表示JavaScript库,后面一个是lightbox插件。这里的链接路径根据您的实际情况进行修改。
引用实例:
一、自动创建lightbox组
<p>
<a href="img/mm1.jpg" rel="lightbox-tour" title="张含韵小美女">
<img src="img/mm1-s.jpg" />
</a>
<a href="img/mm2.jpg" rel="lightbox-tour" title="某不知名美女1">
<img src="img/mm2-s.jpg" />
</a>
<a href="img/mm3.jpg" rel="lightbox-tour" title="某不知名美女2">
<img src="img/mm3-s.jpg" />
</a>
<a href="img/mm4.jpg" rel="lightbox-tour" title="某不知名美女3: 谢谢,这是最后一张图片">
<img src="img/mm4-s.jpg" />
</a>
</p>
二、独立的lightbox效果
<p>
<a href="img/mm1.jpg" rel="lightbox-myGroup" title="张含韵小美女">
<img src="img/mm1-s.jpg" />
</a>
<a href="img/mm2.jpg" rel="lightbox-myGroup" title="某不知名美女1">
<img src="img/mm2-s.jpg" />
</a>
<a href="img/mm3.jpg" rel="lightbox-myGroup" title="某不知名美女2">
<img src="img/mm3-s.jpg" />
</a>
<a href="img/mm4.jpg" rel="lightbox-myGroup" title="某不知名美女3: 谢谢,这是最后一张图片">
<img src="img/mm4-s.jpg" />
</a>
</p>
三、手动创建分组
<p id="manualGroup">
<a href="img/mm1.jpg" title="张含韵小美女">
<img src="img/mm1-s.jpg" />
</a>
<a href="img/mm2.jpg" title="某不知名美女1">
<img src="img/mm2-s.jpg" />
</a>
<a href="img/mm3.jpg" title="某不知名美女2">
<img src="img/mm3-s.jpg" />
</a>
<a href="img/mm4.jpg" title="某不知名美女3: 谢谢,这是最后一张图片">
<img src="img/mm4-s.jpg" />
</a>
</p>
更多示例查看 演示
jQuery Lightbox-balupton图片展示插件 演示 http://www.51xuediannao.com/uploads/soft/Plug/balupton/demo.html
基于jQuery的Lightbox-balupton图片展示插件由懒人建站收集整理,您可以自由传播,请主动带上本文链接
懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。
- 上一篇:图片裁切效果JS控件
- 下一篇:只允许输入汉字的输入框JS代码
基于jQuery的Lightbox-balupton图片展示插件-最新评论