JQuery - Custom Gallery - works in FF, Chrome, Safari and IE8 but not IE7 - pointers?
I am really puzzled by the following.
When the gallery is created in FF / Chrome, etc., the click then moves the image one by one and the hover state is left for you to click again. In IE7, the image is moved one, then the freeze state crashes and doesn't reappear. The other effects I have on my page continue to function.
My jQuery may not be the best, so I apologize for the mess. Aside from this issue, any jQuery generic pointers are welcome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>GA - 2009 yee haw</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<style type="text/css" media="all">
@import "/css/screen.css";
</style>
</head>
<body>
<script type="text/javascript">
<!--//
function DrawGalleryOptions(div) {
$('gallery').css({width: '503px'});
$(div).append('<div class="gallery-title"><p style="font-size:14px;">no title</p><div class="gallery-bg gallery-bg-small"></div></div>');
$(div).append('<div class="gallery-nav"></div>');
$('.gallery-nav').append('<div class="gallery-bg"></div><div class="gallery-controls"><p class="gall-title"><a class="gallleft" href="#galleryleft" title="">Previous Image</a><a class="gallright" href="#galleryright" title="">Next Image</a></p></div>');
$('.gallery-title, .gallery-nav, .gallery-bg').css({ position: 'absolute', left: '0px', height: '30px', width: '503px' });
$('.gallery-nav').css({ height: '60px', bottom: '-60px' });
$('.gallery-bg').css({ backgroundColor: '#5974c5', opacity: 0.7, height: '60px', zIndex: 1000 });
$('.gallery-title').css({ top: '-30px'});
$('.gallery-controls').css({ position: 'absolute', zIndex: 1002 });
$('.gallery-bg-small').css({height: '30px'});
$('.gallery-title p').css({zIndex: 1002, color: '#ffffff', position: 'absolute', padding: '5px'});
$('.gallery-controls p').css({ posistion: 'absolute', zIndex: 1005, left: '0px', top: '0px' });
$('a.gallleft').css({ width: '82px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryleft.gif)', backgroundPosition: 'left top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '15px', position: 'absolute', paddingTop: '25px' });
$('a.gallright').css({ width: '53px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryright.gif)', backgroundPosition: 'right top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '430px', position: 'absolute', paddingTop: '25px' });
}
function ShowGalleryOptions() {
jQuery.easing.def = "easeOutQuint";
$('.gallery-title').animate({ top: '0px' }, 800);
$('.gallery-nav').animate({ bottom: '0px' }, 800);
}
function HideGalleryOptions() {
$('.gallery-title').animate({ top: '-30px' }, 800);
$('.gallery-nav').animate({ bottom: '-60px' }, 800);
}
function StopAll() {
$('.gallery-title').stop();
$('.gallery-nav').stop();
}
function MoveGallery(pic) {
$('#test2').html('>> <br />' + pic[_GalleryCurrent].src + " " + pic[_GalleryCurrent].height + " " + pic[_GalleryCurrent].width + "<br />Current: " + _GalleryCurrent);
$('.gallery').append('<img id="gallery-current" style="display:none;" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
$('#gallery-current').css({ opacity: 0, display: 'block' });
$('.gallery img').css({ position: 'absolute', top: '0px', left: '0px' });
//jQuery.easing.def = "easeOutElastic";
$('.gallery-title p').html(pic[_GalleryCurrent].alt);
$('#gallery-current').animate({ opacity: 1 }, 1200, function() {
$('#gallery-last').remove();
$('#gallery-current').attr('id', 'gallery-last');
});
}
$(function() {
var pic;
pic = $(".gallery").children("img");
_GalleryMax = pic.length - 1;
_GalleryCurrent = 0;
//$('#test2').html('>><br />' + pic[_].src + " " + pic[0].height + " " + pic[0].width + "<br />Current: " + _GalleryCurrent);
$('.gallery').css({ height: 283, overflow: 'hidden', position: 'relative' });
$('.gallery').html('');
DrawGalleryOptions('.gallery');
$('.gallery').append('<img id="gallery-last" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
$('.gallery-title p').html(pic[_GalleryCurrent].alt);
$('.gallery').hover(function() {
//alert('on');
StopAll();
ShowGalleryOptions();
},
function() {
//alert('off');
StopAll();
HideGalleryOptions();
});
$('a.gallright').click(function() {
$('#gallery-current').stop(false, true);
//alert('boota');
_GalleryCurrent = _GalleryCurrent + 1;
if (_GalleryCurrent > _GalleryMax) {
_GalleryCurrent = 0;
}
MoveGallery(pic);
});
$('a.gallleft').click(function() {
$('#gallery-current').stop(false, true);
//alert('boota');
_GalleryCurrent = _GalleryCurrent - 1;
if (_GalleryCurrent < 0) {
_GalleryCurrent = _GalleryMax;
}
MoveGallery(pic);
});
});
//-->
</script>
<div class="gallery">
<img class="gall-img" src="/image/gallery1.jpg" width="503" height="283" alt="Person on a lake" />
<img class="gall-img" src="/image/gallery2.jpg" width="503" height="283" alt="Building university" />
<img class="gall-img" src="/image/gallery3.jpg" width="503" height="283" alt="Random colours" />
<img class="gall-img" src="/image/gallery4.jpg" width="503" height="283" alt="Abstract - dark blue?" />
<img class="gall-img" src="/image/gallery5.jpg" width="503" height="283" alt="Random abstract" />
</div>
<div id="test2" style="font-size:18px;"></div>
</body>
</html>
any help is greatly appreciated !!
EDIT # 1: In addition to the above, I would read that IE7 has problems with the img selector, but I tried to change it to a generic class name, etc. To no avail. Any more tips?
EDIT # 2: I'm still struggling with this - I've added a live example here: (too new to add links, it seems sorry!)
a source to share
Fixed issue after repeated playback. As Keith suggested, this is just a CSS bug.
IE7 needs a little reminder that zindex sets some of the elements, so I pasted the following
$('.gallery-nav, .gallery-title').css({ position: 'absolute', left: '0px', zIndex: '1100' }); // random reassignement of gallery zIndex, because IE7 doesn't behave
Inside the move gallery function (just before the animation).
Joy!
a source to share
I would recommend hosting the test page on a public server so others can see live in our own environments using IE7.
This would allow us to see what's going on faster and help us understand and diagnose the behavior.
I could c & p your code, but I would still have to find pictures etc. to even study it.
Until then, have a look at Firebug Lite for IE: http://getfirebug.com/lite.html and just include the following:
<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
I guess b / c works in other browsers and you are using jQuery, which normalizes very well, that this is probably a CSS issue, but until I see an example page it’s just a quick guess.
a source to share