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 #</a>

使用二:多张

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

lightbox图片展示效果的更多相关文章

  1. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  2. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  3. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  4. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  5. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  6. html/css 图片展示效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. Lightbox 图片展示插件

    html <a href="<?php echo RESOURCES_BASE_FOLDER;?>image/default_pic.jpg" target=&q ...

  8. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  9. css实现六边形图片(最简单易懂方法实现高逼格图片展示)

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

随机推荐

  1. [转] ServletContext 与application的异同

    相同:其实servletContext和application 是一样的,就相当于一个类创建了两个不同名称的变量.在 servlet中ServletContext就是application对象.大家只 ...

  2. iOS开发小技巧--iOS中设置applicationIconBadgeNumber遇到的问题

    iOS中设置applicationIconBadgeNumber 在iOS7中直接设置applicationIconBadgeNumber没有问题,但是在iOS8之后设置applicationIcon ...

  3. iOS开发遇到的错误 -- Label显示多行文字导致宽度和高度的问题

    Label的宽度问题 注意:UILabel下面需要设置preferredMaxLayoutWidth ,设置了autolayout和numberofline的UIlabel才显示多行 label宽度的 ...

  4. open-flash-chart2

    链接 http://www.oschina.net/news/10797/Open-Flash-Chart-2-0 open-flash-chart.rar http://123-reg-suspen ...

  5. eclipse-插件安装的三种方式

    (前两种安装方式以多国语言包的安装为例) 1.  普通安装:用直接解压的安装方式来实现 解压插件到某个文件夹 将下载的插件文件解压到 Eclipse 的安装目录下 如插件文件为多国语言包: NLpac ...

  6. subroutines of perl

    #!/usr/bin/perl -w @students = qw/Doreen Oskar Elin Sangeet Malin/; &next_student; &next_stu ...

  7. BZOJ 4325: NOIP2015 斗地主

    4325: NOIP2015 斗地主 Time Limit: 30 Sec  Memory Limit: 1024 MBSubmit: 684  Solved: 456[Submit][Status] ...

  8. [模板] 2-SAT

    昨天早上在准备省队集训,发现自己连2-SAT是什么都不知道,于是一早上都投身于2-SAT模板中,终于有个结果. 思路如下: 1.根据条件表达式建边: 2.缩环: 3.判断是否可行: 4.根据缩完环的图 ...

  9. 【BZOJ-4569】萌萌哒 ST表 + 并查集

    4569: [Scoi2016]萌萌哒 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 459  Solved: 209[Submit][Status] ...

  10. 【BZOJ-4523】路由表 Trie树 + 乱搞

    4523: [Cqoi2016]路由表 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 155  Solved: 98[Submit][Status][ ...