New Comer (less than 5 posts)
Large Image Visible on Load Without Mouse Action
1) Script Title: Image Thumbnail Viewer II
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm
3) Describe problem: I would like to have one of the large images visible when the page loads without the user having to mouse over or click.
What is an easy way to do that on this viewer?
Global Moderator
Just hard code it into your load area, ex:
You can put anything you want in there. It will be overwritten the first time a trigger is activated (thumbnail is moused over or clicked).HTML Code:<div id="loadarea" style="width: 600px"><img src="whateveryoulike.jpg" alt=""><br> Optional text here if you want it</div>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
New Comer (less than 5 posts)
Thank you. While this works - somewhat - I have some concerns.
First, the thumbnailviewer2.js script contains the location of the large image. I prefer to have that controlled by my .css page. So I changed the javascript to:
var $hiddenimagediv=$('<div >').css({position:'absolute',visibility:'hidden',left:0,top:0}).appendTo(document.body)
Second, when I put the title under the image, so that it displays on page load, it takes two <br /> tags to position it below the image instead of underneath the image, and then it does not line up vertically with the javascript-generated image on click.
Third, the title does not center under the image. I have tried textalign: center, but so far no joy. It would be nice to have these titles line up exactly.
Fourth, it would be nice to have the ability to do an implicit click on load in the <body> tag to have the large image load automatically.
Last edited by syswriter; 10-14-2011 at 11:12 PM.
Global Moderator
I can assure you that very many folks have followed that advice with no problem. But you do seem to indicate you're not working from the official version of the script. That may or may not be the explanation. And because of that I may need a link to your page to really figure this out for you. Suffice it to say though that you kind of lost me with your explanation of the problem with this solution, but I think I caught back up at the end:
That implies that your thumbnails are activated by click. If so, we can do that. But we can also do it a little sooner by using jQuery's document ready approach. Here's how that would work - Put this script in the head of the page after the script tag for thumbnailviewer2.js:Originally Posted by syswriter
That's it. If you're using mouseover:Code:<script type="text/javascript"> jQuery(document).ready(function($){ $('a[rel="enlargeimage"]').eq(0).click(); }); </script>
The browser cache may need to be cleared and/or the page refreshed to see changes.Code:<script type="text/javascript"> jQuery(document).ready(function($){ $('a[rel="enlargeimage"]').eq(0).mouseover(); }); </script>
If you're still having problems and want more help:
Please post a link to a page on your site that contains the problematic code so we can check it out.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
New Comer (less than 5 posts)
Thank you. That solved the problem. That code should be part of the standard script. In my opinion, most people would want to see a large image when the page first loads.
I have modified the thumbnailviewer2.js script to eliminate all of the positioning information. It is more useful in the page header or on a .css page.
Posting Permissions
Reply With Quote
Bookmarks