效果：

目录结构：

代码：

<%@ 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. 在vmware里面免费安装纯净的xp虚拟机

    1. 安装vmware, 略 2. 下载xp http://msdn.itellyou.cn/ 用迅雷下载Windows XP Professional with Service Pack 3 (x8 ...

  2. ulipad双击无反应

    所有的东西都配好后,执行ulipad需要注意的是: 1,必须以管理员身份运行ulipad. 2,当运行有道词典的时候,双击ulipad是没有反应, 至于为什么会出现这种情况,我也不太清除,等我查到 原 ...

  3. BZOJ 1053 反素数ant

           初读这道题,一定有许多疑惑,其中最大的疑惑便是"反素数",反素数的概念很简单,就是,a<b同时a的因数个数大于b的因数个数.但是想要完成本题还需要一些信息,关于 ...

  4. application（expand）--easyui

    一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...

  5. 四级流水线的8bit加法器

    以流水线实现8bit 加法器. //date : 2013/8/23 //designer :pengxiaoen //function : module pipeline ( clock ,rese ...

  6. 感觉Release有时比Debug要健壮

    评估文件夹大小的时候,直接跨线程操作UI界面,Debug崩溃,Release不崩溃. 更多的一种情况是,本机DEBUG下不崩溃,把RELEASE版本到别的机子上,立刻崩溃(登录框的进度条的对象为空,仍 ...

  7. u-boot分析——struct gd_t与struct bd_t

    gd_t和bd_t是u-boot中两个重要的数据结构,在初始化操作很多都要靠这两个数据结构来保存或传递.分别定义在./include/asm/global_data.h和./include/asm/u ...

  8. poj 2356鸽笼原理水题

    关于鸽笼原理的知识看我写的另一篇博客 http://blog.csdn.net/u011026968/article/details/11564841 (需要说明的是,我写的代码在有答案时就输出结果了 ...

  9. mojo 默认use utf8;

    my $endtime=strftime("%Y%m%d%H%M%S",localtime()); my $d=encode_utf8('验证'); if ($a3 =~/$d/) ...

  10. ThinkPHP 3.1.2 URL<1>

    # # ThinkPHP 3.1.2 URL 本节课大纲: 一.URL规则 1.默认是区分大小写的 2.如果我们不想区分大小写可以改配置文件 'URL_CASE_INSENSITIVE'=>tr ...