lightbox图片展示效果

1.lightbox

头部导入：

<script type="text/javascript" src="../Public/Js/prototype.js"></script>
<script type="text/javascript" src="../Public/Js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../Public/Js/lightbox.js"></script>
<link rel="stylesheet" href="../Public/css/lightbox.css" type="text/css" media="screen" />

使用一：单张图片

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

使用二：多张

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

使用三：点击一张，跳转到多张

单张代码：
<a href="{$r.thumb}" title="{$r.title}" rel="lightbox[{$r.id}]"><img src="{$r.thumb}" alt="{$r.title}"/></a>多张代码：
<span style="display: none"><a href="http://mhimg1.mnsfz.com/pic/meihuo/2014-4-17/1/1072419661367991439.jpg" rel="lightbox[1]"></a><a href="http://qcimg1.mnsfz.com/pic/qingchun/2014-4-9/1/1.jpg" rel="lightbox[1]"></a><a href="http://qcimg1.mnsfz.com/pic/qingchun/2014-4-9/1/10.jpg" rel="lightbox[1]"></a></span>

注意rel="lightbox[1]", 也可以是rel="lightbox[2]",rel="lightbox[3]",.... 其中的[] 是识别，是否是同一组图。

来源地址：http://d.lanrentuku.com/down/js/tupian-90/

转载于:https://www.cnblogs.com/wesky/p/3681065.html

lightbox图片展示效果相关推荐

div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...
如何用Jquery做图片展示效果
一. 前言到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
Revealing图片展示效果（jQuery）
Revealing图片展示效果(jQuery),单击"更多信息"按钮,图片的缩略图将展现为全尺寸图片和附加信息,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用 ...
html超酷图片墙特效代码,超酷超绚精美图片展示效果代码(一)
超酷超绚精美图片展示效果代码(一) [ 发布者:未知┊来源:网页特效观止┊时间:2008-08-12┊浏览: 人次 ] 相关图片自己下载,所有的图片路径都是类似 http://www.jscode.c ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
css图片6边形,CSS3 实现六边形Div图片展示效果
一. 效果图二. 原理讲解这个效果用到的主要知识点 : 1. transform: rotate(120deg); 图片旋转 2. overflow: hidden; 超出隐藏 3. visibi ...

lightbox图片展示效果

lightbox图片展示效果相关推荐

最新文章

热门文章