From cfbe5ae73d5c627fdd92b68796e04fdf1b2aede0 Mon Sep 17 00:00:00 2001
From: Martin Gonzalez Robles <mgrobles@idealista.com>
Date: Thu, 6 Sep 2018 14:18:34 +0200
Subject: [PATCH 1/3] add support for navigation to next/previous modals #63
 also I add support to close modal with Escape key #60

---
 demo/demos.html              | 177 +++++++++++++++++++++--------------
 demo/js/animatedModal.js     | 115 ++++++++++++++---------
 demo/js/animatedModal.min.js |   2 +-
 3 files changed, 177 insertions(+), 117 deletions(-)
diff --git a/demo/demos.html b/demo/demos.html
index 4aa7ec4..d3fa55f 100644
--- a/demo/demos.html
+++ b/demo/demos.html
@@ -1,84 +1,119 @@
 <!doctype html>
-<html class="no-js" lang="">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title>DEMOS</title>
-        <link rel="stylesheet" href="css/normalize.min.css">
-        <link rel="stylesheet" href="css/animate.min.css">
-        <style>
-            #btn-close-modal {
-                width:100%;
-                text-align: center;
-                cursor:pointer;
-                color:#fff;
-            }
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>DEMOS</title>
+    <link rel="stylesheet" href="css/normalize.min.css">
+    <link rel="stylesheet" href="css/animate.min.css">
+    <style>
+        .btn-modal{
+            width:100%;
+            text-align: center;
+            cursor:pointer;
+            color:#fff;
+        }
+
+    </style>
+</head>
+<body>
 
-        </style>
-    </head>
-    <body>
+    <!--Call your modal-->
+    <ul>
+        <li><a id="demo01" href="#animatedModal">DEMO01</a></li>
+        <li><a id="demo02" href="#modal-02">DEMO02</a></li>
+        <li><a id="demo03" href="#modal-03">DEMO03</a></li>
+    </ul>
 
-        <!--Call your modal-->
-        <ul>
-            <li><a id="demo01" href="#animatedModal">DEMO01</a></li>
-            <li><a id="demo02" href="#modal-02">DEMO02</a></li>
-        </ul>
-      
-      
-        <!--DEMO01-->
-        <div id="animatedModal">
-            <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
-            <div  id="btn-close-modal" class="close-animatedModal"> 
-                CLOSE MODAL
-            </div>
-                
-            <div class="modal-content">
-                <!--Your modal content goes here-->
-            </div>
+    <!--DEMO01-->
+    <div id="animatedModal">
+        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
+        <div class="close-animatedModal btn-modal btn-close-modal">
+            CLOSE MODAL
+        </div>
+        <!--THIS IS IMPORTANT! to navigate to the next modal, the class name has to match the name given on the ID -->
+        <div class="next-animatedModal btn-modal btn-next-modal">
+            NEXT MODAL
         </div>
+        <div class="modal-content">
+            <!--Your modal content goes here-->
+        </div>
+    </div>
 
-        <!--DEMO02-->
-        <div id="modal-02">
-            <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
-            <div  id="btn-close-modal" class="close-modal-02"> 
-                CLOSE MODAL
-            </div>
-            
-            <div class="modal-content">
-                <!--Your modal content goes here-->
-            </div>
+    <!--DEMO02-->
+    <div id="modal-02">
+        <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
+        <div class="close-modal-02 btn-modal btn-close-modal">
+            CLOSE MODAL
+        </div>
+        <!--THIS IS IMPORTANT! to navigate to the previous modal, the class name has to match the name given on the ID -->
+        <div class="previous-modal-02 btn-modal btn-previous-modal">
+            PREVIOUS MODAL
+        </div>
+        <!--THIS IS IMPORTANT! to navigate to the next modal, the class name has to match the name given on the ID -->
+        <div class="next-modal-02 btn-modal btn-next-modal">
+            NEXT MODAL
         </div>
+        <div class="modal-content">
+            <!--Your modal content goes here-->
+        </div>
+    </div>
 
