简介：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. Create a Team in RHEL7

    SOLUTION VERIFIED September 13 2016 KB2620131 Environment Red Hat Enterprise Linux 7 NetworkManager ...

  2. ComponentPattern （组合模式）

    import java.util.LinkedList; /** * 组合模式 * * @author TMAC-J 主要用于树状结构,用于部分和整体区别无区别的场景 想象一下,假设有一批连锁的理发店 ...

  3. 解决使用IE8打开ADFS 3.0登录页面

    系统上线前一天,发现客户竟然有XP系统和2003系统,这些系统都不能访问外网.测试时,客户端是IE8,打开我们系统ADFS的登录页面,一直在Loading,无法打开,也不报错.后来通过fiddler跟 ...

  4. C#事件-使用事件需要的步骤

    事件是C#中另一高级概念,使用方法和委托相关.奥运会参加百米的田径运动员听到枪声,比赛立即进行.其中枪声是事件,而运动员比赛就是这个事件发生后的动作.不参加该项比赛的人对枪声没有反应. 从程序员的角度 ...

  5. [django]数据导出excel升级强化版(很强大!)

    不多说了,原理采用xlwt导出excel文件,所谓的强化版指的是实现在网页上选择一定条件导出对应的数据 之前我的博文出过这类文章,但只是实现导出数据,这次左思右想,再加上网上的搜索,终于找出方法实现条 ...

  6. MzBlog分析

    早上衣明志 在QQ群里说他的博客开源了,地址在 https://github.com/qihangnet/MZBlog,基于NancyFX和MongoDB开发的.博客内容需要使用 MarkDown 进 ...

  7. TFS 2015（Visual Studio Team Foundation Server）的下载和安装

    微软现在所有Visual Studio相关的下载到www.visualstudio.com网站下载是非常方便的 下载地址: 下载ISO版本后,进行安装,由于10-20人的小团队,不需要SharePoi ...

  8. 前端构建大法 Gulp 系列 (三)：gulp的4个API 让你成为gulp专家

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  9. 记一次jdk升级引起的 Unsupported major.minor version 51.0

    之前jdk 一直是1.6,tomcat 是6.x 版本,, 现在引入的新的jar, 出现 Caused by: java.lang.UnsupportedClassVersionError: org/ ...

  10. node.js里npm install --save 与 npm install --save-dev 的区别

    在package.json可以看到一个放在package.json 的dependencies , 一个放在devDependencies里面. 目前找到的一些解答:真正跑在用户浏览器中的代码,比如j ...