izimodal 1.2.0 → 1.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 02ea3bc1c9e43547fcdcd2c7a4fca8aa4cd396b9
-  data.tar.gz: 61b8b2e4c02d0a79f34204ffc8121d74750c0329
+  metadata.gz: faff0444533a06c88d606685821ef554f5cd4ba0
+  data.tar.gz: 900dfa5d9192d9c87f25c3948720cb146f633ded
 SHA512:
-  metadata.gz: 76ed500d4c24fd93af64c2d6b58ab0dc9455446f5f912e497a4c631ba8ab250c9a5cc88453471ee1747469163357c690644c70da8d74420d38daea2cd7a7e73f
-  data.tar.gz: e86241b8221e7efb1aca4c27e2f470758793e3e399600194c73abb1d023e8fd176e72cbf7e5c57d271069a1a108574195d79b7a7227e37ee394b4838845b610e
+  metadata.gz: 9f2fc417ff60a8e97974486d91f4b54b8d711297ceb46d7055094b47c6b120a0ac652a894bf9762ebb95fb30f78f12da8ccd70e594a93fd336fa47269fea14ca
+  data.tar.gz: 8fb9d8f91e7117d1754cbfa2e93af3099b087ef3487dd065d8c3d7eb48fb56fe865332ea4ccb27949de90a09b401e23db66f953ce3a7005cad92353e8d86fdbd

data/lib/izimodal/version.rb

@@ -1,3 +1,3 @@
 module Izimodal
-  VERSION = "1.2.0"
+  VERSION = "1.3.2"
 end

data/vendor/assets/javascripts/iziModal.js

@@ -1,5 +1,5 @@
 /*
-* iziModal | v1.2.0
+* iziModal | v1.3.2
 * http://izimodal.marcelodolce.com
 * by Marcelo Dolce.
 */
@@ -7,6 +7,9 @@
 
 	"use strict";
 
+	var $window = $(window);
+    var $document = $(document);
+
 	var PLUGIN_NAME = 'iziModal';
 
 	var STATES = {
@@ -34,11 +37,8 @@
 		}
 	}
 	var animationEvent = whichAnimationEvent();
