效果:

目录结构:

代码:

<%@ 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. BZOJ 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛( 二分答案 )

    最小最大...又是经典的二分答案做法.. -------------------------------------------------------------------------- #inc ...

  2. HDU 4786 生成树 并查集+极大极小值 黑白边 确定选择白边的数量

    题意: 给定一个无向图 n 个点 m条无向边 u v val val == 1 表示边(u, v) 为白边 问能否找到n个点的生成树, 使得白边数为斐波那契数 思路: 并查集求图是否连通( 是否存在生 ...

  3. application(expand)--easyui

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

  4. DFS 练习 (这篇真的是随笔)

    目的: 输入: 3 输出: 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 代码如下: #include<stdio.h> ],b[],n; void dfs(in ...

  5. static timing analysis 基础

    此博文依据 特权同学在电子发烧友上的讲座PPT进行整理而成. static timing analysis   静态时序分析基础 过约束:有不必要的约束,或者是约束不能再某一情况下满足.——约束过头了 ...

  6. PHP脚本实现凯撒加(解)密

    原文:PHP脚本实现凯撒加(解)密 今天在看某ctf时候遇到一题凯撒加密的题,然后看到write up里有这样一句 顿时感觉这题目有点坑啊,这要不写个脚本来跑要推到啥时候啊,于是又了本文: <? ...

  7. Android 蓝牙( Bluetooth)耳机连接分析及实现

    Android 实现了对Headset 和Handsfree 两种profile 的支持.其实现核心是BluetoothHeadsetService,在PhoneApp 创建的时候会启动它. if ( ...

  8. House Robber 分类: leetcode 算法 2015-07-09 20:53 2人阅读 评论(0) 收藏

    DP 对于第i个状态(房子),有两种选择:偷(rob).不偷(not rob) 递推公式为: f(i)=max⎧⎩⎨⎪⎪{f(i−1)+vali,f(i−2)+vali,robi−1==0robi−1 ...

  9. 从C到C++,C语言与C++的关系

    C语言是1972年由美国贝尔实验室的D.M.Ritchie研制成功的.它不是为初学者设计的,而是为计算机专业人员设计的.大多数系统软件和许多应用软件都是用C语言编写的.但是随着软件规模的增大,用C语言 ...

  10. BZOJ 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式( 二分答案 + 后缀数组 )

    二分答案m, 后缀数组求出height数组后分组来判断. ------------------------------------------------------------ #include&l ...