基于jQuery全屏相册插件zoomVisualizer
2024-10-10 04:25:05
基于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
最新文章
- Hive索引功能测试
- PHP初学者都该掌握哪些技能
- Web API应用架构设计分析(1)
- IT男常用软件网站整理
- Android开发环境的调研
- github -- fork提交项目
- bash/shell 数学计算
- windows创建虚拟界面
- LFS7.4编译笔记(1)
- Java POI操作Excle工具类
- poj 3694 Network
- Ubuntu虚拟机与Window、Arm的通信
- go 基础语法
- Strategic Game
- Linux显示所有可更新的软件清单命令
- python模块之re模块
- app.route()
- ASP.NET MVC呼叫WCF Service的方法
- sqlserver设计器实现约束
- 分页技巧__在项目中使用QueryHelper辅助对象实现分页效果
热门文章
- magento登陆
- Firefox 网络调试工具
- SharePoint 2013 Step by Step—— How to Upload Multiple Documents in Document Library
- stm8 时钟输出引脚
- Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
- mac 下python使用venv 虚拟环境
- 微信小程序 开发过程中遇到的坑(一)
- 高精度运算库gmp
- [svc]高并发场景 LVS DR +KeepAlive高可用实现及ka的persistence_timeout参数
- 精通Docker的50个必备教程、工具、资源