photoslide.js 4.83 KB
/**
 * @package plugin/photoslide.js
 * @author:ww(wei.wang@yoho.cn)
 * @date:2014-08-19
 */
var $ = require("jquery");
require("lazyload");
require("yoho-imagesloaded");
var tmpInfo = null;
window.onresize = function() {
	if (tmpInfo != null) {
		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;
}