PDA

View Full Version : Featured Image Zoomer - Change Default loaded thumbnail image



coffee2020
04-15-2013, 05:55 PM
1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.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
04-15-2013, 06:54 PM
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
04-15-2013, 07:08 PM
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
04-15-2013, 08:25 PM
To save us from guessing, can you provide a sample page that isn't protected? The page can be deleted after testing.

coffee2020
04-15-2013, 08:59 PM
Maybe we can use the demo page as an example?
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.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
04-15-2013, 09:13 PM
Try absolute positioning the thumbs to change the placement visually while leaving the markup in the original order.

coffee2020
04-15-2013, 09:59 PM
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
04-16-2013, 02:43 AM
Maybe we can use the demo page as an example?
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.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
04-16-2013, 03:26 AM
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
04-16-2013, 01:12 PM
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!

Beverleyh
04-16-2013, 01:35 PM
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
04-16-2013, 03:04 PM
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
04-16-2013, 05:05 PM
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/side/demos/multizoom/demosaleenfirst.htm

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

coffee2020
04-16-2013, 06:18 PM
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
04-16-2013, 07:29 PM
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
04-16-2013, 08:26 PM
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
04-20-2013, 11:43 PM
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/showthread.php?73626-Featured-Image-Zoomer-(now-w-Multi-Zoom)-v2-2

for more information.

coffee2020
04-22-2013, 07:15 PM
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.