I think you will find that you need to use what is commonly referred
to as a 'preloader'. Take a look at Ariel's Preload plugin (Link mode,
with onComplete)
On Jun 20, 5:55 pm, Luke <[EMAIL PROTECTED]> wrote:
> 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();
