简介：jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。

效果展示 http://hovertree.com/texiao/jqimg/6/

效果图如下：

源码下载：http://hovertree.com/h/bjaf/hdhgnftp.htm

HTML文件代码：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery zoomify图片放大预览代码 - 何问起</title>

<base target="_blank" />

<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/6/css/bootstrap-grid.min.css">

<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/6/dist/zoomify.min.css">

<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/6/css/style.css">

</head>

<body>

<div class="container">

    <div class="examples">

        <div class="row">

            <div class="example  col-md-12 col-xs-12 ">

                <p><img src="http://hovertree.com/hvtimg/bjafjd/xusm0re6.jpg" class="img-rounded" alt=""></p>

            </div>

        </div>

        <div class="row">

            <div class="example  col-xs-6 col-md-6">

                <p><img src="http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg" class="img-rounded" alt=""></p>

            </div>

            <div class="example col-xs-6 col-md-6">

                <p><img src="http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg" class="img-rounded" alt=""></p>

            </div>

        </div>

        <div class="row">

            <div class="example col-xs-3 col-md-3">

                <p><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" class="img-rounded" alt=""></p>

            </div>

            <div class="example col-xs-3 col-md-3">

                <p><img src="http://hovertree.com/hvtimg/bjafjc/rgevo2ea.jpg" class="img-rounded" alt=""></p>

            </div>

            <div class="example col-xs-3 col-md-3">

                <p><img src="http://hovertree.com/hvtimg/201511/6j9j6tk5.png" class="img-rounded" alt=""></p>

            </div>

            <div class="example col-xs-3 col-md-3">

                <p><img src="http://hovertree.com/hvtimg/bjafjf/1lf4d3qj.jpg" class="img-rounded" alt=""></p>

            </div>

        </div>

    </div>

</div>

<script src="http://down.hovertree.com/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>

<script src="http://hovertree.com/texiao/jqimg/6/dist/zoomify.min.js"></script>

<script type="text/javascript">

    $('.example img').zoomify();

</script>

<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：FireFox、Chrome、Safari、Opera、Edge、IE11等新版浏览器. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>

<a href="http://hovertree.com/h/bjaf/yb41c3xl.htm">代码说明</a></p>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/yb41c3xl.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery Lightbox图片放大预览的更多相关文章

  1. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

  2. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  3. css+jquery 实现图片局部放大预览

    今天有时间开始动手,使用css+jquery实现了图片局部放大的组件,首先看看效果图: 界面设计思路如下: 1.两个div,左边放图片的缩略图 2.在左边缩略图鼠标移动的时候,区域(效果图中的网格) ...

  4. 微信小程序实现图片放大预览效果

    可以直接用微信程序自己的api很方便的实现 核心方法 wx.previewImage: 直接上代码, wxml: <!--pages/prewpicture/prew.wxml--> &l ...

  5. jQuery图片放大预览

    在线演示 本地下载

  6. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  7. Android 举例说明自己的定义Camera图片和预览，以及前后摄像头切换

    如何调用本地图片,并调用系统拍摄的图像上一博文解释(http://blog.csdn.net/a123demi/article/details/40003695)的功能. 而本博文将通过实例实现自己定 ...

  8. layui——上传图片，并实现放大预览

    一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...

  9. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

随机推荐

  1. mysql进阶之存储过程

    往往看别人的代码会有这样的感慨: 看不懂 理还乱 是离愁 别是一番滋味在心头 为什么要使用存储过程? 在mysql开发中使用存储过程的理由: 当希望在不同的应用程序或平台上执行相同的函数,或者封装特定 ...

  2. Node.js使用PM2的集群将变得更加容易

    介绍 众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...

  3. Linux下的C Socket编程 -- server端的继续研究

    Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...

  4. ASP.NET 5 和Entity Framework 7公告仓库

    ASP.NET 5 有一个公告仓库来介绍ASP.NET 5和 Entity Framework 7的主要变更说明,这个对于日夜更新的项目来说,很多人经常会遇到问题但是不知道去哪里寻找帮助,很多同学在做 ...

  5. Spark笔记：RDD基本操作（上）

    本文主要是讲解spark里RDD的基础操作.RDD是spark特有的数据模型,谈到RDD就会提到什么弹性分布式数据集,什么有向无环图,本文暂时不去展开这些高深概念,在阅读本文时候,大家可以就把RDD当 ...

  6. Linux下UPnP sample分析

        一.UPnP简介   UPnP(Universal Plug and Play)技术是一种屏蔽各种数字设备的硬件和操作系统的通信协议.它是一种数字网络中间件技术,建立在TCP/IP.HTTP协 ...

  7. 使用Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境（二）

    前言     上一篇随笔Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境(一)介绍maven和nexus的环境搭建,以及如何使用maven和nexus统一管理库 ...

  8. 「微信小程序」来了

    ps:微信APP Store.微信小程序.微信应用号都是指同一个事情. 苦逼程序猿刚下班到家,还没来得及洗漱,收到条小道消息的推送.于是我有气无力的拿着手机点开了这条推送消息,映入眼帘的就是这张封面图 ...

  9. 跟我一起ggplot2（1）

    ggplot2 R的作图工具包,可以使用非常简单的语句实现非常复杂漂亮的效果. qplot 加载qplot library(ggplot2) # 测试数据集,ggplot2内置的钻石数据 qplot( ...

  10. ABP教程-通过ABPboilerplate模版创建项目

    开篇说明: 此篇博客是属于半教程博客,为什么说是半教程呢.因为我不会打算说什么理论性的东西,没必要.要看理论性的资料以及基础信息,请前往tkb至简和@阳光铭睿的博客查看文档资料. 开发环境: vs20 ...