Featured Image Zoomer - Change Default loaded thumbnail image

[coffee2020]

1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem: Everything is working properly, but I need to make it so the default image to load isn't the first thumbnail that is listed in my code.
The reason I can't just change the order of the <a href>'s is that the thumbs are listed alphabetically, so the 'black item' is always listed first,
so every page initially loads the 'black item' thumbnail.

Basically I've got thumbs 1 2 3 4, and on page load I need #2 to display as if it was clicked (so the hover/zoom feature works).
I'm pretty sure this can be done with some simple JavaScript and CSS, can anyone help?

[Beverleyh]

As someone on the outside looking in, I don't understand why you don't rename the black image so it isn't in number one position (or why they specifically need to be in that order), or why you dont just change the markup to reorder things.

Can you explain a little more about why the (seemingly) obvious/easiest solution wouldn't be the best for your particular setup? And can you also provide a link to the page - maybe a working example will help illustrate?

[coffee2020]

First, thanks for your reply.

Sorry, but the testing site is password protected.
The reason I cannot just re-order them is they have to be listed Alphabetically. IE - the thumbnailed order goes something like: black, cherry, daisy, green, orange, purple, etc.
They must stay in this order. (The short answer for why this has to be this way is some pages will link to my desired pages showcasing the certain color first.)
I've gotten as far as using

<script>
$(document).ready(function() {
    $("#the_thumbnail_to_open").trigger('click');
	});
</script>

with the #id assigned to the desired <a href>,
and this comes close, but opens the direct link URL to the image.

[Beverleyh]

To save us from guessing, can you provide a sample page that isn't protected? The page can be deleted after testing.

[coffee2020]

Maybe we can use the demo page as an example?
http://www.dynamicdrive.com/dynamici...uredzoomer.htm

Demo #3...the 2nd thumbnail (the Saleen) needs to load when the page loads. The order of the thumbs must stay the same.
The code below just about gets it.

<script>
$(document).ready(function() {
    $("#the_thumbnail_to_open").trigger('click');
	});
</script>

any suggestions, please?

[Beverleyh]

Try absolute positioning the thumbs to change the placement visually while leaving the markup in the original order.

[coffee2020]

That is a really good idea. Wow. Nice thinking! This is why I like working in the web-dev industry, there's so many ways to accomplish something.
I'd prefer a javascript onload-click method for grace's sake, but this might be my answer. I won't be able to test it out until tomorrow, I'll report back with my findings. Thanks again! :-)

[jscheuer1]

Maybe we can use the demo page as an example?
http://www.dynamicdrive.com/dynamici...uredzoomer.htm

Demo #3...the 2nd thumbnail (the Saleen) needs to load when the page loads. The order of the thumbs must stay the same.
The code below just about gets it.

<script>
$(document).ready(function() {
    $("#the_thumbnail_to_open").trigger('click');
	});
</script>

any suggestions, please?

The multizoom script is in noConflict mode, so using $ will not activate anything associated with it. If I enter this into the console on the demo page:

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');
});

It works to load the Saleen image in Demo 3 on that page. If you use that or similar on your page, it should come after the on page initialization for the script, and before any other instances (if any) of jQuery on the page. However, this is no guarantee it will work. The code might have to be executed on load of the page or with a short, even 0 timeout after document ready.

One other difference is that I'm triggering the click on the thumbnail image img tag, not on the a tag, but that doesn't seem to matter.

[jscheuer1]

I tried this out and it did need a timeout which appeared to vary as to which browser. Which suggests it may also vary as to bandwidth. So positioning might be the better choice.

[coffee2020]

That's the code I was looking for, but it is buggy as you mentioned. Thanks for the info on why it wasn't working properly. I'll toy around with it a bit.

The absolute positioning is working, however there's a 2px difference between Chrome and Firefox in the thumb positioning. I'm trying to track down where it's being rendered from, but I'm still very open to any other suggestions until then. I really hope I can get this working properly!