效果：

目录结构：

代码：

<%@ 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内核代码container_of

    它的作用显而易见,那就是根据一个结构体变量中的一个域成员变量的指针来获取指向整个结构体变量的指针. typedef unsigned int __kernel_size_t; typedef __ke ...

  2. nice Validator参考

    快速上手 例1. DOM传参 1. 要验证一个表单,只需要给字段绑定规则“data-rule”就可以了2. 字段可以有多条规则,规则之间用分号(;)分隔3. js初始化不是必要的,只要是字段并且带有“ ...

  3. mysql not in、left join、IS NULL、NOT EXISTS 效率问题记录

    原文:mysql not in.left join.IS NULL.NOT EXISTS 效率问题记录 mysql not in.left join.IS NULL.NOT EXISTS 效率问题记录 ...

  4. solrCloud+tomcat+zookeeper配置

    一.环境准备: Solr版本:4.7.0 下载地址:http://www.apache.org/dyn/closer.cgi/lucene/solr/4.7.0 Tomcat版本:6.0.39 下载地 ...

  5. 基于visual Studio2013解决算法导论之027hash表

     题目 hash表,用链表来解决冲突问题 解决代码及点评 /* 哈希表 链接法解决冲突问题 */ #include <iostream> using namespace std; s ...

  6. windows下各个浏览器用html5进行h.264大视频播放的性能对比说明

    最近在调查windows下哪种浏览器进行大视频播放时候稳定性比较高. 举h.264的4g的视频为例. 选用的浏览器有ie10,firefox,chrome.(因为opera不支持h.264所以没有考虑 ...

  7. SymmetricDS文档翻译--【Chapter 3. 具体配置（Configuration）[section C]】

    3.6. Routers 眼下的实现中提供的Route实现包括: 1.      Default Router:这个Router发送全部的数据到Router中定义的目标节点所属的组中的全部的节点. 2 ...

  8. Linux之shell编程基础

    一.变量 变量在shell中分为:本地变量.环境变量.位置参数: 本地变量:仅可在用户当前shell生命期的脚本中使用的变量,本地变量随着shell进程的消亡而无效,本地变量在新启动的shell中依旧 ...

  9. BZOJ 4143: [AMPPZ2014]The Lawyer( sort )

    水题... 排序搞出每天的会议有哪些, 然后再按照会议的开始时间和结束时间排序, 最晚开始的和最早结束的会议不是同一场而且最晚开始的时间>最早结束的会议就有可能方案 -------------- ...

  10. 2015.7.17( NOI2015 day1 )

    今天早起做了NOI2015网络同步赛.... 最近NOI是越来越向NOIP靠拢了....但是我还是不会做..... 第一题:程序自动分析 先离散化一下..然后最多就剩20w个数 , 不等于就存起来.. ...