I new to jquery. my first srcipt is a tab browsing galley for images.
this script works fine expect for certain mysterious bug:
in firefox sometimes, very rarely, image resize doesn't get executed
on first load. upon refresh it works.
in safari it loads fine first time but upon refresh image resize and
positioning gets messed up. I close the browser window and open a
new
one load the page and it looks fine.
in IE6, it just gives up on image resize. it sets the first 2-3
images
correctly and then gives up on the rest of the images. as if it can
not loop through all the images.
any help appreciated!
luke
here is my code:
// create gallery images
$(document).ready(function() {
var max_width = 310;
var max_height = 310;
var selector = 'img.medium';
$(selector).each(function() {
var width = $(this).width();
var height = $(this).height();
if (height > width) {
var ratio = (width / height);
var new_height = max_height;
var new_width = (new_height * ratio);
var position = Math.floor((max_width -
new_width)/2);
$(this).css("width",new_width);
$(this).css("height",new_height);
$(this).css("position","relative");
$(this).css("left",position);
} else {
var ratio = (height / width);
var new_width = max_width;
var new_height = (new_width * ratio);
var position = Math.floor((max_height -
new_height)/2);
$(this).css("width",new_width);
$(this).css("height",new_height);
$(this).css("position","relative");
$(this).css("top",position);
}
});
});
// create thumbs
$(document).ready(function() {
var max_width = 100;
var max_height = 100;
var selector = 'img.thumb';
$(selector).each(function() {
var width = $(this).width();
var height = $(this).height();
if (height > width) {
var ratio = (width / height);
var new_height = max_height;
var new_width = (new_height * ratio);
var position = Math.floor((max_width -
new_width)/2);
$(this).height(new_height).width(new_width);
$(this).css("position","relative");
$(this).css("left",position);
} else {
var ratio = (height / width);
var new_width = max_width;
var new_height = (new_width * ratio);
var position = Math.floor((max_height -
new_height)/2);
$(this).height(new_height).width(new_width);
$(this).css("position","relative");
$(this).css("top",position);
}
});
});
//create complete tabbed gallery
$(document).ready(function () {
var tabContainers = $('div.tabs > div.gallery > div');
$('div.tabs span.tabNavigation a').click(function () {
tabContainers.hide('slow').filter(this.hash).toggle('slow');
$('div.tabs span.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
