Hi All,
I have the following code for an overlay style gallery. The script works absolutely perfectly in FireFox, Chrome, Safari and Opera, however in Internet Explorer (7 and 8) on the first thumbnail click the background overlay fades in bit the overlay with the image in doesn’t appear - however it does on the second click.
Additionally the jquery fade animations when clicking on next or previous seem very jumpy (again only in Internet Explorer). As far as I can see it’s only a simple fadeTo() function so am not sure why.
Any thoughts on this would be very much appreciated. The code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Gallery</title>
<link rel="stylesheet" href="scripts/gallery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
var Gallery = {
// PARAMETERS FOR CUSTOMISATION
transition_speed: 500, // milliseconds
outer_opacity: 0.7, // 0 to 1
outer_colour: "#000000", // hex value
show_captions: true, // true, false
thumbs: [],
images: [],
captions: [],
current_image_id: null,
init: function() {
// CREATE ARRAYS
var gallery_div = document.getElementById("gallery");
gallery_thumbs = gallery_div.getElementsByTagName("img");
for (var i=0; i < gallery_thumbs.length; i++) {
Gallery.thumbs[i] = gallery_thumbs[i];
Gallery.thumbs[i].rel = [i];
}
for (var i=0; i < gallery_thumbs.length; i++) {
Gallery.captions[i] = Gallery.thumbs[i].alt;
}
// CREATE OVERLAYS
var body_tag = document.getElementsByTagName("body");
var outer_overlay = document.createElement("div");
outer_overlay.id = "outer";
outer_overlay.style.backgroundColor = Gallery.outer_colour;
var window_height = $(document).height();
outer_overlay.style.height = window_height +'px';
body_tag[0].appendChild(outer_overlay);
var inner_overlay = document.createElement("div");
inner_overlay.id = "inner";
body_tag[0].appendChild(inner_overlay);
var close_button = document.createElement("img");
close_button.src="images/icon-close.png";
close_button.id = "gallery-close";
inner_overlay.appendChild(close_button);
var next_button = document.createElement("img");
next_button.src="images/icon-next.png";
next_button.id = "gallery-next";
inner_overlay.appendChild(next_button);
var prev_button = document.createElement("img");
prev_button.src="images/icon-prev.png";
prev_button.id = "gallery-prev";
inner_overlay.appendChild(prev_button);
var caption_div = document.createElement("div");
caption_div.id = "gallery-caption";
inner_overlay.appendChild(caption_div);
$("#gallery-caption").fadeTo(0, 0);
if (Gallery.show_captions == true) {
inner_overlay.onmouseover = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed/2, 0.5);};
inner_overlay.onmouseout = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed, 0);};
}
// CREATE IMAGES
for (var i=0; i < Gallery.thumbs.length; i++) {
var new_image = document.createElement("img");
new_image.src = Gallery.thumbs[i].parentNode.href;
new_image.id= "gallery-img" + (i + 1);
inner_overlay.appendChild(new_image);
Gallery.images[i] = new_image;
$(Gallery.images[i]).fadeTo(0, 0);
}
// EVENT HANDLERS FOR OPEN AND CLOSE
for (var i=0; i < Gallery.thumbs.length; i++) {
Gallery.thumbs[i].onclick = Gallery.open;
}
var outer_overlay = document.getElementById("outer");
outer_overlay.onclick = Gallery.close;
close_button.onclick = Gallery.close;
next_button.onclick = Gallery.next;
prev_button.onclick = Gallery.previous;
},
open: function() {
Gallery.current_image_id = this.rel;
var current = Gallery.images[Gallery.current_image_id];
var caption_div = document.getElementById("gallery-caption");
caption_div.innerHTML = Gallery.captions[Gallery.current_image_id];
var inner_overlay = document.getElementById("inner");
inner_overlay.style.height = current.height + "px";
Gallery.positioning(current);
$(current).fadeTo(0, 1);
$("#outer").fadeTo(0, Gallery.outer_opacity);
$("#inner").fadeTo(0, 0);
$("#inner").fadeTo(Gallery.transition_speed, 1);
return false;
},
close: function() {
$("#outer").fadeTo(0, 0);
$("#inner").fadeTo(0, 0);
$("#outer").css("display", "none");
$("#inner").css("display", "none");
var current = Gallery.images[Gallery.current_image_id];
$(current).fadeTo(0, 0);
},
next: function() {
var next_id = Number(Gallery.current_image_id) + 1;
if (next_id == Gallery.images.length) {next_id = 0;}
var next = Gallery.images[next_id];
var current = Gallery.images[Gallery.current_image_id];
var inner_overlay = document.getElementById("inner");
inner_overlay.style.height = next.height + "px";
Gallery.positioning(next);
var caption_div = document.getElementById("gallery-caption");
caption_div.innerHTML = Gallery.captions[next_id];
$(current).fadeTo(Gallery.transition_speed, 0);
$(next).fadeTo(0, 0);
$(next).fadeTo(Gallery.transition_speed, 1);
Gallery.current_image_id = next_id;
},
previous: function() {
var prev_id = Number(Gallery.current_image_id) - 1;
if (prev_id == -1) {prev_id = Gallery.images.length -1;}
var prev = Gallery.images[prev_id];
var current = Gallery.images[Gallery.current_image_id];
var inner_overlay = document.getElementById("inner");
inner_overlay.style.height = prev.height + "px";
Gallery.positioning(prev);
var caption_div = document.getElementById("gallery-caption");
caption_div.innerHTML = Gallery.captions[prev_id];
$(current).fadeTo(Gallery.transition_speed, 0);
$(prev).fadeTo(0, 0);
$(prev).fadeTo(Gallery.transition_speed, 1);
Gallery.current_image_id = prev_id;
},
positioning: function(img) {
var next_button = document.getElementById("gallery-next");
next_button.style.top = (img.height / 2) -15 + "px";
var prev_button = document.getElementById("gallery-prev");
prev_button.style.top = (img.height / 2) -15 + "px";
$("#inner").css("top", (($(window).height()-$("#inner").height())/2));
$("#inner").css("left", (($(window).width()-$("#inner").width())/2));
}
};
// START SCRIPTS
Start = function() {
Gallery.init();
};
window.onload = Start;
</script>
</head>
<body>
<div id="gallery">
<a href="images/image1.jpg"><img src="images/thumbs/image1.jpg" alt="Caption 1"></a>
<a href="images/image2.jpg"><img src="images/thumbs/image2.jpg" alt="Caption 2"></a>
<a href="images/image3.jpg"><img src="images/thumbs/image3.jpg" alt="Caption 3"></a>
<a href="images/image4.jpg"><img src="images/thumbs/image4.jpg" alt="Caption 4"></a>
<a href="images/image5.jpg"><img src="images/thumbs/image5.jpg" alt="Caption 5"></a>
</div>
</body>
</html>