Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

2024-09-29 04:28:56

先给大家展示效果图：

点击查看效果图源码下载

jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer。

文件引用：

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/ZoomVisualizer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
 $(window).ZoomVisualizer({
  added: added,
  removed: removed,
  object: '#zoom-visualizer',
  resizeInitial: true,
  centerThumbs: true,
  loader: "img/ajax-loader-overlay.gif",
  sliderOrientation: "vertical",
  positionZoom: {
   left: 10,
   right: 10,
   top:10,
   bottom:10
  }
 });
 function added() {
  console.log("相册打开了！");
 }
 function removed() {
  console.log("相册关闭了！");
 }
});
</script>

Html5+jQuery+CSS制作相册小记录

本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式将表现与内容分离话不多说,先上效果图: 代码如下: <!DOCTYPE html> <html> <head> <title>The second html page</title> <style ty
jQuery插件实现大图全屏图片相册

大图全屏图片相册jQuery插件,支持左右按钮切换以及点击大图自动切换图片,基于jQuery插件jQuery.album.js,插件支持参数自定义功能,viewMode:0没有缩略图 1有缩略图 2缩略图.全屏幕.可以对图片进行左右转,具体的参数大家可以查看jQuery.album.js文件,总之效果很不错,喜欢的朋友可学习下复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q
jQuery 网易相册鼠标移动显示隐藏效果实现代码

其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下直接上代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
基于spring+hibernate+JQuery开发之电子相册(附源码下载)

项目结构: 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码代码如下: drop database if exists db_ajax; create database db_
jquery实现相册一下滑动两次的方法

本文实例讲述了jquery实现相册一下滑动两次的方法.分享给大家供大家参考.具体实现方法如下: var t1=null; //定义为全局变量 $('body').on('touchstart', '#gallerySlider img', function(e){ var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; if (t1 == null){ t1 = new Date().getTime(); }els
非常漂亮的相册集使用jquery制作相册集

一.简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色图片.预览如下: 该页面的代码十分简单,我们以此为例逐步实现图像的翻滚: img-rollover.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
收集的10个免费的jQuery相册

这里和大家分享一些很棒的网页照片相册.是由Tympanus通过jQuery来实现的.或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的.你可以为你的Web项目添加色彩. 498)this.width=498;" border=0> 我们将看到这10个jQuery相册: 1. Photobie宝丽画廊 498)this.width=498;" border=0> 下载:http
jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')
jquery+CSS3实现3D拖拽相册效果

很久之前练习过的一个实践,复习完渐变.圆角.3D变形.拖拽等等来看源码,估计还不会太凌乱(◎﹏◎)哈哈哈效果图: HTML: <!doctype html> <html onselectstart="return false;" lang="en"> <head> <meta charset="UTF-8"> <title>3D拖拽相册
jquery+html仿翻页相册功能

今天心情大好,再发一篇最进前端实现的相册模仿功能. 这个相册是在一个网站的案例展示页面上实现的,没单独写出来,没时间,重用性也很差,以后有时间了再单独提取出来, 写这个玩意前,我在网上找了一些案例,但是一看代码都比较傻眼,固不想去研究,所以自己写了..... 下面是实现这个功能的截图如果你是一个前端,这个功能对你来说除了逻辑复杂点,其他的可能实现起都比较简单,我不是做前端的,所以前端HTML这块遇到了一些问题.下面我会将我遇到的这些问题的解决方法分享出来. 首先说下:postion这个属性以

Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

相关推荐

随机推荐