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:
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.
