jquery-photo-gallery图片查看器

最新推荐文章于 2024-08-23 08:18:04 发布

爱智慧的打工人

最新推荐文章于 2024-08-23 08:18:04 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43596905/article/details/106540756

版权

本文介绍了一个基于jQuery的photo gallery插件，详细解析了jquery.photo.gallery.js的源码，展示了如何创建和使用这个图片查看器，帮助开发者实现优雅的图片展示功能。

摘要由CSDN通过智能技术生成

<script src="${path}/resources/jquery-photo-gallery/jquery.photo.gallery.js"></script>
<div class="layui-body">
        <div style="padding: 15px;">
            <span class="font-blue" onclick="see()">查看</span>
            <div class="gallerys" id="lookImg" style="display: none">
                <img class="gallery-pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590577715954&di=5ca62390dfff3f212dd2353176c16889&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-07-19%2F5b50781d328f1.jpg"
                     onclick="$.openPhotoGallery(this)"/>
                <img class="gallery-pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590577715954&di=4e2225acd56dc86892b0e89c30eb2ec5&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201310%2F19%2F235356fyjkkugokokczyo0.jpg"
                     onclick="$.openPhotoGallery(this)"/>
                <img class="gallery-pic" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590577804932&di=c360ac9a475bdc7bbfa43d961550af7e&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2155983538%2C3860699715%26fm%3D214%26gp%3D0.jpg"
                     onclick="$.openPhotoGallery(this)"/>
            </div>

        </div>
    </div>
<script>


    function  see() {
    
        <%--$("#lookImg img").attr('src', "${path}" + obj.data.receiptPath);--%>
        setTimeout(function () {
    
            $("#lookImg img")[0].click()
        }, 100)
    }



</script>

jquery.photo.gallery.js源码

/*
 * AppGo使用的 图片查看插件
 * Author : lufeng@bingosoft.net
 * Version: 1.0.0
 * Date : 2015/11/17
 */
(function($) {
   

var windowMargin = 8; //加多边距的宽高，使得图片看起来有边框效果
  
//图片查看器
$.fn.extend({
   
  	
	photoGallery: function(options) {
   

		var isFirefox = navigator.userAgent.indexOf("Firefox") > -1 ;
		var MOUSEWHEEL_EVENT = isFirefox ? "DOMMouseScroll" : "mousewheel";
		var defaults = {
   
      		//图片缩放倍率
 	 		ratio : 1.2, 
 	 		//右下角缩略图宽度
 	 		thumbnailsWidth : 180, 
			//右下角缩略图高度
 	 	 	thumbnailsHeight : 120, 
 	 	 	//HTML模版
 	 	 	template : {
   
	 	 	 	//操作工具
	 	 	 	OPERTATION : '<div class="oper">' +
								'<span class="prev"><i class="icon_tool-prev"></i></span>' +
								'<span class="next"><i class="icon_tool-next"></i></span>' +
							 '</div>' +
							 '<div class="tool">' +
							 	'<div class="toolct">' +
									'<span class="oper_bigger" title="放大图片"><i class="icon_tool-bigger"></i></span>' +
									'<span class="oper_smaller" title="缩小图片"><i class="icon_tool-smaller"></i></span>' +
									'<span class="oper_rotate" title="向右旋转"><i class="icon_tool-rotate"></i></span>' +
								'</div>' +
							 '</div>',
				//缩略图
				THUMBNAILS : "<div class='thumbnails'>" +
				  		  	 	'<span class="thumbClose" title="关闭缩略图"><i class="icon_close-small"></i></span>' +
				  		  		'<img οndragstart="return false;"/>' +
				  		  		'<div class="thumbDrag"><span></span></div>' +
				  		 	 "</div>",
				//大图
				IMAGE : '<img class="image" οndragstart="return false;"/>' 	 	 	
 	 	 	}
		};
      
		var o = $.extend(defaults, options),
        	$gallery = $(this);
      	$gallery.append(o.template.OPERTATION).append(o.template.THUMBNAILS);    

      	var $tool = $(this).find(".tool"),
			$fullscreen = $(this).find(".oper_fullscreen"),
			$bigger = $(this).find(".oper_bigger"),
			$smaller =  $(this).find(".oper_smaller"),
			$rotate = $(this).find(".oper_rotate"),
			$download = $(this).find(".oper_download"),
			$prev = $(this).find(".prev"),
			$next = $(this).find(".next"),
			$thumbnails = $(this).find(".thumbnails"),
			$image,
			$thumbImg,
			imageWidth,
			imageHeight,
			imgRatio,
			dragX,
			dragY,
			cW,
			cH,
			w,h,isVertical,
			thumbX,
			thumbY;

		//上一张
		$prev.on('click',function(){
   
      		if(o.activeIndex > 0) o.activeIndex--;
  			toggleImage();	
      	}).on("mouseover",function(e){
   
      		if(o.activeIndex > 0)
  	   			$(this).addClass("active");
  	  	}).on("mouseout",function(e){
   
  			$(this).removeClass("active"); 
  	  	});	 
  	  
  	  	//下一张
      	$next.on('click',function(){
   
      		if(o.activeIndex < o.imgs.length -1) o.activeIndex++;
      		toggleImage();
      	}).on("mouseover",function(e){
   
      		if(o.activeIndex < o.imgs.length -1)
  	   			$(this).addClass("active");
  	 	})