+    <!--DEMO03-->
+    <div id="modal-03">
+        <!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
+        <div class="close-modal-03 btn-modal btn-close-modal">
+            CLOSE MODAL
+        </div>
+        <!--THIS IS IMPORTANT! to navigate to the previous modal, the class name has to match the name given on the ID -->
+        <div class="previous-modal-03 btn-modal btn-previous-modal">
+            PREVIOUS MODAL
+        </div>
+        <div class="modal-content">
+            <!--Your modal content goes here-->
+        </div>
+    </div>
 
-        <script src="js/jquery.min.js"></script>
-        <script src="js/animatedModal.min.js"></script>
-        <script>
+    <script src="js/jquery.min.js"></script>
+    <script src="js/animatedModal.min.js"></script>
+    <script>
+        //demo 01
+        $("#demo01").animatedModal({
+            next: '#demo02',
+        });
 
-            //demo 01
-            $("#demo01").animatedModal();
+        //demo 02
+        $("#demo02").animatedModal({
+            modalTarget:'modal-02',
+            animatedIn:'bounceInDown',
+            animatedOut:'bounceOutDown',
+            color:'#3498db',
+            previous: '#demo01',
+            next: '#demo03',
+            // Callbacks
+            beforeOpen: function() {
+                console.log("The animation was called");
+            },
+            afterOpen: function() {
+                console.log("The animation is completed");
+            },
+            beforeClose: function() {
+                console.log("The animation was called");
+            },
+            afterClose: function() {
+                console.log("The animation is completed");
+            }
+        });
 
-            //demo 02
-            $("#demo02").animatedModal({
-                modalTarget:'modal-02',
-                animatedIn:'lightSpeedIn',
-                animatedOut:'bounceOutDown',
-                color:'#3498db',
-                // Callbacks
-                beforeOpen: function() {
-                    console.log("The animation was called");
-                },           
-                afterOpen: function() {
-                    console.log("The animation is completed");
-                }, 
-                beforeClose: function() {
-                    console.log("The animation was called");
-                }, 
-                afterClose: function() {
-                    console.log("The animation is completed");
-                }
-            });
+        $("#demo03").animatedModal({
+            modalTarget:'modal-03',
+            color:'#ff6a00',
+            animatedIn:'bounceInDown',
+            animatedOut:'bounceOutDown',
+            previous: '#demo02',
+        });
 
-        </script>
+    </script>
 
-    </body>
+</body>
 </html>
