基于jQuery全屏相册插件zoomVisualizer
基于jQuery全屏相册插件zoomVisualizer。这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片。效果图如下:
实现的代码。
html代码:
<div id="zoom-visualizer">
<div class="lightbox-ofertas-bg"></div>
<div class="lightbox">
<div class="header">
<div class="inside">
<div id="wrapper-fechar" class="tooltip-content">
<div class="tooltip">
<p>Close</p>
<span></span> </div>
<a href="" class="fechar tooltip-caller"></a>
<div class="clear"></div>
</div>
<div id="zoom">
<div>
<div class="tooltip-content">
<div class="tooltip">
<p>Zoom Out</p>
<span></span> </div>
<a href="#" class="zoom-out tooltip-caller"></a> </div>
<div id="wrapper-barra-zoom" class="tooltip-content">
<div class="tooltip">
<p>Zoom</p>
<span></span> </div>
<div class="tooltip-caller wrapper-barra"> <span id="barra"> <strong id="scroll" class="ui-draggable" style="position: relative; left: 0px;"> </strong> </span> </div>
</div>
<div class="tooltip-content">
<div class="tooltip">
<p>Zoom In</p>
<span></span> </div>
<a href="#" class="zoom-in tooltip-caller"></a> </div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div> <div class="content"> <a href="" id="next"></a>
<div class="wrapper" style="width: 1415px; height: 362px;">
<img src="img/camiseta_hombre_jackknife_negra.jpg" class="dragme">
</div>
<a href="" id="before"></a>
</div> <div class="footer">
<a href="#" id="aba-lista"><span>Hide Thumbnails</span></a>
<div id="listagem-imagens">
<div>
<a class="item-zoom-image ativo" href="img/camiseta_hombre_jackknife_negra.jpg" alt="0"><img src="img/camiseta_hombre_jackknife_negra-thumb.jpg"> </a>
<a class="item-zoom-image" href="img/design.png" alt="1"><img src="img/design-thumb.png"> </a>
<a class="item-zoom-image" href="img/camiseta_hombre_lumberjack_blanca.jpg" alt="2"> <img src="img/camiseta_hombre_lumberjack_blanca-thumb.jpg"> </a>
<a class="item-zoom-image" href="img/camiseta_hombre_mr-speed_blanca1.jpg" alt="2"> <img src="img/camiseta_hombre_mr-speed_blanca1-thumb.jpg"> </a>
<div class="clear"></div>
</div>
</div>
</div> </div>
</div>
via:http://www.w2bc.com/Article/42016
基于jQuery全屏相册插件zoomVisualizer的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- jQuery全屏滚动插件fullPage使用
1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...
随机推荐
- Oracle 12C -- Plug in a Non-CDB as a PDB
1.备份non-CDB数据库2.关闭non-CDB数据库 SQL> shutdown immediate; 3.将non-CDB至于只读状态 SQL> startup open read ...
- mysql_install_db 运行结果
# /usr/local/mysql/scripts/mysql_install_db \ > --defaults-file=/etc/my.cnf \ > --basedir=/usr ...
- java 获取局域网中的全部主机名和IP地址
DOS命令 命令 意义 net view 获取局域网中的全部主机名 ipconfig -all 获取本地IP,主机名,MAC地址 arp -a 获取本局域网中的全部IP地址和物理地址 ping -a ...
- C#数组之 []、List、Array、ArrayList应用
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Python 文件 flush() 方法
描述 Python 文件 flush() 方法是用来把文件从内存buffer(缓冲区)中强制刷新到硬盘中,同时清空缓冲区. 一般情况下,文件关闭后会自动刷新到硬盘中,但有时你需要在关闭前刷新到硬盘中, ...
- 【转载】Android 关于arm64-v8a、armeabi-v7a、armeabi、x86下的so文件兼容问题
转自:[欧阳鹏]http://blog.csdn.net/ouyang_peng Android 设备的CPU类型(通常称为”ABIs”) armeabiv-v7a: 第7代及以上的 ARM 处理器. ...
- 转:纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...
- virtualbox 最小化安装centos7 配置双网卡(nat和桥接)记录----已经过期
该文章已经过期 请参考另一篇文章:virtualbox 安装centos7 配置桥接网卡,实现主机和虚拟机互通,虚拟机可以访问外网,解决无法上网问题 先说明一下为什么要配置双网卡? 配置nat ...
- 精确光源(Punctual Light Sources)
<Physically-Based Shading Models in Film and Game Production>(SIGGRAPH 2010 Course Notes) (地址: ...
- Nginx(四):压缩功能详解
gzip (GNU-ZIP) 是一种压缩技术.经过 gzip 压缩后页面大小可以变为原来的 30%甚至更小. 这样,用户浏览页面的时候速度会快得多. gzip 的压缩页面需要浏览器和服务器双方都支持 ...