简介：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. Android 7.1 - App Shortcuts

    Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...

  2. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  3. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  4. Android—基于GifView显示gif动态图片

    android中显示gif动态图片用到了开源框架GifView 1.拷GifView.jar到自己的项目中. 2.将自己的gif图片拷贝到drawable文件夹 3.在xml文件中设置基本属性: &l ...

  5. liunx 磁盘管理命令记录

    Linux磁盘管理好坏管理直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 fdisk:用于磁盘分 ...

  6. win10系统下连接无线网络掉线问题解决办法

    打开驱动精灵----系统诊断 找一个可修复的驱动点击 选择连不上网中的查看更多 有连不上网络,网络连接受限,解决无线间歇性掉网问题 进入计算机管理----设备管理 修改无线网络属性(名称含有wirel ...

  7. 喜马拉雅音频下载器 V1.2 支持专辑批量下载 喜马拉雅mp3下载导出 喜马拉雅下载器

    出差一个星期回来看邮箱,发现好多网友评论说网站又更新了,老程序不能用了,有热心网友放出修改版的,我就不重复造车了..大家可以去这里下载 http://blog.csdn.net/suqingheang ...

  8. 我的MYSQL学习心得（十二） 触发器

    我的MYSQL学习心得(十二) 触发器 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数 ...

  9. 关于asp.net利用mono部署到Linux上的一些说明

    linuxdot.net社区群:102732979(如果你认为你已经在.NET跨平台方面有足够的经验,请参加这个群:103810355). 其中有各种大神,嘿嘿,如果你有问题可以来咨询,完全无偿的免费 ...

  10. 【Java并发编程实战】-----“J.U.C”：Phaser

    Phaser由java7中推出,是Java SE 7中新增的一个使用同步工具,在功能上面它与CyclicBarrier.CountDownLatch有些重叠,但是它提供了更加灵活.强大的用法. Cyc ...