setting style rendering issues
hey all,
I have a little script that repositions images in a square div box. the script seems to work just fine expect that in certain browsers it doesn't work. I have no idea what's wrong with it. this is supposed to be a basic purpose of jquery.
here is the code:
-
// create gallery images
$(document).ready(function() {
var selector = 'img.gallery_image';
$(selector).each(function() {
var width = $(this).width();
var height = $(this).height();
if (height > width) {
var ratio = (width / height);
var position = Math.floor((360 - (360 * ratio))/2);
$(this)
.css("position","relative")
.css("left",position + "px");
} else {
var ratio = (height / width);
var position = Math.floor((360 - (360 * ratio))/2);
$(this)
.css("position","relative")
.css("top",position + "px");
}
});
// create thumb images
var selector = 'img.thumb';
$(selector).each(function() {
var width = $(this).width();
var height = $(this).height();
if (height > width) {
var ratio = (width / height);
var position = Math.floor((60 - (60 * ratio))/2);
$(this)
.css("position","relative")
.css("left",position + "px");
} else {
var ratio = (height / width);
var position = Math.floor((60 - (60 * ratio))/2);
$(this)
.css("position","relative")
.css("top",position + "px");
}
});
var tabContainers = $('div.image_viewer > div.gallery > div');
$('div.image_viewer span.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.image_viewer span.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').hover();
});