Jquery and Coldfusion Loops - jquery-ui

Question

If you are calling a modal dialog box in jquery, but have the image file location in an array, how would you call this dialog box where if they clicked the link, the image would pop up? Right now, because of a loop it is obviously only using the last file name.
function showDialog(){
$("#image_viewer").html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
$("#modalIframeId").attr("src","image_view.cfm");
return false;
}
$(document).ready(function() {
$("#image_viewer").dialog({
autoOpen: false,
modal: true,
height: 800,
width: 600
});
});

Answer 1

You're trying to use an iframe as a modal dialog, you should just use a DIV.
<!--- HTML --->
<div id="imageDialog" class="dialog" style="display:none;"></div>
Then you can output a list of links to your images like this:
<!--- CFML --->
<cfoutput query="qImages">
#qImages.label#<br />
</cfoutput>
Finally, you can open the URL for the image directly into the modal dialog using a bit of class trickery.
<!--- jQuery --->
$(document).ready(function(){
$('.dialog').dialog(
{
autoOpen: false,
modal: true,
width: 440,
height: 330,
title: "Image Viewer"
}
);
$('a.image').click(function(e){
$('#imageDialog').load( $(this).attr('href') ).dialog("open");
e.preventDefault();
});
});