22

✏️ Editing: jquery.hotspot.js

/*
	Author: http://codecanyon.net/user/sike?ref=sike
*/

;(function($) {
    $.fn.hotSpot = function(options) {
	   	// plugin default options
		var settings = {
			triggerBy: 'click',  /* mouseover | click */
			delay: 0,
			slideshow: true,
			loop: true,
			autoHide: true,
			slideshowDelay: 4000,
			sticky: true,
			dropInEase: false,
	        displayVideo : true,
	        customIcon : '',
			clickImageToClose: true
		};

// extends settings with options provided
        if (options) {
			$.extend(settings, options);
		}

var _this = this;

if(settings.sticky){
				$(this).on('mouseover', function(event) {
					clearTimeout(_popOutID);
					clearTimeout(_slideID);
					_this.data('_allowOut', false);
				}).on('mouseleave', function(event) {
					if(_this.data('slideshow')||settings.autoHide&&_currentPop){
						clearTimeout(_popOutID);
						_popOutID = setTimeout(function() {
							_this.data('_allowOut', true);
	 	                   	if(Modernizr.csstransitions){
								_currentPop.removeClass('cardIn'+_currentPop.data('direction')).addClass('cardOut'+_currentPop.data('direction')).on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
									clearTimeout(_slideID);
									if(_this.data('slideshow')) startSlideshow();
								});
							}else{
								_currentPop.animate({opacity: 0}, 300, function(){
									clearTimeout(_slideID);
									if(_this.data('slideshow')) startSlideshow();
								});
							}
							_currentPop.data('isshow', false);
						}, settings.delay);
					}
				});
			}
		});

var _popover_image = $(".popover-image", _this)[0];
		var _containerW, _containerH;
		$("<img/>").attr("src", $(_popover_image).attr("src")).load(function() {
	        _containerW = this.width;
	        _containerH = this.height;
			$(window).trigger('resize');
	    });

var _slideID, _currentPopIndex = 0;
	    var _currentPop = null;
		if (settings.slideshow) {
			function startSlideshow(){
				clearTimeout(_slideID);
				_slideID = setTimeout(function() {
					nextPop();
				}, settings.slideshowDelay);
			}

if(Modernizr.csstransitions){
				_popArr[_currentPopIndex].show().addClass('animatedelay ' + 'cardIn'+_popArr[_currentPopIndex].data('direction')).on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
					$(window).trigger('resize');
					startSlideshow();
				});
			}else{
				_popArr[_currentPopIndex].show().delay(500).animate({opacity: 1}, 300, function(){
					startSlideshow();
				});
			}
			_popArr[_currentPopIndex].data('isshow', true);
			_currentPop = _popArr[_currentPopIndex];

}
				_currentPopIndex++;
				if(_currentPopIndex>_popArr.length - 1) {
					if(settings.loop){
						_currentPopIndex = 0;
					}else{
						return false;
					}
				}
				// start animation and slideshow if the content is no empty
				if(_popArr[_currentPopIndex].find('p').html()!=""){
					if(Modernizr.csstransitions){
						_popArr[_currentPopIndex].show().removeClass('animatedelay cardOut'+_popArr[_currentPopIndex].data('direction')).addClass('hotspotanimate ' + 'cardIn'+_popArr[_currentPopIndex].data('direction')).on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
							if(_this.data('slideshow')) startSlideshow();
						});
					}else{
						_popArr[_currentPopIndex].show().animate({opacity: 1}, 300, function(){
							if(_this.data('slideshow')) startSlideshow();
						});
					}
				}else{
					if(_this.data('slideshow')) startSlideshow();
				}

_popArr[_currentPopIndex].data('isshow', true);
				_currentPop = _popArr[_currentPopIndex];

}

};

