Need help modifying code on Image Thumbnail Viewer II

[neo8223]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:
Hi all, i'm doing a project at uni and needed a script like this. i've got this script working to its perfect working parameters, however i was wandering if someone could help me modify the code so that the first image is showing in the load area div when the page loads. This would be very helpful as i do not know the first thing about java script. I literally copied, pasted and prayed.

I'm using a php database to dynamically create multiple thumbnail viewers. Works a treat! however, none of the large images work. In the good spirit of programming, if you are intrested, i copied the code below. Im new to php programming (first week) so i'm sure theres a better way of doing it, but this works.

Any help is most welcomed.

Many Thanks, Paul.

<?php
//if you are at city university in london, in your final year doing a php project, dont copy this code. you dont want to get done for plagurism because i know i wont!

//This will make one table with 4 columns per row and will make an infinate number of rows depending on the datasource.
// my connection string.
include("connection.php");
//there are four images stored on the site, all with the same start of name, which is storred in the table in the "name field"
$result = mysql_query("SELECT * FROM cards");
//count is used to assign seperate divs to each set.
$count = 1;
$column = 1;
echo "<table class = 'table'><tr><td>";
while($row = mysql_fetch_array($result))
{
//loads a new div
    echo"<div id='loadarea".$count."' class = 'thumb'></div><br>";
//loads the 4 images.    
    echo"<a href='CardTemplates/".$row['name']."front_thumb.jpg' rel='enlargeimage::mouseover' rev='loadarea".$count."::CardTemplates/".$row['name']."front.jpg' title='front'><img class='thumbRollover' src='CardTemplates/".$row['name']."front_thumb.jpg' /></a>";
    
    echo"<a href='CardTemplates/".$row['name']."left_thumb.jpg' rel='enlargeimage::mouseover' rev='loadarea".$count."::CardTemplates/".$row['name']."left.jpg' title='left'><img class='thumbRollover' src='CardTemplates/".$row['name']."left_thumb.jpg' /></a>";

    echo"<a href='CardTemplates/".$row['name']."right_thumb.jpg' rel='enlargeimage::mouseover' rev='loadarea".$count."::CardTemplates/".$row['name']."right.jpg' title='right'><img class='thumbRollover' src='CardTemplates/".$row['name']."right_thumb.jpg' /></a>";

    echo"<a href='CardTemplates/".$row['name']."back_thumb.jpg' rel='enlargeimage::mouseover' rev='loadarea".$count."::CardTemplates/".$row['name']."back.jpg' title='back'><img class='thumbRollover' src='CardTemplates/".$row['name']."back_thumb.jpg' /></a>";
    
// if the column gets to 4 then it makes a new row in the table. Change that number to fit more/less on each row.
    if ($column >= 4)
    {
        echo "</td></tr><tr><td>";
        $column = 1;
    }
    else
    {
        echo "</td><td>";
        $column ++;
    }
    $count ++;
    
}
echo "</td></tr></table>";
mysql_close($con);
?>

[steelo]

Hi Paul,

I have the same problem aswell! I also would like to know how to show the first picture when the page loads.

Whats your url?

[neo8223]

Hi Steelo, i've not hosted the site yet, its still on my local machine. I'll be hosting it by monday if i manage to get it to work on my university space.

[jscheuer1]

This has been addressed many times before. Since the contents of the loadarea will be overwritten by the script once one of the triggers is activated, you may place any HTML in there that you like, ex:

<div id="loadarea" style="width: 600px">
<img src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" alt="">
</div>

[neo8223]

Thank you sooo much! i have the table exactly how i would like it now.