基于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

最新文章

  1. Hive索引功能测试
  2. PHP初学者都该掌握哪些技能
  3. Web API应用架构设计分析(1)
  4. IT男常用软件网站整理
  5. Android开发环境的调研
  6. github -- fork提交项目
  7. bash/shell 数学计算
  8. windows创建虚拟界面
  9. LFS7.4编译笔记(1)
  10. Java POI操作Excle工具类
  11. poj 3694 Network
  12. Ubuntu虚拟机与Window、Arm的通信
  13. go 基础语法
  14. Strategic Game
  15. Linux显示所有可更新的软件清单命令
  16. python模块之re模块
  17. app.route()
  18. ASP.NET MVC呼叫WCF Service的方法
  19. sqlserver设计器实现约束
  20. 分页技巧__在项目中使用QueryHelper辅助对象实现分页效果

热门文章

  1. magento登陆
  2. Firefox 网络调试工具
  3. SharePoint 2013 Step by Step—— How to Upload Multiple Documents in Document Library
  4. stm8 时钟输出引脚
  5. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
  6. mac 下python使用venv 虚拟环境
  7. 微信小程序 开发过程中遇到的坑(一)
  8. 高精度运算库gmp
  9. [svc]高并发场景 LVS DR +KeepAlive高可用实现及ka的persistence_timeout参数
  10. 精通Docker的50个必备教程、工具、资源