-
-	var isMobile = false;
-	if (/Mobi/.test(navigator.userAgent)) {
-	    isMobile = true;
-	}
+	var isMobile = (/Mobi/.test(navigator.userAgent)) ? true : false;
+	var autoOpenModal = 0;
 
 	var iziModal = function (element, options) {
 		this.init(element, options);
@@ -54,44 +54,65 @@
 
 			this.$element = $(element);
 			this.id = this.$element.attr('id');
+			this.content = this.$element.html();
 			this.state = STATES.CLOSED;
 			this.options = options;
+			this.width = 0;
 			this.timer = null;
 			this.timerTimeout = null;
+			this.progressBar = null;
+            this.isPaused = false;
 			this.isFullscreen = false;
             this.headerHeight = 0;
-			this.$header = $('<div class="'+PLUGIN_NAME+'-header"><h2 class="'+PLUGIN_NAME+'-header-title">' + options.title + '</h2><p class="'+PLUGIN_NAME+'-header-subtitle">' + options.subtitle + '</p><a href="javascript:void(0)" class="'+PLUGIN_NAME+'-button '+PLUGIN_NAME+'-button-close" data-'+PLUGIN_NAME+'-close></a></div>');
+            this.modalHeight = 0;
             this.$overlay = $('<div class="'+PLUGIN_NAME+'-overlay" style="background-color:'+options.overlayColor+'"></div>');
+			this.$navigate = $('<div class="'+PLUGIN_NAME+'-navigate"><div class="'+PLUGIN_NAME+'-navigate-caption">Use</div><button class="'+PLUGIN_NAME+'-navigate-prev"></button><button class="'+PLUGIN_NAME+'-navigate-next"></button></div>');
+            this.group = {
+            	name: this.$element.attr('data-'+PLUGIN_NAME+'-group'),
+            	index: null,
+            	ids: []
+            };
+            if(this.group.name === undefined && options.group !== ""){
+            	this.group.name = options.group;
+            	this.$element.attr('data-'+PLUGIN_NAME+'-group', options.group);
+            }
+            if(this.$element.attr('data-'+PLUGIN_NAME+'-title') !== undefined){
+            	options.title = this.$element.attr('data-'+PLUGIN_NAME+'-title');
+            }
+			if(this.$element.attr('data-'+PLUGIN_NAME+'-subtitle') !== undefined){
+            	options.subtitle = this.$element.attr('data-'+PLUGIN_NAME+'-subtitle');
+            }	
+            if(this.$element.attr('data-'+PLUGIN_NAME+'-icon') !== undefined){
+            	options.icon = this.$element.attr('data-'+PLUGIN_NAME+'-icon');
+            }
+            if(this.options.loop === true){
+            	this.$element.attr('data-'+PLUGIN_NAME+'-loop', true);
+            }
 
+			this.$header = $('<div class="'+PLUGIN_NAME+'-header"><h2 class="'+PLUGIN_NAME+'-header-title">' + options.title + '</h2><p class="'+PLUGIN_NAME+'-header-subtitle">' + options.subtitle + '</p><a href="javascript:void(0)" class="'+PLUGIN_NAME+'-button '+PLUGIN_NAME+'-button-close" data-'+PLUGIN_NAME+'-close></a></div>');
+            
             if (options.fullscreen === true) {
             	this.$header.append('<a href="javascript:void(0)" class="'+PLUGIN_NAME+'-button '+PLUGIN_NAME+'-button-fullscreen" data-'+PLUGIN_NAME+'-fullscreen></a>');
             	this.$header.css('padding-right', '76px');
             }
 
-			if (options.timeoutProgressbar === true && !isNaN(options.timeout) && options.timeout !== false && options.timeout !== 0) {
+			if (options.timeoutProgressbar === true && !isNaN(parseInt(options.timeout)) && options.timeout !== false && options.timeout !== 0) {
 				this.$header.prepend('<div class="'+PLUGIN_NAME+'-progressbar"><div style="background-color:'+options.timeoutProgressbarColor+'"></div></div>');
             }
 
-            if (options.subtitle === '') {
-        		this.$header.addClass(PLUGIN_NAME+'-noSubtitle');
-            }
-
             if (options.iframe === true) {
-                this.$element.html('<div class="'+PLUGIN_NAME+'-wrap"><div class="'+PLUGIN_NAME+'-content '+PLUGIN_NAME+'-content-loader"><iframe class="'+PLUGIN_NAME+'-iframe"></iframe>' + this.$element.html() + "</div></div>");
+                this.$element.html('<div class="'+PLUGIN_NAME+'-wrap"><div class="'+PLUGIN_NAME+'-content"><iframe class="'+PLUGIN_NAME+'-iframe"></iframe>' + this.content + "</div></div>");
                 
 	            if (options.iframeHeight !== null) {
 	                this.$element.find('.'+PLUGIN_NAME+'-iframe').css('height', options.iframeHeight);
 	            }
-
             } else {
-            	this.$element.html('<div class="'+PLUGIN_NAME+'-wrap"><div class="'+PLUGIN_NAME+'-content">' + this.$element.html() + '</div></div>');
+            	this.$element.html('<div class="'+PLUGIN_NAME+'-wrap"><div class="'+PLUGIN_NAME+'-content">' + this.content + '</div></div>');
             }
-            
-            $(document.body).find('style[rel='+this.id+']').remove();
-
-            if(typeof options.padding !== 'undefined' || options.padding !== 0)
-                this.$element.find('.'+PLUGIN_NAME+'-content').css('padding', options.padding);
 
+            if (options.subtitle === '') {
+        		this.$header.addClass(PLUGIN_NAME+'-noSubtitle');
+            }
 
             if (options.title !== "" || options.subtitle !== "") {
 
@@ -99,66 +120,105 @@
                     this.$element.css('border-bottom', '3px solid ' + options.headerColor + '');
                     this.$header.css('background', this.options.headerColor);
                 }
-                if (options.iconClass !== null) {
-                    this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon ' + options.iconClass + '"></i>');
-                    this.$header.find("."+PLUGIN_NAME+'-header-icon').css('color', options.iconColor);
+                if (options.icon !== null) {
+                    this.$header.prepend('<i class="'+PLUGIN_NAME+'-header-icon ' + options.icon + '"></i>');
+                    this.$header.find('.'+PLUGIN_NAME+'-header-icon').css('color', options.iconColor);
                 }
-                this.$element.prepend(this.$header);
+                this.$element.css('overflow', 'hidden').prepend(this.$header);
             }
 
-			var separators = /%|px|em|cm/,
-				wClear = String(options.width).split(separators),
-				w = String(options.width),
-				medida = "px";
-				wClear = String(wClear).split(",")[0];
-
-			if(isNaN(options.width)){
-				if( String(options.width).indexOf("%") != -1){
-					medida = "%";
-				} else {
-					medida = w.slice("-2");
-				}
+			if(options.zindex !== null && !isNaN(parseInt(options.zindex)) ){
+			 	this.$element.css('z-index', options.zindex);
+			 	this.$navigate.css('z-index', options.zindex-1);
+			 	this.$overlay.css('z-index', options.zindex-2);
 			}
 
-            this.$element.css({
-                'margin-left': -(wClear / 2) + medida,
-                'max-width': parseInt(wClear) + medida
-            });
+			if(options.radius !== ""){
+                this.$element.css('border-radius', options.radius);
+            }
+
+            if(options.padding !== ""){
+                this.$element.find('.'+PLUGIN_NAME+'-content').css('padding', options.padding);
+            }
 
-			this.mediaQueries = '<style rel="' + this.id + '">@media handheld, only screen and (max-width: ' + wClear + 'px) { #' + this.$element[0].id + '{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; left: 0 !important; } }</style>';
-        	$(document.body).append(this.mediaQueries);
+            if(options.theme !== ""){
+				this.$element.addClass(options.theme);
+            }
 
-            this.$element.addClass(PLUGIN_NAME + " " + options.theme);
+            this.$element.addClass(PLUGIN_NAME);
 
 			if(options.openFullscreen === true){
-			    that.isFullscreen = true;
-			    that.$element.addClass('isFullscreen');
+			    this.isFullscreen = true;
+			    this.$element.addClass('isFullscreen');
 			}
 
-            // Adjusting vertical positioning
-            this.$element.css('margin-top', parseInt(-(this.$element.innerHeight() / 2)) + 'px');
+			if(options.attached === 'top' || this.$element.attr('data-'+PLUGIN_NAME+'-attached') == 'top' ){
+			    this.$element.addClass('isAttachedTop');
+			}
 
-            if(this.$element.find('.'+PLUGIN_NAME+'-header').length){
-            	this.$element.css('overflow', 'hidden');
-            }
+			if(options.attached === 'bottom' || this.$element.attr('data-'+PLUGIN_NAME+'-attached') == 'bottom'){
+			    this.$element.addClass('isAttachedBottom');
+			}
 
-            // Close when button pressed
-            this.$element.on('click', '[data-'+PLUGIN_NAME+'-close]', function (e) {
-                e.preventDefault();
-                that.close();
-            });
+            (function setPositioning(){
 
-            // Expand when button pressed
-            this.$element.on('click', '[data-'+PLUGIN_NAME+'-fullscreen]', function (e) {
-                e.preventDefault();
-                if(that.isFullscreen === true){
-					that.isFullscreen = false;
-	                that.$element.removeClass('isFullscreen');
-                } else {
-	                that.isFullscreen = true;
-	                that.$element.addClass('isFullscreen');
-                }
-            });
+	            $(document.body).find('style[rel='+that.id+']').remove();
+
+				var separators = /%|px|em|cm/,
+					wClear = String(options.width).split(separators),
+					w = String(options.width),
+					medida = "px";
+					wClear = String(wClear).split(",")[0];
+
+
+				if(isNaN(options.width)){
+					
+					if( String(options.width).indexOf("%") != -1){
+						medida = "%";
+					} else {
+						medida = w.slice("-2");
+					}
+				}
+	            that.$element.css({
+	                'margin-left': -(wClear / 2) + medida,
+	                'max-width': parseInt(wClear) + medida
+	            });
+	            
+	        	that.width = that.$element.outerWidth();
+
+				that.mediaQueries = '<style rel="' + that.id + '">@media handheld, only screen and (max-width: ' + that.width + 'px) { #' + that.id + '{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; left: 0 !important; border-radius:0!important} #' + that.id + ' .'+PLUGIN_NAME+'-header{border-radius:0!important} }</style>';
+
+	        	$(document.body).append(that.mediaQueries);
+
+	            // Adjusting vertical positioning
+	            that.$element.css('margin-top', parseInt(-(that.$element.innerHeight() / 2)) + 'px');
+			})();
+		},
+
+		setGroup: function(groupName){
+
+			var that = this,
+				group = this.group.name || groupName;
+				this.group.ids = [];
+
+			if( groupName !== undefined && groupName !== this.group.name){
+				group = groupName;
+				this.group.name = group;
+				this.$element.attr('data-'+PLUGIN_NAME+'-group', group);				
+			}
+			if(group !== undefined && group !== ""){
+
+            	var count = 0;
+            	$.each( $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group='+group+']') , function(index, val) {
+
+					that.group.ids.push($(this).attr('id'));
+
+					if(that.id == $(this).attr('id')){
+						that.group.index = count;
+					}
+        			count++;
+            	});
+            }
 		},
 
 		toggle: function () {
@@ -176,154 +236,270 @@
 
 			var that = this;
 
-			if (param && typeof(param) === "function") {
-		        param(that);
-		    }
+			function opened(){
+			    
+			    // console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Opened.');
 
-			if(this.options.iframe === true){
+		    	that.$element.trigger(STATES.OPENED);
+				that.state = STATES.OPENED;
+				if (that.options.onOpened && typeof(that.options.onOpened) === "function") {
+			        that.options.onOpened(that);
+			    }
+			}
 
-				var href = null;
-				if(this.options.iframeURL !== null){
-					href = this.options.iframeURL;
-				} else {
+			function bindEvents(){
+
+	            // Close when button pressed
+	            that.$element.off('click', '[data-'+PLUGIN_NAME+'-close]').on('click', '[data-'+PLUGIN_NAME+'-close]', function (e) {
+	                e.preventDefault();
+
+	                var transition = $(e.currentTarget).attr('data-'+PLUGIN_NAME+'-transitionOut');
+
+	                if(transition !== undefined){
+	                	that.close({transition:transition});
+	                } else {
+	                	that.close();
+	                }
+	            });
+
+	            // Expand when button pressed
+	            that.$element.off('click', '[data-'+PLUGIN_NAME+'-fullscreen]').on('click', '[data-'+PLUGIN_NAME+'-fullscreen]', function (e) {
+	                e.preventDefault();
+	                if(that.isFullscreen === true){
+						that.isFullscreen = false;
+		                that.$element.removeClass('isFullscreen');
+	                } else {
+		                that.isFullscreen = true;
+		                that.$element.addClass('isFullscreen');
+	                }
+					if (that.options.onFullscreen && typeof(that.options.onFullscreen) === "function") {
+				        that.options.onFullscreen(that);
+				    }
+				    that.$element.trigger('fullscreen', that);
+	            });
+
+	            // Next modal
+	            that.$navigate.off('click', '.'+PLUGIN_NAME+'-navigate-next').on('click', '.'+PLUGIN_NAME+'-navigate-next', function (e) {
+	            	that.next(e);
+	            });
+	            that.$element.off('click', '[data-'+PLUGIN_NAME+'-next]').on('click', '[data-'+PLUGIN_NAME+'-next]', function (e) {
+	            	that.next(e);
+	            });
+
+	            // Previous modal
+	            that.$navigate.off('click', '.'+PLUGIN_NAME+'-navigate-prev').on('click', '.'+PLUGIN_NAME+'-navigate-prev', function (e) {
+	            	that.prev(e);
+	            });
+				that.$element.off('click', '[data-'+PLUGIN_NAME+'-prev]').on('click', '[data-'+PLUGIN_NAME+'-prev]', function (e) {
+	            	that.prev(e);
+	            });
+			}
+
+		    if(this.state == STATES.CLOSED){
+
+		    	bindEvents();
+
+	            this.$element.trigger(STATES.OPENING);
+				this.state = STATES.OPENING;
+				this.setGroup();
+
+				// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Opening...');
+
+				if(this.options.iframe === true){
+					
+					this.$element.find('.'+PLUGIN_NAME+'-content').addClass(PLUGIN_NAME+'-content-loader');
+
+					this.$element.find('.'+PLUGIN_NAME+'-iframe').on('load', function(){
+						$(this).parent().removeClass(PLUGIN_NAME+'-content-loader');
+					});
+
+					var href = null;
 					try {
-						href = param.target.href;
-						if(href !== undefined){
-							href = param.target.href;
-						}
+						href = $(param.currentTarget).attr('href') !== "" ? $(param.currentTarget).attr('href') : null;
 					} catch(e) {
 						console.warn(e);
 					}
+					if( (this.options.iframeURL !== null) && (href === null || href === undefined)){
+						href = this.options.iframeURL;
+					}
+					if(href === null || href === undefined){
+						alert("Failed to find iframe URL.");
+					}
+				    this.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', href);
 				}
-			    this.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', href);
-			}
-
-            this.$element.trigger(STATES.OPENING);
-			this.state = STATES.OPENING;
 
-			// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Opening...');
+				if (this.options.bodyOverflow || isMobile){
+					$(document.body).css('overflow', 'hidden');
+				}
 
-			if (this.options.bodyOverflow || isMobile){
-				$(document.body).css('overflow', 'hidden');
-			}
+				if (that.options.onOpening && typeof(that.options.onOpening) === "function") {
+			        that.options.onOpening(this);
+			    }			    
+				(function open(){
 
-			if (that.options.onOpening && typeof(that.options.onOpening) === "function") {
-		        that.options.onOpening(this);
-		    }
+			    	if(that.group.ids.length > 1 ){
 
-			function opened(){
-		    	that.$element.trigger(STATES.OPENED);
-				that.state = STATES.OPENED;
+			    		that.$navigate.appendTo('body');
+			    		that.$navigate.addClass(that.options.transitionInOverlay);
 
-			    // console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Opened.');
+			    		if(that.options.navigateCaption === true){
+			    			that.$navigate.find('.'+PLUGIN_NAME+'-navigate-caption').show();
+			    		}
 
-				if (that.options.onOpened && typeof(that.options.onOpened) === "function") {
-			        that.options.onOpened(that);
-			    }
-			}
+				    	if(that.options.navigateArrows === true || that.options.navigateArrows === 'closeToModal'){
+					    	that.$navigate.find('.'+PLUGIN_NAME+'-navigate-prev').css('margin-left', -((that.width/2)+84));
+					    	that.$navigate.find('.'+PLUGIN_NAME+'-navigate-next').css('margin-right', -((that.width/2)+84));
+				    	} else {
+			    			that.$navigate.find('.'+PLUGIN_NAME+'-navigate-prev').css('left', 0);
+			    			that.$navigate.find('.'+PLUGIN_NAME+'-navigate-next').css('right', 0);
+				    	}
+			    		
+			    		var loop;
+						if(that.group.index === 0){
 
-			this.$overlay.appendTo('body');
+							loop = $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group="'+that.group.name+'"][data-'+PLUGIN_NAME+'-loop]').length;
 
-			if (this.options.transitionInOverlay) {
-				this.$overlay.addClass(this.options.transitionInOverlay);
-			}
+							if(loop === 0 && that.options.loop === false)
+								that.$navigate.find('.'+PLUGIN_NAME+'-navigate-prev').hide();
+				    	}
+				    	if(that.group.index+1 === that.group.ids.length){
 
-			if (this.options.transitionInModal !== '') {
+				    		loop = $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group="'+that.group.name+'"][data-'+PLUGIN_NAME+'-loop]').length;
 
-				this.$element.addClass(this.options.transitionInModal).show();
+							if(loop === 0 && that.options.loop === false)
+								that.$navigate.find('.'+PLUGIN_NAME+'-navigate-next').hide();
+				    	}
+			    	}
 
-				this.$element.find('.'+PLUGIN_NAME+'-wrap').one(animationEvent, function () {
+					if(that.options.overlay === true){
+						that.$overlay.appendTo('body');
+					}
 
-				    that.$element.removeClass(that.options.transitionInModal);
-				    that.$overlay.removeClass(that.options.transitionInOverlay);
+					if (that.options.transitionInOverlay) {
+						that.$overlay.addClass(that.options.transitionInOverlay);
+					}
 
-					opened();
-				});
+					var transitionIn = that.options.transitionIn;
 
-			} else {
-				this.$element.show();
-				opened();
-			}
+					if( typeof param == 'object' ){
+						if(param.transition !== undefined || param.transitionIn !== undefined){
+							transitionIn = param.transition || param.transitionIn;
+						}
+					}
 
-			if (this.options.timeout !== false && !isNaN(this.options.timeout) && this.options.timeout !== false && this.options.timeout !== 0) {
-
-				if (this.options.timeoutProgressbar === true) {
-
-					var progressBar = {
-	                    hideEta: null,
-	                    maxHideTime: null,
-	                    el: this.$element.find('.'+PLUGIN_NAME+'-progressbar > div'),
-	                    updateProgress: function()
-	                    {
-		                    var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
-		                    progressBar.el.width(percentage + '%');
-		                    if(percentage < 0){
-		                    	that.close();	                    	
-		                    }	                    	
-	                    }
-	                };
-					if (this.options.timeout > 0) {
-                        progressBar.maxHideTime = parseFloat(this.options.timeout);
-                        progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
-                        this.timerTimeout = setInterval(progressBar.updateProgress, 10);
-                    }
+					if (transitionIn !== '') {
 
-				} else {
+						that.$element.addClass("transitionIn "+transitionIn).show();
+						that.$element.find('.'+PLUGIN_NAME+'-wrap').one(animationEvent, function () {
 
-					this.timerTimeout = setTimeout(function(){
-						that.close();
-					}, that.options.timeout);
-				}
-			}
+						    that.$element.removeClass(transitionIn + " transitionIn");
+						    that.$overlay.removeClass(that.options.transitionInOverlay);
+						    that.$navigate.removeClass(that.options.transitionInOverlay);
 
-            // Close on overlay click
-            if (this.options.overlayClose && !this.$element.hasClass(this.options.transitionOutModal)) {
-            	that.$overlay.click(function () {
-                    that.close();
-            	});
-            }
+							opened();
+						});
 
-			if (this.options.focusInput){
-		    	that.$element.find(':input:not(button):enabled:visible:first').focus(); // Focus on the first field
-			}
-			
-			(function updateTimer(){
-		    	that.recalculateLayout();					
-			    that.timer = setTimeout(updateTimer, 200);
-			})();
+					} else {
+						that.$element.show();
+						// ver se o overlay tbm será incluído!
+						opened();
+					}
 
-            // Close when the Escape key is pressed
-            $(document).keydown(function (e) {
-                if (that.options.closeOnEscape && e.keyCode === 27) {
-                    that.close();
-                }
-            });
 
-		},
+					if(that.options.pauseOnHover === true && that.options.pauseOnHover === true && that.options.timeout !== false && !isNaN(parseInt(that.options.timeout)) && that.options.timeout !== false && that.options.timeout !== 0){
 
-		close: function (param) {
+						that.$element.off('mouseenter').on('mouseenter', function(event) {
+							event.preventDefault();
+							that.isPaused = true;
+						});
+						that.$element.off('mouseleave').on('mouseleave', function(event) {
+							event.preventDefault();
+							that.isPaused = false;
+						});
+					}
 
-			var that = this;
+				})();
+
+
+				if (this.options.timeout !== false && !isNaN(parseInt(this.options.timeout)) && this.options.timeout !== false && this.options.timeout !== 0) {
+
+					if (this.options.timeoutProgressbar === true) {
+
+						this.progressBar = {
+		                    hideEta: null,
+		                    maxHideTime: null,
+		                    currentTime: new Date().getTime(),
+		                    el: this.$element.find('.'+PLUGIN_NAME+'-progressbar > div'),
+		                    updateProgress: function()
+		                    {
+								if(!that.isPaused){
+									
+									that.progressBar.currentTime = that.progressBar.currentTime+10;
+
+				                    var percentage = ((that.progressBar.hideEta - (that.progressBar.currentTime)) / that.progressBar.maxHideTime) * 100;
+				                    that.progressBar.el.width(percentage + '%');
+				                    if(percentage < 0){
+				                    	that.close();
+				                    }
+								}
+		                    }
+		                };
+						if (this.options.timeout > 0) {
+
+	                        this.progressBar.maxHideTime = parseFloat(this.options.timeout);
+	                        this.progressBar.hideEta = new Date().getTime() + this.progressBar.maxHideTime;
+	                        this.timerTimeout = setInterval(this.progressBar.updateProgress, 10);
+	                    }
 
-			if (param && typeof(param) === "function") {
-		        param(that);
-		    }
+					} else {
 
-            $(document).off("keydown");
+						this.timerTimeout = setTimeout(function(){
+							that.close();
+						}, that.options.timeout);
+					}
+				}
 
-			this.state = STATES.CLOSING;
-			this.$element.trigger(STATES.CLOSING);
-			// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Closing...');
+	            // Close on overlay click
+	            if (this.options.overlayClose && !this.$element.hasClass(this.options.transitionOut)) {
+	            	this.$overlay.click(function () {
+	                    that.close();
+	            	});
+	            }
 
-            clearTimeout(this.timer);
-            clearTimeout(this.timerTimeout);
+				if (this.options.focusInput){
+			    	this.$element.find(':input:not(button):enabled:visible:first').focus(); // Focus on the first field
+				}
+				
+				(function updateTimer(){
+			    	that.recalculateLayout();					
+				    that.timer = setTimeout(updateTimer, 300);
+				})();
+
+	            (function setUrlHash(){
+					if(that.options.history || isMobile){
+		            	var oldTitle = document.title;
+			            document.title = oldTitle + " - " + that.options.title;
+						document.location.hash = that.id;
+						document.title = oldTitle;
+						//history.pushState({}, that.options.title, "#"+that.id);
+					}
+	            })();
 
-			if (that.options.onClosing && typeof(that.options.onClosing) === "function") {
-		        that.options.onClosing(this);
+	            // Close when the Escape key is pressed
+	            $document.keydown(function (e) {
+	                if (that.options.closeOnEscape && e.keyCode === 27) {
+	                    that.close();
+	                }
+	            });
 		    }
 
-			function closed(){
+		},
+
+		close: function (param) {
 
+			var that = this;
+
+			function closed(){
                 if (that.options.iframe === true) {
                     that.$element.find('.'+PLUGIN_NAME+'-iframe').attr('src', "");
                 }
@@ -342,38 +518,153 @@
 				if (that.options.onClosed && typeof(that.options.onClosed) === "function") {
 			        that.options.onClosed(that);
 			    }
+
+				if(that.options.restoreDefaultContent === true){
+				    that.$element.find('.'+PLUGIN_NAME+'-content').html( that.content );
+				}
 			}
 
-            if (this.options.transitionOutModal !== '') {
+            if(this.state == STATES.OPENED || this.state == STATES.OPENING){
+
+            	$document.off("keydown");
+
+				this.state = STATES.CLOSING;
+				this.$element.trigger(STATES.CLOSING);
+
+				// console.info('[ '+PLUGIN_NAME+' | '+this.id+' ] Closing...');
+
+	            clearTimeout(this.timer);
+	            clearTimeout(this.timerTimeout);
+
+				if (that.options.onClosing && typeof(that.options.onClosing) === "function") {
+			        that.options.onClosing(this);
+			    }
+
+				var transitionOut = this.options.transitionOut;
+
+				if( typeof param == 'object' ){
+					if(param.transition !== undefined || param.transitionOut !== undefined){
+						transitionOut = param.transition || param.transitionOut;
+					} 
+				}
 
-                this.$element.attr('class', PLUGIN_NAME + " " + this.options.transitionOutModal + " " + this.options.theme + " " + String((this.isFullscreen === true) ? 'isFullscreen' : ''));
-				this.$overlay.attr('class', PLUGIN_NAME + "-overlay " + this.options.transitionOutOverlay);
+				if (transitionOut !== '') {
 
-                this.$element.one(animationEvent, function () {
-                    
-                    if( that.$element.hasClass(that.options.transitionOutModal) ){
+	                this.$element.attr('class', PLUGIN_NAME + " transitionOut " + transitionOut + " " + this.options.theme + " " + String((this.isFullscreen === true) ? 'isFullscreen' : '') + " " + String((this.options.attached === 'top') ? 'isAttachedTop' : '') + " " + String((this.options.attached === 'bottom') ? 'isAttachedBottom' : ''));
+					this.$overlay.attr('class', PLUGIN_NAME + "-overlay " + this.options.transitionOutOverlay);
+					this.$navigate.attr('class', PLUGIN_NAME + "-navigate " + this.options.transitionOutOverlay);
 
-                        that.$element.removeClass(that.options.transitionOutModal).hide();
+	                this.$element.one(animationEvent, function () {
+	                    
+	                    if( that.$element.hasClass(transitionOut) ){
+	                        that.$element.removeClass(transitionOut + " transitionOut").hide();
+	                    }
                         that.$overlay.removeClass(that.options.transitionOutOverlay).remove();
-                        
+						that.$navigate.removeClass(that.options.transitionOutOverlay).remove();
 						closed();
-                    }
-                });
-            }
-            else {
-                this.$element.hide();
-                this.$overlay.remove();
-                
-                closed();
+	                });
+	            }
+	            else {
+	                this.$element.hide();
+	                this.$overlay.remove();
+                	this.$navigate.remove();
+	                closed();
+	            }
             }
 		},
 
+		next: function (e){
+
+            var that = this;
+            var transitionIn = 'fadeInRight';
+            var transitionOut = 'fadeOutLeft';
+			var modal = $('.'+PLUGIN_NAME+':visible');
+            var modals = {};
+				modals.out = this;
+
+			if(e !== undefined && typeof e !== 'object'){
+            	e.preventDefault();
+            	modal = $(e.currentTarget);
+            	transitionIn = modal.attr('data-'+PLUGIN_NAME+'-transitionIn');
+            	transitionOut = modal.attr('data-'+PLUGIN_NAME+'-transitionOut');
+			} else if(e !== undefined){
+				if(e.transitionIn !== undefined){
+					transitionIn = e.transitionIn;
+				}
+				if(e.transitionOut !== undefined){
+					transitionOut = e.transitionOut;
+				}
+			}
+
+        	this.close({transition:transitionOut});
+            
+			setTimeout(function(){
+
+				var loop = $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group="'+that.group.name+'"][data-'+PLUGIN_NAME+'-loop]').length;
+
+				if((loop > 0 || that.options.loop === true) && (that.group.index+1) === that.group.ids.length){
+
+					$("#"+that.group.ids[0]).iziModal('open', { transition: transitionIn });
+					modals.in = $("#"+that.group.ids[0]).data().iziModal;
+
+				} else if(that.group.index+1 < that.group.ids.length){
+
+					$("#"+that.group.ids[that.group.index+1]).iziModal('open', { transition: transitionIn });
+					modals.in = $("#"+that.group.ids[that.group.index+1]).data().iziModal;
+				}
+			}, 200);
+
+			$(document).trigger( PLUGIN_NAME + "-group-change", modals );
+		},
+
+		prev: function (e){
+            var that = this;
+            var transitionIn = 'fadeInLeft';
+            var transitionOut = 'fadeOutRight';
+			var modal = $('.'+PLUGIN_NAME+':visible');
+            var modals = {};
+				modals.out = this;
+
+			if(e !== undefined && typeof e !== 'object'){
+            	e.preventDefault();
+            	modal = $(e.currentTarget);
+            	transitionIn = modal.attr('data-'+PLUGIN_NAME+'-transitionIn');
+            	transitionOut = modal.attr('data-'+PLUGIN_NAME+'-transitionOut');
+			} else if(e !== undefined){
+				if(e.transitionIn !== undefined){
+					transitionIn = e.transitionIn;
+				}
+				if(e.transitionOut !== undefined){
+					transitionOut = e.transitionOut;
+				}
+			}
+
+			this.close({transition:transitionOut});
+
+			setTimeout(function(){
+				var loop = $('.'+PLUGIN_NAME+'[data-'+PLUGIN_NAME+'-group="'+that.group.name+'"][data-'+PLUGIN_NAME+'-loop]').length;
+
+				if( (loop > 0 || that.options.loop === true) && that.group.index === 0){
+
+					$("#"+that.group.ids[that.group.ids.length-1]).iziModal('open', { transition: transitionIn });
+					modals.in = $("#"+that.group.ids[that.group.ids.length-1]).data().iziModal;
+
+				} else if(that.group.index > 0){
+
+					$("#"+that.group.ids[that.group.index-1]).iziModal('open', { transition: transitionIn });
+					modals.in = $("#"+that.group.ids[that.group.index-1]).data().iziModal;
+				}
+			}, 200);
+
+			$(document).trigger( PLUGIN_NAME + "-group-change", modals );
+		},
+
 		destroy: function () {
 			var e = $.Event('destroy');
 
 			this.$element.trigger(e);
 
-            $(document).off("keydown");
+            $document.off("keydown");
 
 			clearTimeout(this.timer);
 			clearTimeout(this.timerTimeout);
@@ -383,9 +674,10 @@
 			}
 			this.$element.html(this.$element.find('.'+PLUGIN_NAME+'-content').html());
 
-			$(document.body).find('style[rel='+this.id+']').remove();
+			$document.find('style[rel='+this.id+']').remove();
 
 			this.$element.off('click', '[data-'+PLUGIN_NAME+'-close]');
+			this.$element.off('click', '[data-'+PLUGIN_NAME+'-fullscreen]');
 
 			this.$element
 				.off('.'+PLUGIN_NAME)
@@ -393,23 +685,25 @@
 				.attr('style', '');
 			
 			this.$overlay.remove();
+			this.$navigate.remove();
 			this.$element.trigger(STATES.DESTROYED);
 			this.$element = null;
 		},
 
 		getState: function(){
 
-			console.info(this.state);
-			
 			return this.state;
 		},
 