$('.info-icon', _this).each(function(index) {
			if(settings.dropInEase){
				var _animateIndex = index > 15 ? index%15 : index;
				$(this).addClass('dropin' + _animateIndex + ' cq-dropInDown')
				var _label = $(this).next('.cq-hotspot-label');
				if(_label) _label.addClass('dropin' + _animateIndex + ' cq-dropInDown')
			}
			if(settings.triggerBy=="mouseover"){
				$(this).on('mouseover', function(event) {
					$(window).trigger('resize');
					clearTimeout(_popOutID);
					clearTimeout(_slideID);
					var _relatedPop = $(this).prev('.popover');
					if(_currentPop!=null && !_currentPop.is(_relatedPop)){
						if(settings.displayVideo){
							var _frame = _currentPop.find('iframe');
							if(_frame){
								_frame.attr('src', '');
							}

}
						if(Modernizr.csstransitions){
							_currentPop.removeClass('cardIn'+_currentPop.data('direction')).addClass('cardOut'+_currentPop.data('direction'));
						}else{
							_currentPop.animate({
								opacity: 0 },
								300, function() {
									$(this).hide();
							});
						}
						_currentPop.data('isshow', false);
					}
					_currentPop = _relatedPop;
					_currentPopIndex = _currentPop.data('index');
					if(_currentPop.find('p').html()!=""){
						if(settings.displayVideo){
							var _frame = _currentPop.find('iframe');
							if(_frame){
								// _frame.data('videourl', _frame.attr('src'));
								_frame.attr('src', _frame.data('videourl'));
							}

}
						if(Modernizr.csstransitions){
							_currentPop.show().removeClass('animatedelay cardOut'+_currentPop.data('direction')).addClass('hotspotanimate ' + 'cardIn'+_currentPop.data('direction'))
						}else{
							_currentPop.show().animate({opacity: 1}, 300);
						}

}

_currentPop.data('isshow', true);
				}).on('mouseleave', function(event) {
					// _currentPop = $('#'+$(this).data('target'));
					_currentPop = $(this).prev('.popover');
					if(_this.data('_allowOut')&&settings.autoHide){
						clearTimeout(_popOutID);
						_popOutID = setTimeout(function() {
							if(settings.displayVideo){
								var _frame = _currentPop.find('iframe');
								if(_frame){
									_frame.attr('src', '');
								}
							}
							if(Modernizr.csstransitions){
								_currentPop.removeClass('cardIn'+_currentPop.data('direction')).addClass('cardOut'+_currentPop.data('direction')).on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
									clearTimeout(_slideID);
									if(_this.data('slideshow')) startSlideshow();
								});
							}else{
								_currentPop.animate({opacity: 0}, 300, function(){
									$(this).hide();
									clearTimeout(_slideID);
									if(_this.data('slideshow')) startSlideshow();
								})
							}
							_currentPop.data('isshow', false);
						}, settings.delay);
					}
				}).on('click', function(event) {
					if($(this).data('link')!=""){
						window.open($(this).data('link'), $(this).data('target'));
					}
					event.preventDefault();
				});
			}else{
				$(this).on('click', function(event) {
					if($(this).data('link')!=""){
						window.open($(this).data('link'), $(this).data('target'));
					}
					event.preventDefault();
					clearTimeout(_slideID);
					$(window).trigger('resize');
					var _relatedPop = $(this).prev('.popover');
					if(_currentPop!=null && !_currentPop.is(_relatedPop)){
						if(settings.displayVideo){
							var _frame = _currentPop.find('iframe');
							if(_frame){
								_frame.attr('src', '');
							}

if(_currentPop.data('isshow')){
						if(Modernizr.csstransitions){
							_currentPop.removeClass('cardIn'+_currentPop.data('direction')).addClass('cardOut'+_currentPop.data('direction'));
						}else{
							_currentPop.animate({
								opacity: 0},
								300, function() {
									$(this).hide();
							});
						}
						_currentPop.data('isshow', false);
					}else{

if(settings.displayVideo){
							var _frame = _currentPop.find('iframe');
							if(_frame){
								// _frame.data('videourl', _frame.attr('src'));
								_frame.attr('src', _frame.data('videourl'));
							}

}

if(_currentPop.find('p').html()!=""){
							if(Modernizr.csstransitions){
								_currentPop.show().removeClass('animatedelay cardOut'+_currentPop.data('direction')).addClass('hotspotanimate ' + 'cardIn'+_currentPop.data('direction'))
							}else{
								_currentPop.show().animate({opacity: 1}, 300);
							}
						}
						_currentPop.data('isshow', true);
					}
				}).on('mouseleave', function(event) {
					if(_this.data('_allowOut')&&settings.autoHide){
						_currentPop = $(this).prev('.popover');
						clearTimeout(_popOutID);
						_popOutID = setTimeout(function() {
							if(settings.displayVideo){
								var _frame = _currentPop.find('iframe');
								if(_frame){
									_frame.attr('src', '');
								}
							}
							if(Modernizr.csstransitions){
								_currentPop.removeClass('cardIn'+_currentPop.data('direction')).addClass('cardOut'+_currentPop.data('direction')).on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
										clearTimeout(_slideID);
										if(_this.data('slideshow')) startSlideshow();
								});;
							}else{
								_currentPop.animate({
									opacity: 0},
									300, function() {
									$(this).hide();
								});
							}
							_currentPop.data('isshow', false);
						}, settings.delay);
					}
				});
			}

});

