Forums
This topic is locked
Database Driven Picture gallery.
17 Dec 2006 10:42:31 Mike Sal posted:
Hi, I am building a site for a real estate agent. I am working on building the detail page of each home and I am trying to get 10 images + a main image to load in the page. 10 will be thumbnails and 1 will be the main image. When you click the thumbnail it will become the "main" picture.
I have some javascript that allowed me to create this and it works great UNTIL I try to pull the thumbnails into the page from the database.
I have some code from the page that I will post at the end to see if someone can help me figure this out. Thanks in advance. Is there something about pulling data from a database into javacode that I am missing? I got this code from WebThangs.com by the way with a tutorial on how this is supposed to work. I guess the site is going down these days and I cant get help from that site.
THANKS AGAIN
MIKE
<pre id=code><font face=courier size=2 id=code>
<td colspan="5" align="left"><div align="center" class="darkgrayTextLarge"><%=(rsdetail.Fields.Item("Address"
.Value)%></div></td></tr>
<tr>
<td colspan="5"><span class="adminTbl"><img src="<%=(rsdetail.Fields.Item("MainPicture"
.Value)%>" name="large" width="400" height="301" border="1" align="middle" id="large" /></span></td> //THIS IMAGE LOADS GREAT AND WORKS FINE//////</tr>
<tr>
<td align="center"><a href="javascript:image_click(0)"><img src= width="75" height="55" name="pimage0" border="1"></a></td>
<td align="center"><a href="javascript:image_click(1)"><img src= width="75" height="55" name="pimage1" border="1"></a></td>
<td align="center"><a href="javascript:image_click(2)"><img src= width="75" height="55" name="pimage2" border="1"></a></td>
<td align="center"><a href="javascript:image_click(3)"><img src= width="75" height="55" name="pimage3" border="1"></a></td>
<td align="center"><a href="javascript:image_click(4)"><img src= width="75" height="55" name="pimage4" border="1"></a></td>
</tr>
<tr>
<td align="center"><a href="javascript:image_click(5)"><img src= width="75" height="55" name="pimage5" border="1"></a></td>
<td align="center"><a href="javascript:image_click(6)"><img src= width="75" height="55" name="pimage6" border="1"></a></td>
<td align="center"><a href="javascript:image_click(7)"><img src= width="75" height="55" name="pimage7" border="1"></a></td>
<td align="center"><a href="javascript:image_click(8)"><img src= width="75" height="55" name="pimage8" border="1"></a></td>
<td align="center"><a href="javascript:image_click(9)"><img src= width="75" height="55" name="pimage9" border="1"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr class="cyanTextBold">
<td>Listing Agent:<br />
Mike<br />
<br /></td>
<td align="right">More Photos <img src="images/arrow.gif" width="9" height="7" /><br />
Printable Flyer <img src="images/arrow.gif" width="9" height="7" /><br />
Virtual Tour <img src="images/arrow.gif" width="9" height="7" /><br />
Map Property <img src="images/arrow.gif" width="9" height="7" /></td>
<td align="right">Open House <img src="images/arrow.gif" width="9" height="7" /><br />
Request An Appointment <img src="images/arrow.gif" width="9" height="7" /><br />
Loan Calculator <img src="images/arrow.gif" width="9" height="7" /><br />
Email This Property <img src="images/arrow.gif" width="9" height="7" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td valign="top" class="darkgrayTextLarge"><%=(rsdetail.Fields.Item("Description"
.Value)%></td></tr>
</table> </td>
</tr>
<tr>
<td align="center" class="cyanTextBold"><a href="listings1.asp">Back To Properties</a> <img src="images/arrow.gif" width="9" height="7" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><img src="" alt="The P Dog Team" name="rfbottom" width="700" height="40" id="rfbottom" style="background-color: #000000" /></td>
</tr>
</table>
<script language="JavaScript">
image0 =new Image();
image1 =new Image();
image2 =new Image();
image3 =new Image();
image4 =new Image();
image5 =new Image();
image6 =new Image();
image7 =new Image();
image8 =new Image();
image9 =new Image();
// These 3 lines define the source of the displayed images // HERE IS WHERE THE THUMBNAILS RUN INTO A PROBLEM//
image0.src ="<%=(rsdetail.Fields.Item("MainPicture"
.Value)%>"image1.src ="<%=(rsdetail.Fields.Item("Pic1"
.Value)%>"image2.src ="<%=(rsdetail.Fields.Item("Pic2"
.Value)%>"image3.src ="<%=(rsdetail.Fields.Item("Pic3"
.Value)%>"image4.src ="<%=(rsdetail.Fields.Item("Pic4"
.Value)%>"image5.src ="<%=(rsdetail.Fields.Item("Pic5"
.Value)%>"image6.src ="<%=(rsdetail.Fields.Item("Pic6"
.Value)%>"image7.src ="<%=(rsdetail.Fields.Item("Pic7"
.Value)%>"image8.src ="<%=(rsdetail.Fields.Item("Pic8"
.Value)%>"image9.src ="<%=(rsdetail.Fields.Item("Pic9"
.Value)%>"// This defines the source of the preview image
document.images['pimage0'].src=image0.src;
document.images['pimage1'].src=image1.src;
document.images['pimage2'].src=image2.src;
document.images['pimage3'].src=image3.src;
document.images['pimage4'].src=image4.src;
document.images['pimage5'].src=image5.src;
document.images['pimage6'].src=image6.src;
document.images['pimage7'].src=image7.src;
document.images['pimage8'].src=image8.src;
document.images['pimage9'].src=image9.src;
// This defines what to do when an image is clicked on
function image_click(clicks)
{
if(clicks==0){document.images['large'].src=image0.src;}
if(clicks==1){document.images['large'].src=image1.src;}
if(clicks==2){document.images['large'].src=image2.src;}
if(clicks==3){document.images['large'].src=image3.src;}
if(clicks==4){document.images['large'].src=image4.src;}
if(clicks==5){document.images['large'].src=image5.src;}
if(clicks==6){document.images['large'].src=image6.src;}
if(clicks==7){document.images['large'].src=image7.src;}
if(clicks==8){document.images['large'].src=image8.src;}
if(clicks==9){document.images['large'].src=image9.src;}
}
</script>
</body>
</font id=code></pre id=code>