Pop Up Window with Image
Hello. I'm a newbie to ColdFushion. I'm trying to create a page where user can view a list of small pictures. Once he clicks on a picture, its full image will show up in a pop up window. I'm not sure what's missing in my code, but when I click on the small picture, no window nor image will pop up. Can someone give me some suggestions on how to fix this? Thanks a lot!
<!--- retrieve the full article as well as its images --->
<CFQUERY NAME="myQuery1" Datasource="mydb" >
SELECT articles.article_ID, articles.article_title, articles.article_author, articles.article_date, articles.article_content
FROM articles
INNER JOIN article_image_mapping ON articles.article_ID = article_image_mapping.aim_articleID
WHERE articles.article_ID = #URL.ID#
GROUP BY article_image_mapping.aim_articleID
</CFQUERY>
<CFQUERY NAME="myQuery2" Datasource="mydb" >
SELECT images.image_ID, images.image_thumbpath, images.image_fullpath, article_image_mapping.aim_articleID
FROM images
INNER JOIN article_image_mapping ON images.image_ID = article_image_mapping.aim_imageID
WHERE article_image_mapping.aim_articleID = #URL.ID#
</CFQUERY>
<!DOCTYPE html>
<html>
<head>
<title>Assessment Project</title>
<meta charset="UTF-8">
</head>
<body>
<!--- Page Title --->
<h3>Full Article View</h3>
<!--- Page Content --->
<div align="left">
<!--- Display article title, author, date, and full content --->
<cfoutput query="myQuery1">
<b>#ucase(myquery1.article_title)#</b>
<hr>
<p style="color:##848181; font-size:12px">#myquery1.article_author# :: #myquery1.article_date#</p>
#myquery1.article_content#<br/>
</cfoutput>
<br>
<!--- Display images associated with article--->
<cfoutput query= "myQuery2">
<img src="#myquery2.image_thumbpath#" alt="image thumbnail"
onClick="ColdFusion.Window.create('Window1', 'This is a CF window',
'full_img.cfm?toshow=#myquery2.image_fullpath#',
{x:100,y:100,height:300,width:400,modal:false,closable:true,
draggable:true,resizable:true,center:true,initshow:true,
minheight:200,minwidth:200})">
</cfoutput>
</div>
</body>
</html>
