photoslide.js 4.83 KB

/**
 * @package plugin/photoslide.js
 * @author:ww(wei.wang@yoho.cn)
 * @date:2014-08-19
 */
var $=require("jquery");
require("jquery.imagesloaded");
var tmpInfo=null;
window.onresize=function(){
	exports.initSlide(tmpInfo);	
};
exports.initSlide=function(info){
	tmpInfo=info;
	var defaults={
		isMobile:false,
		mobileStartDrage:window.photoSlide_StartDrage||function(){},
		mobileEndDrage:function(){},
		isAndroid:false	//是否为安卓客户端程序
	};
	var opts=$.extend(defaults,info);
	var isMobile=opts.isMobile;
	var photos=$(".photoslider_moused_over");
	if(photos.length>0)
	{
		var maxWidth={},maxHeight={};
		var brow=getBrowType();
		photos.each(function(index,obj){
			//alert(index);
			var tmpId="photoslider_moused_over_"+index;
			$(obj).attr("id",tmpId);
			var imgs={};
			
			$(obj).find(".photoslider_right_image").find("img:first").css({"max-width":"100%"}).imagesLoaded(function(){
				imgs[tmpId]=$(this).attr("src");
				maxWidth[tmpId]=$(this).width();
				maxHeight[tmpId]=$(this).height();
				$(obj).find(".photoslider_left_image img").css({
					"max-width":maxWidth[tmpId],
					"max-height":maxHeight[tmpId],
					"min-width":maxWidth[tmpId],
					"min-height":maxHeight[tmpId],
					"width":maxWidth[tmpId],
					"height":maxHeight[tmpId]
				}).show();
				$(".photoslider_drag_message")
				.html("← SLIDE →")
				.show();
				//var u = navigator.userAgent;
				
				if(isMobile&&$(obj).find(".drageObject")[0]===null||brow.bIsIpad||brow.bIsAndroid)
				{
						$("<div/>").css({
							position:"absolute",
							height:maxHeight[tmpId]*0.2,
							width:maxWidth[tmpId],
							top:0,
							left:0,
							"z-index":100
						}).attr("noslider","yes").appendTo(obj);
						$("<div/>").css({
							position:"absolute",
							height:maxHeight[tmpId]*0.3,
							width:maxWidth[tmpId],
							bottom:0,
							left:0,
							"z-index":100
							//background:"#f00"
						}).attr("noslider","yes").appendTo(obj);
						var drageObject=$("<div/>").attr("class","drageObject").css({
							width:20,
							height:"100%",
							margin:"0 0 0 -10px",
							top:0,
							left:"50%",
							//background:"#f00",
							position:"absolute",
							"z-index":9999
						}).appendTo(obj);
						
						drageObject.bind({
							"touchstart":function(){
								$(this).parent().find(".photoslider_drag_message").fadeOut();
								//opts.mobileStartDrage();
								if(opts.isAndroid===true)
								{
									try{
										window.yohoboy.clickOnAndroid(true); 
									}catch(e){}
									
								}
								
							},
							"touchmove":function(event){
								var pointX = event.originalEvent.changedTouches[0].pageX;
								var left=$(this).parent().offset().left;
								var mouseX=pointX-left;
								
								if(mouseX<$(this).parent().parent().width()&&mouseX>0)
								{
									$(this).parent().find(".photoslider_left_image").width(mouseX);
									$(this).css({left:mouseX});
									//return false;
								}
								return false;
							},
							"touchend":function(){
								if(opts.isAndroid===true)
								{
									try{
										window.yohoboy.clickOnAndroid(false); 
									}catch(e){}
								}
							}
						});
						
						//var self=this;
						
				}
			});
		});
		if(isMobile||brow.bIsIpad||brow.bIsAndroid)
		{
			
			
			window.onresize=function(){
				exports.initSlide(info);
				
			//var tmpHtml=$(this).parent().parent().parent().html();
							
		};
	}
		
		if(isMobile===false)
			photos.bind({
				"mousemove":function(event){
					var pointX = event.pageX;
					var left=$(this).offset().left;
					var mouseX=pointX-left;
					if(mouseX<maxWidth[this.id]&&(!isMobile))
					{
						$(this).find(".photoslider_left_image").width(mouseX);
						//$(this).find(".photoslider_drag_message").css({left:mouseX});
					}	
				},
				"mouseover":function(){
					var drag_handler=$(this).find(".photoslider_drag_message");
					drag_handler.fadeOut();
				},
				mouseout:function(event){
					var x=event.pageX;
					if(x-$(this).offset().left>maxWidth[this.id])
					{
						$(this).find(".photoslider_left_image").width(maxWidth[this.id]);
					}
					else if(x-$(this).offset().left<0){
						$(this).find(".photoslider_left_image").width(0);
					}
				}
			});
		
	}
};

function getBrowType(){
    	var info={};
    	var sUserAgent = navigator.userAgent.toLowerCase();   
	    info.bIsIpad = sUserAgent.match(/ipad/i) == "ipad";     
	    info.bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";   
	    info.bIsMidp = sUserAgent.match(/midp/i) == "midp";   
	    info.bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";   
	    info.bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";   
	    info.bIsAndroid = sUserAgent.match(/android/i) == "android";   
	    info.bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";   
	    info.bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
	    return info; 
    }