_this.on('click', '.popover-image', function(event) {
			event.preventDefault();
			if(settings.clickImageToClose) _this.hideCurrentPop();
		});

_this.hideCurrentPop = function(){
			if(_currentPop!=null){
				if(settings.displayVideo){
					var _frame = _currentPop.find('iframe');
					if(_frame){
						// _frame.data('videourl', _frame.attr('src'));
						_frame.attr('src', '');
					}

}

if(Modernizr.csstransitions){
					_currentPop.removeClass('cardIn'+_currentPop.data('direction')).addClass('cardOut'+_currentPop.data('direction'));
				}else{
					_currentPop.animate({
						opacity: 0},
						300, function() {
						$(this).hide();
					});
				}
				_currentPop.data('isshow', false);
			}
		}

_this.resetPopPos = _resetPopPos;

// make it responsive
		$(window).on('resize', function(event) {
			var _imgW = $('.popover-image', _this).width();
			var _imgH = $('.popover-image', _this).height();
			$('.info-icon', _this).each(function() {
				var _t = $(this).data('top');
				var _l = $(this).data('left');
				$(this).css({
					top: Math.floor((_t)*_imgH/_containerH - 18*(_containerH-_imgH)/_containerH),
					left: Math.floor((_l)*_imgW/_containerW - 10*(_containerW-_imgW)/_containerW)
				});
				$(this).next('.info-icon-pulse').css({
					top: Math.floor((_t)*_imgH/_containerH - 18*(_containerH-_imgH)/_containerH),
					left: Math.floor((_l)*_imgW/_containerW - 10*(_containerW-_imgW)/_containerW)
				});
				// var _label = $(this).next('.cq-hotspot-label');
				var _label = $(this).find('.cq-hotspot-label');
				if(_label){
					var _labelWidth = _label.width();
					// var _lt = _label.data('top');
					// var _ll = _label.data('left');
					if(_label.html()!=""){
						_label.show().css({
							'display': 'inline-block',
							'position': 'absolute',
							'visibility': 'visible',
							'opacity': 1
						});
					}else{
						_label.remove();
					}
				}

});
			// $('.cq-hotspot-label', _this).each(function() {
				// var _t = $(this).data('top');
				// var _l = $(this).data('left');
				// var _labelWidth = $(this).width();
				// $(this).show().css({
				// 	// 'display': 'inline-block',
				// 	'display': 'inline',
				// 	'visibility': 'visible',
				// 	'opacity': 1,
				// 	top: _t*_imgH/_containerH + 24,
				// 	left: _l*_imgW/_containerW,
				// 	'margin-left': -_labelWidth*.5+10
				// });
			// });
			_resetPopPos();
		});

$(window).trigger('resize');

return this;

};

})(jQuery);

jQuery(document).ready(function($) {
	jQuery('.hotspot-container').each(function() {
		jQuery(this).hotSpot({
	        slideshow : jQuery(this).data('slideshow'),
	        slideshowDelay : jQuery(this).data('slideshowdelay'),
	        triggerBy : jQuery(this).data('triggerby'),
            delay : jQuery(this).data('autohidedelay'),
	        displayVideo : jQuery(this).data('displayvideo'),
	        autoHide : jQuery(this).data('autohide'),
	        sticky: jQuery(this).data('sticky'),
			dropInEase: jQuery(this).data('dropinease'),
			customIcon: jQuery(this).data('customicon'),
	        clickImageToClose: jQuery(this).data('clickimageclose')
	    });
	});

});

MR SKB