简介：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. 小兔JS教程（四）-- 彻底攻略JS数组

    在开始本章之前,先给出上一节的答案,参考答案地址: http://www.xiaotublog.com/demo.html?path=homework/03/index2 1.JS数组的三大特性 在J ...

  2. PHP static静态属性和静态方法

    这里分析了php面向对象中static静态属性和静态方法的调用.关于它们的调用(能不能调用,怎么样调用),需要弄明白了他们在内存中存放位置,这样就非常容易理解了.静态属性.方法(包括静态与非静态)在内 ...

  3. SOLID 设计原则

    SOLID 原则基本概念: 程序设计领域, SOLID (单一功能.开闭原则.里氏替换.接口隔离以及依赖反转)是由罗伯特·C·马丁在21世纪早期 引入的记忆术首字母缩略字,指代了面向对象编程和面向对象 ...

  4. 报错：You need to use a Theme.AppCompat theme (or descendant) with this activity.

    学习 Activity 生命周期时希望通过 Dialog 主题测试 onPause() 和 onStop() 的区别,点击按钮跳转 Activity 时报错: E/AndroidRuntime: FA ...

  5. JavaScript中的this

    本文尽量避免概念性的讲解,那样太抽象 所以下面以一些简单的例子,从易到难对this的用法总结 1.方法中的this会指向当前执行该方法的对象 如: var name = "window&qu ...

  6. ELK分析IIS日志

      LogStash.conf input { file { type => "iis_log" path => ["C:/inetpub/logs/LogF ...

  7. REGEX例子

    作为REGEX的例子,代码9.3显示了一个给定的文件有多少行,具有给定的模式,通过命令行输入(注:有更有效率的方式来实现这个功能,如Unix下的grep命令,在这里只是给出了另一种方式).这个程序像下 ...

  8. linux系统下基于mono部署asp.net，使用ef6与mysql出现的问题【索引】

    git clone github.com/mono的源码,日期:2014-06-19,百度网盘链接:http://pan.baidu.com/s/1kTG9EUb 关于asp.net利用mono部署到 ...

  9. 2000条你应知的WPF小姿势 基础篇<8-14>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  10. 2、利用蓝牙定位及姿态识别实现一个智能篮球场套件（二）——CC2540/CC2541基于广播的RSSI获得

    CC2541一拖多例程中RSSI获得是通过一个事件回调函数实现的,前提是需要连接上蓝牙设备. 这个对于多点定位来说是不可行的,由于主机搜索蓝牙设备过程中也能获得当前蓝牙设备的RSSI等信息,因此可基于 ...