+		getGroup: function(){
+
+			return this.group;
+		},
+
 		setTitle: function(title){
 
 			if (this.options.title !== null) {
-				
 				this.$header.find('.'+PLUGIN_NAME+'-header-title').html(title);
-
 				this.options.title = title;
 			}
 		},
@@ -417,33 +711,46 @@
 		setSubtitle: function(subtitle){
 
 			if (this.options.subtitle !== null) {
-				
 				this.$header.find('.'+PLUGIN_NAME+'-header-subtitle').html(subtitle);
-
 				this.options.subtitle = subtitle;
 			}
 		},
 
-		setIconClass: function(iconClass){
-
-			if (this.options.iconClass !== null) {
-				
-				this.$header.find('.'+PLUGIN_NAME+'-header-icon').attr('class', PLUGIN_NAME+'-header-icon ' + iconClass);
+		setIcon: function(icon){
 
-				this.options.iconClass = iconClass;
+			if (this.options.icon !== null) {
+				this.$header.find('.'+PLUGIN_NAME+'-header-icon').attr('class', PLUGIN_NAME+'-header-icon ' + icon);
+				this.options.icon = icon;
 			}
 		},
 
 		setHeaderColor: function(headerColor){
 
-	        if (this.options.headerColor !== null) {
-	            this.$element.css('border-bottom', '3px solid ' + headerColor + '');
-	            this.$header.css('background', headerColor);
+            this.$element.css('border-bottom', '3px solid ' + headerColor + '');
+            this.$header.css('background', headerColor);
+            this.options.headerColor = headerColor;
+		},
+
+		setZindex: function(zIndex){
 
-	            this.options.headerColor = headerColor;
+	        if (!isNaN(parseInt(this.options.zindex))) {
+	        	this.options.zindex = zIndex;
+			 	this.$element.css('z-index', zIndex);
+			 	this.$navigate.css('z-index', zIndex-1);
+			 	this.$overlay.css('z-index', zIndex-2);
 	        }
 		},
 
+		setTransitionIn: function(transition){
+			
+			this.options.transitionIn = param.transition;
+		},
+
+		setTransitionOut: function(transition){
+
+			this.options.transitionOut = param.transition;
+		},
+
 		startLoading: function(){
 			if( !this.$element.find('.'+PLUGIN_NAME+'-loader').length ){
 				this.$element.append('<div class="'+PLUGIN_NAME+'-loader '+this.options.transitionInOverlay+'"></div>');
@@ -465,10 +772,19 @@
             	this.$element.css('overflow', 'hidden');
             }
 
-            var windowHeight = $(window).height(),
+        	var windowHeight = $window.height(),
+                modalHeight = this.$element.outerHeight(),
                 contentHeight = this.$element.find('.'+PLUGIN_NAME+'-content')[0].scrollHeight,
                 modalMargin = parseInt(-((this.$element.innerHeight() + 1) / 2)) + 'px';
 
+			if(modalHeight !== this.modalHeight){
+				this.modalHeight = modalHeight;
+
+				if (this.options.onResize && typeof(this.options.onResize) === "function") {
+			        this.options.onResize(this);
+			    }
+			}
+
             if(this.state == STATES.OPENED || this.state == STATES.OPENING){
 
 				if (this.options.iframe === true) {
@@ -492,13 +808,18 @@
 
 				} else {
 
-	                if (windowHeight > (contentHeight + this.headerHeight)) {
+	                if (windowHeight > (contentHeight + this.headerHeight) && this.isFullscreen !== true) {
 						$(document.body).removeClass(PLUGIN_NAME+'-attached');
 	                    this.$element.find('.'+PLUGIN_NAME+'-wrap').css({'height': 'auto'});
 	                }
 
-                	if (this.$element.innerHeight() > windowHeight || this.$element.innerHeight() < contentHeight) {
-						$(document.body).addClass(PLUGIN_NAME+'-attached');
+	                // subistuido (contentHeight + this.headerHeight) por this.$element.innerHeight()
+	                // Se o modal é maior que a altura da janela ou 
+                	if ((contentHeight + this.headerHeight) > windowHeight || this.$element.innerHeight() < contentHeight || this.isFullscreen === true) {
+
+		                if( !$(document.body).hasClass(PLUGIN_NAME+'-attached') ){
+							$(document.body).addClass(PLUGIN_NAME+'-attached');
+		                }
 
 	                    this.$element.find('.'+PLUGIN_NAME+'-wrap').css({
 	                        'height': parseInt(windowHeight - this.headerHeight) + 'px',
@@ -526,55 +847,165 @@
 
 	};
 
-	$.fn[PLUGIN_NAME] = function (option, args) {
-		return this.each(function () {
-			var $this = $(this),
-				data = $this.data(PLUGIN_NAME),
-				options = $.extend({}, $.fn.iziModal.defaults, $this.data(), typeof option == 'object' && option);
+	$window.off('hashchange load').on('hashchange load', function(e) {
+
+		if(autoOpenModal === 0){
+
+			if(document.location.hash !== ""){
+				
+				$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
+					 var state = $(modal).iziModal('getState');
+					 if(state == 'opened' || state == 'opening'){
+					 	
+					 	if( "#" + $(modal).attr('id') !== document.location.hash){
+					 		$(modal).iziModal('close');
+					 	}
+					 }
+				});
+
+				setTimeout(function(){
+					$(document.location.hash).iziModal("open");
+				},200);
+
+			} else {
+
+				$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
+					 var state = $(modal).iziModal('getState');
+					 if(state == 'opened' || state == 'opening'){
+					 	$(modal).iziModal('close');
+					 }
+				});
+
+			}
+		} else {
+			autoOpenModal = 0;
+		}
+	});
+
+	$document.off('click', '[data-'+PLUGIN_NAME+'-open]').on('click', '[data-'+PLUGIN_NAME+'-open]', function(e) {
+		e.preventDefault();
+
+		var modal = $('.'+PLUGIN_NAME+':visible').attr('id');
+		var openModal = $(e.currentTarget).attr('data-'+PLUGIN_NAME+'-open');
+		var transitionIn = $(e.currentTarget).attr('data-'+PLUGIN_NAME+'-transitionIn');
+		var transitionOut = $(e.currentTarget).attr('data-'+PLUGIN_NAME+'-transitionOut');
+
+		if(transitionOut !== undefined){
+			$("#"+modal).iziModal('close', {
+				transition: transitionOut
+			});
+		} else {
+			$("#"+modal).iziModal('close');
+		}
+
+		setTimeout(function(){
+			if(transitionIn !== undefined){
+				$("#"+openModal).iziModal('open', {
+					transition: transitionIn
+				});
+			} else {
+				$("#"+openModal).iziModal('open');
+			}
+		}, 200);
+	});
+
+	$document.off('keyup').on('keyup', function(event) {
+
+		var modal = $('.'+PLUGIN_NAME+':visible').attr('id'),
+			group = $("#"+modal).iziModal('getGroup'),
+			e = event || window.event,
+			target = e.target || e.srcElement,
+			modals = {};
+
+		if(modal !== undefined && group !== undefined && !e.ctrlKey && !e.metaKey && !e.altKey && target.tagName.toUpperCase() !== 'INPUT' && target.tagName.toUpperCase() != 'TEXTAREA'){ //&& $(e.target).is('body')
+
+			if(e.keyCode === 37) { // left
 
-			if (!data && (!option || typeof option == 'object')){
-				$this.data(PLUGIN_NAME, (data = new iziModal(this, options)));
+				$("#"+modal).iziModal('prev', e);
 			}
-			if (typeof option == 'string' && typeof data != 'undefined'){
-				data[option].apply(data, [].concat(args));
+			else if(e.keyCode === 39 ) { // right
+
+				$("#"+modal).iziModal('next', e);
+
 			}
-			else if (options.autoOpen){ // Automatically open the modal if autoOpen setted true
+		}
+	});
+
+	$.fn[PLUGIN_NAME] = function(option, args) {
+
+		var $this = $(this),
+			data = $this.data(PLUGIN_NAME),
+			options = $.extend({}, $.fn.iziModal.defaults, $this.data(), typeof option == 'object' && option);
+
+		if (!data && (!option || typeof option == 'object')){
+
+			$this.data(PLUGIN_NAME, (data = new iziModal(this, options)));
+		}
+		else if (typeof option == 'string' && typeof data != 'undefined'){
+
+			return data[option].apply(data, [].concat(args));
+		}
+
+		if (options.autoOpen){ // Automatically open the modal if autoOpen setted true
+
+			if( !isNaN(parseInt(options.autoOpen)) ){
+				
+				setTimeout(function(){
+					data.open();
+				}, options.autoOpen);
+
+			} else if(options.autoOpen === true ) {
 				data.open();
 			}
-		});
-	};
+			autoOpenModal++;
+		}
+        return this;
+    };
 
 	$.fn[PLUGIN_NAME].defaults = {
 	    title: '',
 	    subtitle: '',
-	    theme: '',
 	    headerColor: '#88A0B9',
-	    overlayColor: 'rgba(0, 0, 0, 0.4)',
+	    theme: '',  // light
+	    attached: '', // bottom, top
+	    icon: '',
 	    iconColor: '',
-	    iconClass: null,
 	    width: 600,
 	    padding: 0,
+	    radius: 3,
+	    zindex: 999,
 	    iframe: false,
 	    iframeHeight: 400,
 	    iframeURL: null,
-	    overlayClose: true,
-	    closeOnEscape: true,
-	    bodyOverflow: false,
 	    focusInput: true,
-	    autoOpen: false,
+	    group: '',
+	    loop: false,
+	    navigateCaption: true,
+	    navigateArrows: true, // closeToModal, closeScreenEdge
+	    history: true,
+	    restoreDefaultContent: false,
+	    autoOpen: 0, // Boolean, Number
+	    bodyOverflow: false,
 	    fullscreen: false,
 	    openFullscreen: false,
+	    closeOnEscape: true,
+	    overlay: true,
+	    overlayClose: true,
+	    overlayColor: 'rgba(0, 0, 0, 0.4)',
 	    timeout: false,
 	    timeoutProgressbar: false,
+	    pauseOnHover: false,
 	    timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
-	    transitionInModal: 'transitionIn',
-	    transitionOutModal: 'transitionOut',
+	    transitionIn: 'comingIn',   // comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
+	    transitionOut: 'comingOut', // comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX
 	    transitionInOverlay: 'fadeIn',
 	    transitionOutOverlay: 'fadeOut',
-        onOpening: function() {},
-        onOpened: function() {},
-        onClosing: function() {},
-        onClosed: function() {}
+	    onFullscreen: function(){},
+	    onResize: function(){},
+        onOpening: function(){},
+        onOpened: function(){},
+        onClosing: function(){},
+        onClosed: function(){}
 	};
 
 	$.fn[PLUGIN_NAME].Constructor = iziModal;