html popup modal gallery crashes when looping around

25 Views Asked by At

I know some JavaScript/JQuery and for the most part I can figure out any issues within reasonable amount of time, but this one is a noodle scratcher.

So, I have a gallery script that supposed to initialize itself when it popups up and let you view all the images one by one by using Previous and Next hyper link on the modal window. It works first time through all the files once, but when it loops around it crashes the browser.

Here is an example of how it looks:

enter image description here

Here is my HTML code:

<a href="images/image1.jpg" class="popup_gallery"><img src="images/image1-tn.jpg" border="0"></a>
<a href="images/image2.jpg" class="popup_gallery"><img src="images/image2-tn.jpg" border="0"></a>
<a href="images/image3.jpg" class="popup_gallery"><img src="images/image3-tn.jpg" border="0"></a>

Here is my JavaScript/JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="popupoverlay/assets/js/jquery.popup.js"></script>
<script>
    $(function(){
      /*-------------------------------

        GALLERY SPECIFIC CODE

    -------------------------------*/

    /*---------------------

        SETTINGS

    */

    var gallerySettings = {
            markup      : '' +
                '<div class="popup">' +
                    '<div class="popup_wrap">' +
                        '<div class="popup_content"/>' +
                    '</div>' +
                    '<a href="#next">Next</a>' +
                    '<a href="#prev">Previous</a>' +
                '</div>',
            // This is a custom variable
            gallery     : '.popup_gallery',
            replaced    : function($popup, $back){

                var plugin = this,
                    $wrap = $('.popup_wrap', $popup);

                // Animate the popup to new size
                $wrap.animate({
                    width   : $wrap.children().children().outerWidth(true),
                    height  : $wrap.children().children().outerHeight(true)
                }, {
                    duration    : 500,
                    easing      : 'easeOutBack',
                    step        : function(){

                        // Need to center the poup on each step
                        $popup
                            .css({
                                top     : plugin.getCenter().top,
                                left    : plugin.getCenter().left
                            });

                    },
                    complete    : function(){

                        // Fade in!
                        $wrap
                            .children()
                            .animate({opacity : 1}, plugin.o.speed, function(){
                                plugin.center();
                                plugin.o.afterOpen.call(plugin);
                            });

                    }
                });
            },
            show        : function($popup, $back){

                var plugin = this,
                    $wrap = $('.popup_wrap', $popup);

                // Center the plugin
                plugin.center();

                // Default fade in
                $popup
                    .animate({opacity : 1}, plugin.o.speed, function(){
                        plugin.o.afterOpen.call(plugin);
                    });

                // Set the inline styles as we animate later
                $wrap.css({
                    width   : $wrap.outerWidth(true),
                    height  : $wrap.outerHeight(true)
                });

            },
            afterClose      : function(){
                this.currentIndex = undefined;
            }

        };

    $(function(){

        /*---------------------

            POPUP

        */

        $('.popup_gallery').popup(gallerySettings);

        /*---------------------

            NEXT & PREVIOUS LINKS

        */

        $(document).on('click', '[href="#next"], [href="#prev"]', function(e){

            e.preventDefault();

            var $current = $('.popup_active'),
                popup = $current.data('popup'),
                $items = $(popup.o.gallery);

            // If this is the first time
            // and we don't have a currentIndex set
            if( popup.currentIndex === undefined )
                popup.currentIndex = $items.index($current);

            // Fade the current item out
            $('.'+popup.o.contentClass)
                .animate({opacity : 0}, 'fast', function(){
                    
                    // Get the next index
                    var newIndex = $(e.target).attr('href') === '#next'
                        ? popup.currentIndex + 1
                        : popup.currentIndex - 1;

                    // Make sure the index is valid
                    if( newIndex > $items.length -1 ){

                        popup.currentIndex = 0;

                    }else if( newIndex < 0 ){

                        popup.currentIndex = $items.length - 1;

                    }else{

                        popup.currentIndex = newIndex;

                    }


                    // Get the new current link
                    $current = $($items[popup.currentIndex]);

                    popup.open($current.attr('href'), undefined, $current[0]);

                });

        });

    });

    /*---------------------

        JQUERY EASING

    */

    $.extend($.easing, {
        easeOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        }
    });

</script> 

I didn't notice this happening until I upgraded my browser last week to the latest. So, I am not sure what got changed in the Internet Browser World, but I can't figure this out.

0

There are 0 best solutions below