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. iOS开发小技巧--iOS中设置applicationIconBadgeNumber遇到的问题

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

  2. 【CodeVS 1198】【NOIP 2012】国王游戏

    http://codevs.cn/problem/1198/ 推导一翻,排好序后,直接上高精度. #include<cstdio> #include<cstring> #inc ...

  3. Input checkbox 添加样式背景

    <style type="text/css"> .chk_1 { width: 20px; height: 20px; position: absolute; top: ...

  4. 81B

    模拟 字符串必须先清零,要不会出现玄学的问题 #include<iostream> #include<cstdio> using namespace std; string s ...

  5. Maven-setting.xml详解

    settings.xml对于maven来说相当于全局性的配置,用于所有的项目,当Maven运行过程中的各种配置,例如pom.xml,不想绑定到一个固定的project或者要分配给用户时,我们使用set ...

  6. 源代码管理工具(上)-SVN基本使用

    ------------------------------------------------------SVN简介和搭建 ------------------------------------- ...

  7. AfNetworking 3.0源码解读

    做ios开发,AFNetworking 这个网络框架肯定都非常熟悉,也许我们平时只使用了它的部分功能,而且我们对它的实现原理并不是很清楚,就好像总是有一团迷雾在眼前一样. 接下来我们就非常详细的来读一 ...

  8. hdu5183 hash大法

    维护前缀和sum[i]=a[0]-a[1]+a[2]-a[3]+…+(-1)^i*a[i]枚举结尾i,然后在hash表中查询是否存在sum[i]-K的值.如果当前i为奇数,则将sum[i]插入到has ...

  9. RCE via XStream object deserialization && SECURITY-247 / CVE-2016-0792 XML reconstruction Object Code Inject

    catalogue . Java xStream . DynamicProxyConverter . java.beans.EventHandler . RCE via XStream object ...

  10. koch曲线与koch雪花的MATLAB实现

    代码 % -- function koch(Ax, Ay, Bx, By) % 控制递归深度 Deepth = ; % 控制图画大小 Size = ; + (By-Ay)^) < Deepth ...