Featured Image Zoomer - Change Default loaded thumbnail image

[Beverleyh]

Just to make sure, I'd zero the paddings and margins on all the elements in that block and the parent container (sometimes doing it inline while testing helps) and build them back up how you want in the CSS afterwards.

You might need to create a stripped-back test page containing just the demo so you can make sure that paddings/margins from parents elements aren't cascading down to affect things.

[coffee2020]

The absolute positioning method won't work, I can get Chrome and FF to look good, but IE is a whole different story.

It would be too messy to use this, as the parent div already has padding/borders, and each of the thumbnails has margins/borders.
Also, in order to get the nth div to appear in it's alphabetized location (after it's been placed as the 1st), I've got to allow room for it by either padding the adjacent <a> or adding empty <div>.
This creates more havoc with borders/padding/absolute positioning IE problems.

I'll continue working with the jquery trigger click method, it seems to work most of the time, perhaps it just needs some modification. If it is a bandwidth issue, it still defaults to the first thumbnail, and that would be better than ever encountering a whacky layout with one thumbnail sticking out like a sore thumb! Also, with this method a lot of issues with forward compatibility arise because of all the IE hacks I'd have place.

[jscheuer1]

This seem fairly foolproof:

jQuery(function($){ //shorthand for document ready which also passes a new definition of $ as the current instance of jQuery to itself
	function desiredthumb(){$('.multizoom1.thumbs img').eq(1).trigger('click');}
	setTimeout(desiredthumb, 100);
	$(window).load(desiredthumb);
});

In most case the 100 millisecond timeout should get it, otherwise, once the page has loaded, it should catch up. You would have to try it live though to be sure and try in different browsers and clear the cache a lot because first time users and folks that don't visit often will have little if any of the resources on the page cached.

I don't have time to do all of that testing, but since I have the page:

http://home.comcast.net/~jscheuer1/s...aleenfirst.htm

You could. If that one works, test with your own images.

[coffee2020]

This seems to be working! I've cross-browsed, and closed/re-opened numerous times and it's worked every time so far.
I was trying

jQuery(function($){ //shorthand for document ready which also passes a new definition of $ as the current instance of jQuery to itself
	$('.multizoom1.thumbs img').eq(1).trigger('click');
        setTimeout(100);
});

I see the difference, but it is a bit confusing why there's a function inside of a function in the correct code in the above post.
Care to shed some light on this? Does it have to do with noConflict mode?

Also, would you mind explaining why you've chosen 100ms instead of something quicker, like 1ms?
To me it's seems like it would be better to load this function as soon as possible to avoid visual interference from the initial thumb that's loading as it uses a fade-in effect to display. It kind of seems like the longer the delay the more the 'reset' is noticeable.

[jscheuer1]

When you set a timeout, the function within it executes in the global scope where $ no longer means jQuery. But if you define a separate function within the scope where $ means jQuery, it will still mean that when that function is fired by the timeout. I tried 0ms, and that worked for IE, but not for Chrome. Between Chrome and IE we are talking about at least 70% of the browsers. 100ms is very short, but not even that worked all the time for Chrome, so I added the onload, which should be later. Clicking the thumb twice won't hurt anything, but if the 100ms delay was too short, the load one should pick up the slack.

You could do three or more. 0, 1, 100, and load.

But using just 100 and load, I never saw the original image, not even a flicker of it. Even if one did though, would it be the end of the world?

[coffee2020]

100+ internets to you sir.
Thank you so much for solving this! I almost had it though! Hopefully this post will help serve someone else in the future.

It seems like this would be a feature built into the script. Perhaps someone had a product gallery on showcase and a featured item that changed every month or so, and that item was to be shown first.
I've worked with Accordion Navigation scripts before and you could assign a class of '.open' or '.loaded' etc to select a certain <div> to take on properties (in this case, the <a> to load. Or even assigning an #ID to an <a> giving it unique properties.
Another method would be define the medium/large image in the initial jQuery page load, kind of like what you can do for the single-item-zoom here. Maybe a new version will contain such features. :-)
Thanks again!

[jscheuer1]

If you're interested, I've updated the script so that now you can use a class on the thumbnail that you want to be first, see:

http://www.dynamicdrive.com/forums/s...lti-Zoom)-v2-2

for more information.

[coffee2020]

Awesome! Just what I had in mind. This works great. I'm not noticing the first thumb loading with the brief flash at all anymore. Bravo, job well done.