效果：

目录结构：

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>图片显示</title>

    <script src="JavaScript/Quote/jquery-1.8.3.min.js"></script>

    <link href="Component/Lightbox/css/lightbox.css" rel="stylesheet" />

    <script src="Component/Lightbox/js/lightbox-2.6.min.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <a href="Images/demopage/image-3.jpg" data-lightbox="example-set" title="">

                <img src="Images/demopage/thumb-1.jpg" />

            </a>

            <a href="Images/demopage/image-4.jpg" data-lightbox="example-set" title="">

                <img src="Images/demopage/thumb-4.jpg" />

            </a>

            <a href="Images/demopage/image-5.jpg" data-lightbox="example-set" title="">

                <img src="Images/demopage/thumb-5.jpg" />

            </a>

            <a href="Images/demopage/image-3.jpg" data-lightbox="example-set" title="">

                <img src="Images/demopage/thumb-3.jpg" alt="img" />

            </a>

            <a href="Images/demopage/image-4.jpg" data-lightbox="example-set" title="">

                <img src="Images/demopage/thumb-4.jpg" alt="img" />

            </a>

            <a href="Images/demopage/image-5.jpg" data-lightbox="example-set" title="">

                <img src="Images/demopage/thumb-5.jpg" alt="img" />

            </a>

        </div>

    </form>

</body>

</html>

　　

JQuery - 点击图片显示大图的更多相关文章

  1. vue 点击图片显示大图

    使用指南:https://www.npmjs.com/package/vue-directive-image-previewer 简单使用: 1.安装vue-directive-image-previ ...

  2. jQuery 鼠标移入图片 显示大图并跟随鼠标移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 一天JavaScript示例-点击图片显示大图片添加鼠标

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 点击图片查看大图（纯js）

    $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...

  5. jquery点击图片选中特效

    jquery点击图片选中特效 点击在线预览效果

  6. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  7. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  8. jQuery点击图片弹出大图遮罩层

    使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...

  9. jQuery插件——imgbox（点击图片查看大图）

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

随机推荐

  1. linux下安装greenplum

    1. 下载 Greenplum Database 源代码 $ git clone https://github.com/greenplum-db/gpdb 2. 安装依赖库 Greenplum Dat ...

  2. Cocos2dx项目移植Android平台

    链接地址:http://blog.csdn.net/iuncle/article/details/24772183 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.Classes目录下存放. ...

  3. php开启虚拟域名功能

    1.开启apache的mod_rewrite功能 关闭注释 LoadModule rewrite_module modules/mod_rewrite.so 2.引入http-vhosts.conf文 ...

  4. POJ 1458 最长公共子序列 LCS

    经典的最长公共子序列问题. 状态转移方程为 : if(x[i] == Y[j]) dp[i, j] = dp[i - 1, j - 1] +1 else dp[i, j] = max(dp[i - 1 ...

  5. Qt 操作 pdf 文件

    写了好久的东西,不小心按了下返回键就没了.CSDN居然没自动保存,坑爹啊 原本还有很多信息的,现在直入正题吧. QT没有内置PDF操作的功能(其实有一个,QPrinter,不过只能写不能读,基本是半残 ...

  6. zabbix 添加主机接口

    http://192.168.32.101:3000/api/zabbix/add_Host?env=test&host=zjtest9-app&ip=192.168.32.250&a ...

  7. Android中使用"running services"查看service进程内存

    从Android 2.0开始,在Settings中加入了一个新的activity("Running Services" activity),它用于显示当前运行的每个Services ...

  8. C#根据域名查询IP(CMD命令参数输入或者启动程序后再输入查询)

    有时因为需要,希望知道域名的IP,那用C#怎么实现呢?以下是实现代码 using System; using System.Collections.Generic; using System.Linq ...

  9. secureCRT登录不上ubuntu，Connection closed

    secureCRT登录不上ubuntu 1.第一个原因是sshd服务没开,或者防火墙没关.装好sshd并打开就好. http://www.cnblogs.com/mylinux/p/5101956.h ...

  10. Python之路day4

    坚持就是胜利.今天零下14度,从教室出来的路上真的很冷很冷,希望这个冬天自己不会白过,春暖花开的时候一定要给世界一个更好的自己. 原本以为day3的作业自己做得挺好的,没想到只得了B+.必须要加油了, ...