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. 素数筛 poj 3518

    给你一个n 求包括n的一个非素数区间有多长 +1输出 #include<stdio.h> #include<string.h> #include<algorithm> ...

  2. 51nod 1040最大公约数和(欧拉函数)

    1040 最大公约数之和 题目来源: rihkddd 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 给出一个n,求1-n这n个数,同n的最大公约数 ...

  3. hdu4990 矩阵

    C - Reading comprehension Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  4. C#版 Socket编程(最简单的Socket通信功能)

    示例程序是同步套接字程序,功能很简单,只是客户端发给服务器一条信息,服务器向客户端返回一条信息:这里只是一个简单的示例,是一个最基本的socket编程流程,在接下来的文章中,会依次记录套接字的同步和异 ...

  5. python 学习笔记11(objgraph)

    33. objgraph objgraph是Python的一个第三方包.安装之前需要安装xdot. 用途 安装 例子

  6. [日常训练]常州集训day3

    T1 Description 有$K$个石子,石子只能放在$N$条水平线与$M$条竖直线构成的网格的交点上. 求用$K$个石子最多能找到多少四边平行于坐标轴的长方形,它的四个角上都恰好放着一枚石子. ...

  7. [日常训练]FJ省夏令营day1

    T1 Description 给出n个矩形的顶点坐标(每个矩形的底边都在x轴上),求这n个矩形所组成图形的轮廓线的顶点. Input 第一行一个整数n,表示矩形个数. 以下n行,每行3个整数,分别表示 ...

  8. kali 2.0 启动metasploit服务

    kali 2.0 已经没有metasploit 这个服务了,所以service metasploit start 的方式不起作用. 在kali 2.0中启动带数据库支持的MSF方式如下: 首先启动po ...

  9. 【PowerOJ1739】 魔术球问题

    https://www.oj.swust.edu.cn/problem/show/1739 (题目链接) 题意 n个柱子上放小球,每根柱子上相邻两个小球的数字之和必须是完全平方数,只有放了x号小球才可 ...

  10. VisualSVN Server和Subversion的联系

    VisualSVN Server是只能在Windows平台上搭建的SVN服务器,内核使用的是Subversion,做了整合:apache+subversion+WMI(实现操作界面等). 用这个的好处 ...