效果：

目录结构：

代码：

<%@ 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. python学习（2）

    编码: 需要注意的是:python 没有字符的概念,但是比如a='abcd',当中字母a占用一个字节,通过 方法len我们可以求出这个字符变量a所有字符个数,如:print len(a)显示结果为:4 ...

  2. BZOJ 1053 反素数ant

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

  3. Android面试题整理(1)

    1.Activity的生命周期      onCreate(Bundle saveInstanceState):创建activity时调用.      onStart():activity可见时调用 ...

  4. bash有空格的文件名

    http://www.keakon.net/2011/10/20/bash%E4%B8%8B%E5%A4%84%E7%90%86%E5%8C%85%E5%90%AB%E7%A9%BA%E6%A0%BC ...

  5. VirtualBox中的Ubuntu没有权限访问共享文件夹/media/sf_bak

    之前已经搞定可以自动共享文件夹了,但是现在发现无法去访问,非root用户下,使用“ls /media/sf_bak”提示没有权限,当然如果切换到root,是可以的. [解决过程]1.把普通用户名加入到 ...

  6. U+00A0 (Non-breaking space)无法被正确压缩

    Code Glyph Decimal HTML Description #U+00A0     Non-breaking space 0096 https://zh.wikipedia.org/wik ...

  7. Nutch 是一个开源Java 实现的搜索引擎

    Nutch 是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. Nutch的创始人是Doug Cutting,他同时也是Lucene.Hado ...

  8. 【转】关于C语言生成不重复的随机数

    一 说起随机函数,恐怕又有人说这是老生长谈了……一般很多人都形成了自己的固定格式,因为随机数用处比较大,用的时候比较多,拿过来就用了.但是新手不这么 干,他们总是抱有疑惑,我就是一个新手,而且较菜…… ...

  9. MapReduce调度与执行原理之任务调度（续）

    前言 :本文旨在理清在Hadoop中一个MapReduce作业(Job)在提交到框架后的整个生命周期过程,权作总结和日后参考,如有问题,请不吝赐教.本文不涉及Hadoop的架构设计,如有兴趣请参考相关 ...

  10. sublime2 c++的一些使用配置

    1 下载安装好tdw gcc后,配置好环境变量后,配置sublime2. tools->build system-> new build system... 里面输入: { "c ...