diff --git a/demo/js/animatedModal.js b/demo/js/animatedModal.js
index 50fba7a..0cab6dd 100644
--- a/demo/js/animatedModal.js
+++ b/demo/js/animatedModal.js
@@ -7,40 +7,54 @@
 =========================================*/
 
 (function ($) {
- 
+
     $.fn.animatedModal = function(options) {
         var modal = $(this);
-        
+
         //Defaults
         var settings = $.extend({
-            modalTarget:'animatedModal', 
-            position:'fixed', 
-            width:'100%', 
-            height:'100%', 
-            top:'0px', 
-            left:'0px', 
-            zIndexIn: '9999',  
-            zIndexOut: '-9999',  
-            color: '#39BEB9', 
-            opacityIn:'1',  
-            opacityOut:'0', 
+            modalTarget:'animatedModal',
+            position:'fixed',
+            width:'100%',
+            height:'100%',
+            top:'0px',
+            left:'0px',
+            zIndexIn: '9999',
+            zIndexOut: '-9999',
+            color: '#39BEB9',
+            opacityIn:'1',
+            opacityOut:'0',
             animatedIn:'zoomIn',
             animatedOut:'zoomOut',
-            animationDuration:'.6s', 
-            overflow:'auto', 
+            animationDuration:'.6s',
+            overflow:'auto',
             // Callbacks
-            beforeOpen: function() {},           
-            afterOpen: function() {}, 
-            beforeClose: function() {}, 
-            afterClose: function() {}
- 
-            
+            beforeOpen: function() {},
+            afterOpen: function() {},
+            beforeClose: function() {},
+            afterClose: function() {},
+            close: function(event) {
+                event.preventDefault();
+                $('body, html').css({'overflow':'auto'});
+
+                settings.beforeClose(); //beforeClose
+                if (id.hasClass(settings.modalTarget+'-on')) {
+                    id.removeClass(settings.modalTarget+'-on');
+                    id.addClass(settings.modalTarget+'-off');
+                }
+
+                if (id.hasClass(settings.modalTarget+'-off')) {
+                    id.removeClass(settings.animatedIn);
+                    id.addClass(settings.animatedOut);
+                    id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
+                };
+            }
 
         }, options);
-        
-        var closeBt = $('.close-'+settings.modalTarget);
 
-        //console.log(closeBt)
+        var closeBt = $('.close-'+settings.modalTarget);
+        var nextBt = $('.next-'+settings.modalTarget);
+        var previousBt = $('.previous-'+settings.modalTarget);
 
         var href = $(modal).attr('href'),
             id = $('body').find('#'+settings.modalTarget),
@@ -66,7 +80,7 @@
         //Apply stles
         id.css(initStyles);
 
-        modal.click(function(event) {       
+        modal.click(function(event) {
             event.preventDefault();
             $('body, html').css({'overflow':'hidden'});
             if (href == idConc) {
@@ -74,46 +88,57 @@
                     id.removeClass(settings.animatedOut);
                     id.removeClass(settings.modalTarget+'-off');
                     id.addClass(settings.modalTarget+'-on');
-                } 
+                }
 
-                 if (id.hasClass(settings.modalTarget+'-on')) {
+                if (id.hasClass(settings.modalTarget+'-on')) {
                     settings.beforeOpen();
                     id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
-                    id.addClass(settings.animatedIn);  
+                    id.addClass(settings.animatedIn);
                     id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
-                };  
-            } 
+                };
+            }
         });
 
 
 
         closeBt.click(function(event) {
-            event.preventDefault();
-            $('body, html').css({'overflow':'auto'});
-
-            settings.beforeClose(); //beforeClose
-            if (id.hasClass(settings.modalTarget+'-on')) {
-                id.removeClass(settings.modalTarget+'-on');
-                id.addClass(settings.modalTarget+'-off');
-            } 
+            settings.close(event);
+        });
 
-            if (id.hasClass(settings.modalTarget+'-off')) {
-                id.removeClass(settings.animatedIn);
-                id.addClass(settings.animatedOut);
-                id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
-            };
+        nextBt.click(function(event) {
+            settings.close(event);
+            $(settings.next).click();
+        });
 
+        previousBt.click(function(event) {
+            settings.close(event);
+            $(settings.previous).click();
         });
 
-        function afterClose () {       
+        function afterClose () {
             id.css({'z-index':settings.zIndexOut});
             settings.afterClose(); //afterClose
         }
 
-        function afterOpen () {       
+        function afterOpen () {
             settings.afterOpen(); //afterOpen
         }
 
+        function afterNext () {
+            settings.afterNext(); //afterOpen
+        }
+
+        function afterPrevious () {
+            settings.afterPrevious(); //afterOpen
+        }
+
+        // close modal menu if esc key is used
+        jQuery(document).keyup(function(event){
+            if(event.keyCode == 27) {
+                settings.close(event);
+            }
+        });
+
     }; // End animatedModal.js
 
 }(jQuery));
diff --git a/demo/js/animatedModal.min.js b/demo/js/animatedModal.min.js
index c09bf9f..9a4c04f 100644
--- a/demo/js/animatedModal.min.js
+++ b/demo/js/animatedModal.min.js
@@ -1 +1 @@
-!function(a){a.fn.animatedModal=function(o){function n(){l.css({"z-index":i.zIndexOut}),i.afterClose()}function t(){i.afterOpen()}var e=a(this),i=a.extend({modalTarget:"animatedModal",position:"fixed",width:"100%",height:"100%",top:"0px",left:"0px",zIndexIn:"9999",zIndexOut:"-9999",color:"#39BEB9",opacityIn:"1",opacityOut:"0",animatedIn:"zoomIn",animatedOut:"zoomOut",animationDuration:".6s",overflow:"auto",beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){}},o),d=a(".close-"+i.modalTarget),s=a(e).attr("href"),l=a("body").find("#"+i.modalTarget),m="#"+l.attr("id");l.addClass("animated"),l.addClass(i.modalTarget+"-off");var r={position:i.position,width:i.width,height:i.height,top:i.top,left:i.left,"background-color":i.color,"overflow-y":i.overflow,"z-index":i.zIndexOut,opacity:i.opacityOut,"-webkit-animation-duration":i.animationDuration};l.css(r),e.click(function(o){o.preventDefault(),a("body, html").css({overflow:"hidden"}),s==m&&(l.hasClass(i.modalTarget+"-off")&&(l.removeClass(i.animatedOut),l.removeClass(i.modalTarget+"-off"),l.addClass(i.modalTarget+"-on")),l.hasClass(i.modalTarget+"-on")&&(i.beforeOpen(),l.css({opacity:i.opacityIn,"z-index":i.zIndexIn}),l.addClass(i.animatedIn),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",t)))}),d.click(function(o){o.preventDefault(),a("body, html").css({overflow:"auto"}),i.beforeClose(),l.hasClass(i.modalTarget+"-on")&&(l.removeClass(i.modalTarget+"-on"),l.addClass(i.modalTarget+"-off")),l.hasClass(i.modalTarget+"-off")&&(l.removeClass(i.animatedIn),l.addClass(i.animatedOut),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",n))})}}(jQuery);
+!function(f){f.fn.animatedModal=function(o){var n=f(this),a=f.extend({modalTarget:"animatedModal",position:"fixed",width:"100%",height:"100%",top:"0px",left:"0px",zIndexIn:"9999",zIndexOut:"-9999",color:"#39BEB9",opacityIn:"1",opacityOut:"0",animatedIn:"zoomIn",animatedOut:"zoomOut",animationDuration:".6s",overflow:"auto",beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},close:function(o){o.preventDefault(),f("body, html").css({overflow:"auto"}),a.beforeClose(),l.hasClass(a.modalTarget+"-on")&&(l.removeClass(a.modalTarget+"-on"),l.addClass(a.modalTarget+"-off")),l.hasClass(a.modalTarget+"-off")&&(l.removeClass(a.animatedIn),l.addClass(a.animatedOut),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c))}},o),t=f(".close-"+a.modalTarget),e=f(".next-"+a.modalTarget),i=f(".previous-"+a.modalTarget),d=f(n).attr("href"),l=f("body").find("#"+a.modalTarget),s="#"+l.attr("id");l.addClass("animated"),l.addClass(a.modalTarget+"-off");var r={position:a.position,width:a.width,height:a.height,top:a.top,left:a.left,"background-color":a.color,"overflow-y":a.overflow,"z-index":a.zIndexOut,opacity:a.opacityOut,"-webkit-animation-duration":a.animationDuration};function c(){l.css({"z-index":a.zIndexOut}),a.afterClose()}function m(){a.afterOpen()}l.css(r),n.click(function(o){o.preventDefault(),f("body, html").css({overflow:"hidden"}),d==s&&(l.hasClass(a.modalTarget+"-off")&&(l.removeClass(a.animatedOut),l.removeClass(a.modalTarget+"-off"),l.addClass(a.modalTarget+"-on")),l.hasClass(a.modalTarget+"-on")&&(a.beforeOpen(),l.css({opacity:a.opacityIn,"z-index":a.zIndexIn}),l.addClass(a.animatedIn),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",m)))}),t.click(function(o){a.close(o)}),e.click(function(o){a.close(o),f(a.next).click()}),i.click(function(o){a.close(o),f(a.previous).click()}),jQuery(document).keyup(function(o){27==o.keyCode&&a.close(o)})}}(jQuery);

From 3033eb5af03709ad3e986e8607d82cfaf0ec9987 Mon Sep 17 00:00:00 2001
From: Martin Gonzalez Robles <mgrobles@idealista.com>
Date: Wed, 12 Sep 2018 12:45:09 +0200
Subject: [PATCH 2/3] replace jQuery with $ #63

---
 demo/js/animatedModal.js     | 2 +-
 demo/js/animatedModal.min.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/js/animatedModal.js b/demo/js/animatedModal.js
index 0cab6dd..70b16e4 100644
--- a/demo/js/animatedModal.js
+++ b/demo/js/animatedModal.js
@@ -133,7 +133,7 @@
         }
 
         // close modal menu if esc key is used
-        jQuery(document).keyup(function(event){
+        $(document).keyup(function(event){
             if(event.keyCode == 27) {
                 settings.close(event);
             }
diff --git a/demo/js/animatedModal.min.js b/demo/js/animatedModal.min.js
index 9a4c04f..b4b3efd 100644
--- a/demo/js/animatedModal.min.js
+++ b/demo/js/animatedModal.min.js
@@ -1 +1 @@
-!function(f){f.fn.animatedModal=function(o){var n=f(this),a=f.extend({modalTarget:"animatedModal",position:"fixed",width:"100%",height:"100%",top:"0px",left:"0px",zIndexIn:"9999",zIndexOut:"-9999",color:"#39BEB9",opacityIn:"1",opacityOut:"0",animatedIn:"zoomIn",animatedOut:"zoomOut",animationDuration:".6s",overflow:"auto",beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},close:function(o){o.preventDefault(),f("body, html").css({overflow:"auto"}),a.beforeClose(),l.hasClass(a.modalTarget+"-on")&&(l.removeClass(a.modalTarget+"-on"),l.addClass(a.modalTarget+"-off")),l.hasClass(a.modalTarget+"-off")&&(l.removeClass(a.animatedIn),l.addClass(a.animatedOut),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c))}},o),t=f(".close-"+a.modalTarget),e=f(".next-"+a.modalTarget),i=f(".previous-"+a.modalTarget),d=f(n).attr("href"),l=f("body").find("#"+a.modalTarget),s="#"+l.attr("id");l.addClass("animated"),l.addClass(a.modalTarget+"-off");var r={position:a.position,width:a.width,height:a.height,top:a.top,left:a.left,"background-color":a.color,"overflow-y":a.overflow,"z-index":a.zIndexOut,opacity:a.opacityOut,"-webkit-animation-duration":a.animationDuration};function c(){l.css({"z-index":a.zIndexOut}),a.afterClose()}function m(){a.afterOpen()}l.css(r),n.click(function(o){o.preventDefault(),f("body, html").css({overflow:"hidden"}),d==s&&(l.hasClass(a.modalTarget+"-off")&&(l.removeClass(a.animatedOut),l.removeClass(a.modalTarget+"-off"),l.addClass(a.modalTarget+"-on")),l.hasClass(a.modalTarget+"-on")&&(a.beforeOpen(),l.css({opacity:a.opacityIn,"z-index":a.zIndexIn}),l.addClass(a.animatedIn),l.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",m)))}),t.click(function(o){a.close(o)}),e.click(function(o){a.close(o),f(a.next).click()}),i.click(function(o){a.close(o),f(a.previous).click()}),jQuery(document).keyup(function(o){27==o.keyCode&&a.close(o)})}}(jQuery);
+!function(o){o.fn.animatedModal=function(n){var a=o(this),t=o.extend({modalTarget:"animatedModal",position:"fixed",width:"100%",height:"100%",top:"0px",left:"0px",zIndexIn:"9999",zIndexOut:"-9999",color:"#39BEB9",opacityIn:"1",opacityOut:"0",animatedIn:"zoomIn",animatedOut:"zoomOut",animationDuration:".6s",overflow:"auto",beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},close:function(n){n.preventDefault(),o("body, html").css({overflow:"auto"}),t.beforeClose(),s.hasClass(t.modalTarget+"-on")&&(s.removeClass(t.modalTarget+"-on"),s.addClass(t.modalTarget+"-off")),s.hasClass(t.modalTarget+"-off")&&(s.removeClass(t.animatedIn),s.addClass(t.animatedOut),s.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",m))}},n),e=o(".close-"+t.modalTarget),i=o(".next-"+t.modalTarget),d=o(".previous-"+t.modalTarget),l=o(a).attr("href"),s=o("body").find("#"+t.modalTarget),c="#"+s.attr("id");s.addClass("animated"),s.addClass(t.modalTarget+"-off");var r={position:t.position,width:t.width,height:t.height,top:t.top,left:t.left,"background-color":t.color,"overflow-y":t.overflow,"z-index":t.zIndexOut,opacity:t.opacityOut,"-webkit-animation-duration":t.animationDuration};function m(){s.css({"z-index":t.zIndexOut}),t.afterClose()}function f(){t.afterOpen()}s.css(r),a.click(function(n){n.preventDefault(),o("body, html").css({overflow:"hidden"}),l==c&&(s.hasClass(t.modalTarget+"-off")&&(s.removeClass(t.animatedOut),s.removeClass(t.modalTarget+"-off"),s.addClass(t.modalTarget+"-on")),s.hasClass(t.modalTarget+"-on")&&(t.beforeOpen(),s.css({opacity:t.opacityIn,"z-index":t.zIndexIn}),s.addClass(t.animatedIn),s.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",f)))}),e.click(function(o){t.close(o)}),i.click(function(n){t.close(n),o(t.next).click()}),d.click(function(n){t.close(n),o(t.previous).click()}),o(document).keyup(function(o){27==o.keyCode&&t.close(o)})}}(jQuery);

From 695fada52d5dcd731b815a5dcc52529540ed5b02 Mon Sep 17 00:00:00 2001
From: Martin Gonzalez Robles <mgrobles@idealista.com>
Date: Wed, 12 Sep 2018 12:48:20 +0200
Subject: [PATCH 3/3] I included spaces from previous commits #63

---
 animatedModal.js         | 127 +++++++++++++++++++++++----------------
 demo/js/animatedModal.js |   8 +--
 2 files changed, 78 insertions(+), 57 deletions(-)

diff --git a/animatedModal.js b/animatedModal.js
index dd96ec0..9f968fa 100644
--- a/animatedModal.js
+++ b/animatedModal.js
@@ -7,48 +7,62 @@
 =========================================*/
 
 (function ($) {
- 
+
     $.fn.animatedModal = function(options) {
         var modal = $(this);
-        
+
         //Defaults
         var settings = $.extend({
-            modalTarget:'animatedModal', 
-            position:'fixed', 
-            width:'100%', 
-            height:'100%', 
-            top:'0px', 
-            left:'0px', 
-            zIndexIn: '9999',  
-            zIndexOut: '-9999',  
-            color: '#39BEB9', 
-            opacityIn:'1',  
-            opacityOut:'0', 
+            modalTarget:'animatedModal',
+            position:'fixed',
+            width:'100%',
+            height:'100%',
+            top:'0px',
+            left:'0px',
+            zIndexIn: '9999',
+            zIndexOut: '-9999',
+            color: '#39BEB9',
+            opacityIn:'1',
+            opacityOut:'0',
             animatedIn:'zoomIn',
             animatedOut:'zoomOut',
-            animationDuration:'.6s', 
-            overflow:'auto', 
+            animationDuration:'.6s',
+            overflow:'auto',
             // Callbacks
-            beforeOpen: function() {},           
-            afterOpen: function() {}, 
-            beforeClose: function() {}, 
-            afterClose: function() {}
- 
-            
+            beforeOpen: function() {},
+            afterOpen: function() {},
+            beforeClose: function() {},
+            afterClose: function() {},
+            close: function(event) {
+                event.preventDefault();
+                $('body, html').css({'overflow':'auto'});
+
+                settings.beforeClose(); //beforeClose
+                if (id.hasClass(settings.modalTarget+'-on')) {
+                    id.removeClass(settings.modalTarget+'-on');
+                    id.addClass(settings.modalTarget+'-off');
+                }
+
+                if (id.hasClass(settings.modalTarget+'-off')) {
+                    id.removeClass(settings.animatedIn);
+                    id.addClass(settings.animatedOut);
+                    id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
+                };
+            }
 
         }, options);
-        
-        var closeBt = $('.close-'+settings.modalTarget);
 
-        //console.log(closeBt)
+        var closeBt = $('.close-'+settings.modalTarget);
+        var nextBt = $('.next-'+settings.modalTarget);
+        var previousBt = $('.previous-'+settings.modalTarget);
 
         var href = $(modal).attr('href'),
             id = $('body').find('#'+settings.modalTarget),
             idConc = '#'+id.attr('id');
-            //console.log(idConc);
-            // Default Classes
-            id.addClass('animated');
-            id.addClass(settings.modalTarget+'-off');
+        //console.log(idConc);
+        // Default Classes
+        id.addClass('animated');
+        id.addClass(settings.modalTarget+'-off');
 
         //Init styles
         var initStyles = {
@@ -61,15 +75,12 @@
             'overflow-y':settings.overflow,
             'z-index':settings.zIndexOut,
             'opacity':settings.opacityOut,
-            '-webkit-animation-duration':settings.animationDuration,
-            '-moz-animation-duration':settings.animationDuration,
-            '-ms-animation-duration':settings.animationDuration,
-            'animation-duration':settings.animationDuration
+            '-webkit-animation-duration':settings.animationDuration
         };
         //Apply stles
         id.css(initStyles);
 
-        modal.click(function(event) {       
+        modal.click(function(event) {
             event.preventDefault();
             $('body, html').css({'overflow':'hidden'});
             if (href == idConc) {
@@ -77,50 +88,60 @@
                     id.removeClass(settings.animatedOut);
                     id.removeClass(settings.modalTarget+'-off');
                     id.addClass(settings.modalTarget+'-on');
-                } 
+                }
 
                  if (id.hasClass(settings.modalTarget+'-on')) {
                     settings.beforeOpen();
                     id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
-                    id.addClass(settings.animatedIn);  
+                    id.addClass(settings.animatedIn);
                     id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
-                };  
-            } 
+                };
+            }
         });
 
 
 
         closeBt.click(function(event) {
-            event.preventDefault();
-            $('body, html').css({'overflow':'auto'});
-
-            settings.beforeClose(); //beforeClose
-            if (id.hasClass(settings.modalTarget+'-on')) {
-                id.removeClass(settings.modalTarget+'-on');
-                id.addClass(settings.modalTarget+'-off');
-            } 
+            settings.close(event);
+        });
 
-            if (id.hasClass(settings.modalTarget+'-off')) {
-                id.removeClass(settings.animatedIn);
-                id.addClass(settings.animatedOut);
-                id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
-            };
+        nextBt.click(function(event) {
+            settings.close(event);
+            $(settings.next).click();
+        });
 
+        previousBt.click(function(event) {
+            settings.close(event);
+            $(settings.previous).click();
         });
 
-        function afterClose () {       
+        function afterClose () {
             id.css({'z-index':settings.zIndexOut});
             settings.afterClose(); //afterClose
         }
 
-        function afterOpen () {       
+        function afterOpen () {
             settings.afterOpen(); //afterOpen
         }
 
+        function afterNext () {
+            settings.afterNext(); //afterOpen
+        }
+
+        function afterPrevious () {
+            settings.afterPrevious(); //afterOpen
+        }
+
+        // close modal menu if esc key is used
+        $(document).keyup(function(event){
+            if(event.keyCode == 27) {
+                settings.close(event);
+            }
+        });
+
     }; // End animatedModal.js
 
 }(jQuery));
 
 
 
-        
diff --git a/demo/js/animatedModal.js b/demo/js/animatedModal.js
index 70b16e4..c1c2740 100644
--- a/demo/js/animatedModal.js
+++ b/demo/js/animatedModal.js
@@ -59,10 +59,10 @@
         var href = $(modal).attr('href'),
             id = $('body').find('#'+settings.modalTarget),
             idConc = '#'+id.attr('id');
-            //console.log(idConc);
-            // Default Classes
-            id.addClass('animated');
-            id.addClass(settings.modalTarget+'-off');
+        //console.log(idConc);
+        // Default Classes
+        id.addClass('animated');
+        id.addClass(settings.modalTarget+'-off');
 
         //Init styles
         var initStyles = {
