PDA

View Full Version : Large Image Visible on Load Without Mouse Action



syswriter
10-14-2011, 03:53 PM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/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?

jscheuer1
10-14-2011, 04:11 PM
Just hard code it into your load area, ex:


<div id="loadarea" style="width: 600px"><img src="whateveryoulike.jpg" alt=""><br>
Optional text here if you want it</div>

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).

syswriter
10-14-2011, 11:00 PM
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.

jscheuer1
10-15-2011, 12:11 AM
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:


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.

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:


<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel="enlargeimage"]').eq(0).click();
});
</script>

That's it. If you're using mouseover:


<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel="enlargeimage"]').eq(0).mouseover();
});
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

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.

syswriter
10-15-2011, 02:36 PM
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.