效果：

目录结构：

代码：

<%@ 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. 高性能的JavaScript--加载和执行[转]

    写在前面 JavaScript在浏览器中的性能,可认为是开发者所要面对的最重要的可用性的问题,此问题因JavaScript的阻塞特征而复杂,也就是说JavaScript运行时其他的事情不能被浏览器处理 ...

  2. C++0x简讯

    关于C++0x核心进展的一组简讯 刘未鹏 /文 C++的罗浮宫(http://blog.csdn.net/pongba) Concepts无疑是C++0x的杀手级特性之中的一个(也许称它“杀手级”另一 ...

  3. ICE之C/S通信原理

    /* 在ICE文档中只需要声明module名称,接口名称,方法名称 */ #ifndef SIMPLE_ICE #define SIMPLE_ICE module Demo{ //module名称 i ...

  4. iOS开发中xib和Storyboard中需要注意的事项

    使用xib注意事项: 1.只有自带view的控件才可以使用xib,因为它本身就是一个view 2.在使用可视化控件添加属性(代码)时候,如果删除了属性代码,一定要在xib上解除关联(不然会崩溃) 3. ...

  5. 【转】CentOS上安装 jdk：rpm安装和源码安装

    1.安装 jdk-8u5-linux-x64.rpm 原文链接:http://www.cnblogs.com/xsi640/p/3756995.html 先下载最新的jdk版本 文件名:jdk-8u5 ...

  6. C-01背包问题

    [声明]:非常感谢http://blog.sina.com.cn/s/blog_6dcd26b301013810.html,给我带来的帮助. 看这个图片表示的意思: w[i]表示第i件物品的容积 ,p ...

  7. java--多线程之前台幕后

    前台程序是相对于后台程序来说的,那么什么是后台程序呢? [后台程序]就是在启动了start()之前,调用了setDaemon(true)方法,这个线程就变成了后台.如果一个进程中只用后台线程在运行,那 ...

  8. Qt序列化格式分析（qint，QString）（非常简单好用）

    最近项目需要进行QT开发环境下对传输对象进行序列化与反序列化处理,对基本类型的处理在使用QT默认的序列化方式还是完全手工序列化这两种方式之间有些犹疑不定,边想了解下QT默认序列化基本类型的格式,项目中 ...

  9. MAMP：在 OSX 中搭建 Apache, MySQL, PHP 环境并本地安装、调试 WordPress

    MAMP 这个名字来源于 Macintosh Apache MySQL PHP,显然专门用来在 Mac 环境下搭建 Apache.MySQL.PHP 平台. 虽然 OSX 中已经预装了 Apache ...

  10. HEVC码率控制浅析——HM代码阅读之一

    HM的码率控制提案主要参考如下三篇:K0103,M0036,M0257.本文及后续文章将基于HM12.0进行讨论,且首先仅讨论K0103对应的代码,之后再陆续补充M0036,M0257对应的代码分析, ...