Image Thumbnail Viewer II :: Preload First Image

[itskimical]

1) Script Title:
Image Thumbnail Viewer II

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

3) Describe problem:
How do I tell the script to preload my first image in the load area so when someone comes to the page they see the first image automatically?

P.S. How do I mark a past thread as resolved?

[Nile]

To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"

To have the image already there, in your rev put:

preload:yes

[itskimical]

That did not work.

Here is the page
[BROKEN LINK REMOVED]

And here is the PHP Code. Just a side note - I had it converted to HTML with the images in PHP and I got the same outcome.

echo "<div id=\"loadarea\" style=\"width: 600px\"></div>";
if (!empty($display_lgimage1))
echo "<a href=\"$urldir/$searchrow[LgImage]\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea,preload:yes\"><img border=\"0\" src=\"$urldir/$searchrow[SmImage]\"/></a>";
if (!empty($display_lgimage2))
echo "<a href=\"$urldir/$searchrow[LgImage2]\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea\"><img border=\"0\" src=\"$urldir/$searchrow[SmImage2]\"/></a>";
if (!empty($display_lgimage3))
echo "<a href=\"$urldir/$searchrow[LgImage3]\" rel=\"enlargeimage\" rev=\"targetdiv:loadarea\"><img border=\"0\" src=\"$urldir/$searchrow[SmImage3]\"/></a>"; 

[jscheuer1]

Where you have, in the served source code:

<div id="loadarea" style="width: 600px" rev="preload:yes"></div>

The highlighted is meaningless. It could go with the trigger links, example:

<a href="http://prettysmartcart.com/smartcart/images/Coat-3.png" 
rel="enlargeimage" rev="targetdiv:loadarea,preload:yes">

But it's the default anyway and has nothing to do with what you want. It just governs whether or not the larger images are preloaded so that they don't have to load when called for. This has nothing to do with what first appears in the loadarea div. That may and should if desired be hard coded:

<div id="loadarea" style="width: 600px; height: 351px;">
<img src="http://prettysmartcart.com/smartcart/images/Coat-2.png" alt="" />
</div>

The height bit is optional, but will help the browser layout faster if known. In the case of various heights to images loaded in there, it will (if set large enough) prevent the page from jumping. I calculated it for that page only. It's the height of the images that will go in there. It should be the maximum height of the images (the tallest if there are various heights) that go in there, allow extra for the description, if used.

You can put anything you like in there for the highlighted part. It will be overwritten as soon as one of the triggers is activated.

[itskimical]

John - you are super duper great!!!!

The third fix is what I needed!!!

Thanks a TON!!!