[jQuery] galleriffic conflict with jquery .animate
Hi there,
This is a bit all new to me - this is the first project i have worked
with jQuery. Here is a link to the issue:
www.origin.ie/testarea/index.html
The issue I have is my site contains a .animate all images on a page
[they fade in]. I have an animated slide panel to the top of the page
[gallery/download/contact]. This is where the issue is.
On the link page above, the Gallery section - if you open it up you
can see that it loads the first main image [as this is loaded even
when panel is hidden]. But if you click on any of the thumbnails the
main image fades out, but the new one does not appear.
If you click on any of the side menus on the left and view the gallery
you can see it works here [as this is loading through </object>], but
the </object> is causing debug issues in ie, so i'm trying to get rid
of this.
I know it seems to be a conflict issue with my main img .animate
function, but can't seem to figure it out. I have used the jQuery
conflict with the scripts but with this issue it doesn't seem to want
to work. Any help would be much appreciated.
Here is my slide_function.js which contains the img .animate:
document.write('<style type="text/css">img { -moz-opacity:.0;
filter:alpha(opacity=0); opacity:.0; } body { overflow: hidden }</
style>');
function selectorImagesLoaded($selector){
$('img').animate({
opacity: 1
}, 200 );
}
setTimeout("selectorImagesLoaded()",2000);
$(document).ready(function () {
$('#love ul').jScrollPane();
$('#downloads ul.learnList').jScrollPane();
$('#contact ul').jScrollPane();
// ADD MAIN BODY SCROLLBAR
var isResizing;
// and the body scrollpane
var setContainerHeight = function()
{
// IE triggers the onResize event internally when you do the stuff
in this function
// so make sure we don't enter an infinite loop and crash the
browser
if (!isResizing) {
isResizing = true;
$w = $(window);
$c = $('#scrollContainer');
var p = (parseInt($c.css('paddingLeft')) || 0) + (parseInt($c.css
('paddingRight')) || 0);
$('body>.flexcroll').css({'height': $w.height() + 'px', 'width':
$w.width() + 'px'});
$c.css({'height': ($w.height()-p) + 'px', 'width': ($w.width() - p)
+ 'px'});
isResizing = false;
//CSBfleXcroll('scrollContainer');
}
}
$(window).bind('resize', setContainerHeight);
// reset scroll bar once images loaded
$(window).bind('load', setContainerHeight);
setContainerHeight();
// it seems like you need to call this twice to get consistantly
correct results cross browser...
setContainerHeight();
// END ADD MAIN BODY SCROLLBAR
//TOP PANEL ANIMATE
$("#topPanel").animate({
height: "0px",
opacity: 0
}, 0 );
$(".topPanelContent").fadeOut();
//$(".topPanelContent").css({"display":"block"});
var topPanelHidden = true;
var topPanelShowing;
var hasClosed;
$(".topPanelLink").click(function(){
var targetPane = $(this).attr('href');
if(topPanelHidden != true){
$('.topPanelLink').removeClass('selected');
$("#topPanel").animate({
height: "0px",
opacity: 0
}, 500, function(){
setContainerHeight();
});
$(".topPanelContent").fadeOut(500);
hasClosed = true;
}
if(topPanelShowing != targetPane || topPanelHidden == true) {
topPanelShowing = targetPane;
$(this).addClass('selected');
//$('div' + targetPane).fadeIn(500);
$('div' + targetPane).animate({
opacity: 1
}, 500, function(){
$('div' + targetPane).fadeIn(500);
setContainerHeight();
});
$('body').scrollTo( { top:0 , left:0}, 1000,
{easing:'easeInOutCubic'});
$("#topPanel").animate({
opacity: 1
}, 0 );
$("#topPanel").animate({
height: "460",
opacity: 1
}, 500, function(){
setContainerHeight();
});
hasClosed = false;
}
topPanelHidden = hasClosed;
return false;
});
});