I would like to implement in my project the "large picture" effect as shown in the RealEstate example project : more precisely like on the "retblresults_view page". It has this "mouse over" event showing a enlarged image of the selected picture.
Meanwhile my concept is different:
I have two tables "Property" and "Image". Property is the master table, Image is the details table. Both tables are linked on the propertykeyID field.
Property table has the following fields: propertykeyID.
Image table has the fields: imagekeyID, Photo, propertykeyID
So the Image table holds several photos (of one property) one photo per record.
I have also a Property_view page displaying the Image_list page. The Image_list page shows 4 pictures per row though.
Now, In the visual editor tab of the Image_list page I have put this html code : <IMG id=imgMainPhoto src="images\no_image.gif">
Then in the 'Javascript OnLoad event' of the Image_list page I have copied this code from the example
$("td[id^=Photo]").each(function()
{
if($(this).find("img")[0])
{
if($("#imgMainPhoto").attr("src")=="images\\no_image.gif")
$("#imgMainPhoto").attr("src",$(this).find("img")[0].src);
$(this).bind("mouseover", function(e){
$("#imgMainPhoto").attr("src",$(this).find("img")[0].src);
});
}
});
This code with the "mouseover" event works well in the RealEstate example in the "retblresult_view" page but then this table has several fields per record to hold the images and there is no master - detail relationship.
The code however does not work in my project because instead I have one imagefilename field per record in the Image table, and several records to hold all images.
As well as directly in the Image_list page or in the Property_view page (with the Image_list page as detail page) nothing happens when I move the mouse over a photo. I do not get the enlarged picture in the "imgMainPhoto". Can someone help me with the adjusted code I need? Many thanks in advance.
Yves