Any idea why small gallery.js not compatible with jQuery 1.8.2 Must use version 1.4.4

**PicnicTutorials** · Nov 15, 2012 09:15

Any idea why my small gallery.js is not compatible with jQuery 1.8.2? I have to use jQuery version 1.4.4 for it to work. I would like to use the latest. Any obvious reasons to you js pros?

Code JavaScript:

/* Gallery JS */
var gallery = function() {
var current = 1;
var total = $('#photos b').length;
$('#photos b').hide();
$('#pic1').fadeIn('slow');
$('#number').html('1 of ' + total );
setHeight(1)
 
$('#first').click(function(){
var prev  = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
setHeight(prev)
$('#pic' + prev).fadeIn('slow');
current = 1;
$('#number').html(current + ' of ' + total)
}
return false;
});
 
$('#previous').click(function(){
var prev  = current - 1;
if (prev < 1) prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
$('#pic' + prev).fadeIn('slow');
current = prev;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
 
$('#next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
 
$('#last').click(function(){
var next  = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = total;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
 
function setHeight(current) {}}
 
/* fire gallery */
$(document).ready(function(){
gallery();    
});

**PicnicTutorials** · Nov 15, 2012 22:41

For anybody that has knowledge in these matters I can supply the webpage in question if that helps.

**AussieJohn** · Nov 15, 2012 23:14

Hey

A link to the web page might be helpful. I ran this code with both jQuery 1.4.4 and 1.8.2 and didn't have any problems, so there might be something else going on.

**PicnicTutorials** · Nov 15, 2012 23:26

Cool. Thank you. I'm my site it opens in fancybox. Here is the plain html page with jquery 1.4.4 and gallery.js. http://goo.gl/EP9E3. It works as is. If I use jquery 1.8.2 it doesn't.

**AussieJohn** · Nov 16, 2012 00:13

I noticed that when I open up the Fancybox on the about page I get a JavaScript error.

I saved the aboutphotos page locally and tested with both 1.4.4 and 1.8.2 and it worked fine. Does it fail for you when you run it standalone as well, or only when it's inside Fancybox?

**PicnicTutorials** · Nov 16, 2012 06:01

Wow that was hard. It works different in all three testing scenarios - local via dreamweaver - local via wamp - and online. I believe I narrowed down the problem to two scripts that are also on the page. Both need to be removed in order for the gallery.js to work with jquery 1.8.3. Smooth scroll. Replacing that with the newer version fixes half of it. But the other half - this...

document.getElementById("loading").innerHTML = "Loading...";

Loads before jquery 1.8.3 and breaks it. Or breaks the gallery.js. If I move it below jquery then it works again. But I need it to load before jquery. So, what do you think? Any obvious reason why that you know of that that one line would conflict?

FYI - for testing all my scripts are in combined.js. It's on all the other pages. Therefore catched when the gallery is called via fancybox. Which is why I would prefer to use it verses loading a new jquery on gallery call. Thanks!

**PicnicTutorials** · Nov 16, 2012 06:20

PS... I dont need this js line document.getElementById("loading").innerHTML = "Loading..."; on this page. I guess I found the pit falls of combining all your js. So if if I could disable it somehow with a little js it would be much less than another jquery to download. Can I somehow disable it on this page? Or make jquery not conflict with it?

**AussieJohn** · Nov 16, 2012 15:00

Originally Posted by EricWatson

PS... I dont need this js line document.getElementById("loading").innerHTML = "Loading..."; on this page. I guess I found the pit falls of combining all your js. So if if I could disable it somehow with a little js it would be much less than another jquery to download. Can I somehow disable it on this page? Or make jquery not conflict with it?

It's totally possible to safeguard this so it only runs when the loading div is present. We just need to add a quick if-statement to check

Code javascript:

var loadingDiv = document.getElementById("loading"); // will be null if it doesn't exist
if (loadingDiv) {
  loadingDiv.innerHTML = "Loading ...";
}

**PicnicTutorials** · Nov 16, 2012 18:32

Good thinking! Awesome I will put that in tommorrow morning and let you know how it goes. Thank you sir!

**PicnicTutorials** · Nov 17, 2012 06:29

Arg. That was irritating. So I switched everything out and thought I was good to go. But no. Now IE7/8 sort of work with the newest jquery. They switch the pics but they both do a bad flicker during each transition. Going back a pic does not suffer from the bad flicker. So I'm hoping to a trained eye you can spot the problem. I tried some febel z-index things in the css but it had no effect. I set up a test page here with all the problematic js. Can you spot the problem? Thanks! http://goo.gl/ZQ961

**AussieJohn** · Nov 17, 2012 16:42

Originally Posted by EricWatson

Arg. That was irritating. So I switched everything out and thought I was good to go. But no. Now IE7/8 sort of work with the newest jquery. They switch the pics but they both do a bad flicker during each transition. Going back a pic does not suffer from the bad flicker. So I'm hoping to a trained eye you can spot the problem. I tried some febel z-index things in the css but it had no effect. I set up a test page here with all the problematic js. Can you spot the problem? Thanks! http://goo.gl/ZQ961

I don't have a native IE7 and 8 to test with and didn't see the issue in IE9 while switched to IE7/8 modes.

However, I do have one suggestion that might help, in your "next" click handler, you could fade in the next pic and simply hide the "current" pic when it is finished fading in. This might reduce the flicker as you're only trying to animate 1 element in that position.

Code javascript:

$('#next').click(function(){
    var next = current + 1;
    if (next > total){
        next = total;
    }
 
    if (current !== total) {
        $('#pic' + next).fadeIn('slow', function(){ 
            $('#pic' + current).hide(); //hide the current pic after the next one is shown
        });
        current = next;
        setHeight(current);
        $('#number').html(current + ' of ' + total);
    }
 
    return false;
});

**PicnicTutorials** · Nov 18, 2012 04:49

Thanks but no luck. If I replace the next block

Code:

$('#next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});

with your code I get a script error http://www.visibilityinherit.com/projects/error.JPG. If I add it after the next block I get the same error.

Code:

$('#next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});

$('#next').click(function(){
    var next = current + 1;
    if (next > total){
        next = total;
    }
 
    if (current !== total) {
        $('#pic' + next).fadeIn('slow', function(){ 
            $('#pic' + current).hide(); //hide the current pic after the next one is shown
        });
        current = next;
        setHeight(current);
        $('#number').html(current + ' of ' + total);
    }
 
    return false;
});

**AussieJohn** · Nov 18, 2012 14:46

Originally Posted by EricWatson

with your code I get a script error http://www.visibilityinherit.com/projects/error.JPG. If I add it after the next block I get the same error.

Hmm, I just did a quick test and it would probably be better if the remainder of that code after the fadeIn would also be in the callback.

Code:

$('#next').click(function(){
    var next = current + 1;
    if (next > total){
        next = total;
    }
 
    if (current !== total) {
        $('#pic' + next).fadeIn('slow', function(){ 
            $('#pic' + current).hide(); //hide the current pic after the next one is shown

            current = next;
            setHeight(current);
            $('#number').html(current + ' of ' + total);
        });
    }
 
    return false;
});

Also, make sure that you only attach 1 event handler, i.e. if you use one of these blocks to test, make sure the other is commented out.

Did you get a chance to see if that error occurred in a modern browser too? Internet Explorer's error messages aren't usually the easiest to interpret

**PicnicTutorials** · Nov 19, 2012 04:24

Thanks for your continuied help. So I forgot. Doesnt work locally. Testing online I dont get the error but it unfortunatly makes the fliker worse. Sort of like two flickers. The only way I could get it to work was to use your first code. Here is what I used...

Code JavaScript:

var gallery = function() {
var current = 1;
var total = $('#photos b').length;
$('#photos b').hide();
$('#pic1').fadeIn('slow');
$('#number').html('1 of ' + total );
setHeight(1)
 
$('#first').click(function(){
var prev  = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
setHeight(prev)
$('#pic' + prev).fadeIn('slow');
current = 1;
$('#number').html(current + ' of ' + total)
}
return false;
});
 
$('#previous').click(function(){
var prev  = current - 1;
if (prev < 1) prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
$('#pic' + prev).fadeIn('slow');
current = prev;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
 
$('#next').click(function(){
    var next = current + 1;
    if (next > total){
        next = total;
    }
 
    if (current !== total) {
        $('#pic' + next).fadeIn('slow', function(){ 
            $('#pic' + current).hide(); //hide the current pic after the next one is shown
        });
        current = next;
        setHeight(current);
        $('#number').html(current + ' of ' + total);
    }
 
    return false;
});
 
$('#last').click(function(){
var next  = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = total;
setHeight(current)
$('#number').html(current + ' of ' + total)
}
return false;
});
 
function setHeight(current) {}}
 
/* fire gallery */
$(document).ready(function(){
gallery();    
});

again here is the test page with the original non working code. http://goo.gl/EP9E3

User Tag List

Thread: Any idea why small gallery.js not compatible with jQuery 1.8.2 Must use version 1.4.4

Thread Tools

Display

Any idea why small gallery.js not compatible with jQuery 1.8.2 Must use version 1.4.4

Bookmarks

Bookmarks

Posting Permissions