spawning a pop up window / overlay from a cfloop
Hello;
I'm trying to spawn a cfml . ajax / dhtml overlay layer in my gallery. I don't get any errors, accept I can't get it to execute when I click on the image that's supposed to spawn the overlay (pop up window) I'm attaching my code, can someone help me figure out what is going wrong here?
<!--- Java script for the head --->
<script type="text/javascript">
function findLivePageWidth(){
if (window.innerWidth)
return window.innerWidth;
if (document.body.clientWidth)
return document.body.clientWidth;
return (null);}
function initSlides(){
objectSlide=document.getElementById('slide');
objectCover=document.getElementById('cover');
objectPhotoSlide=document.getElementById('photoSlide');}
function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src="'+evt.src+'" id="LargePhoto" alt="Large Photo" border="0"/>';
objectPhotoSlide.innerHTML+='<p>'+evt.alt+'</p>';
objectLargePhoto=document.getElementById('largePhoto');
livePageWidth = findLivePageWidth();
newLeft = ((livePageWidth/2)-8) - (200);
objectSlide.style.left = newLeft + 'px';
objectSlide.style.display = 'block';
objectCover.style.display = 'block';}
function hideSlide(){
objectSlide.style.display = 'none';
objectCover.style.display = 'none';}
window.onload=initSlides;
</script>
<style>
#slide {
position:absolute;
z-index: 1000;
display: none;
top: 100px;
text-align: right;
padding: 0px 8px 8px 8px;
background-color: #fff;
cursor: pointer;
font: Verdana, Geneva, sans-serif;
}
#cover {
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
display: none;
background-color: #000;
opacity: .75;
filter:progid:DXImageTransform.
Microsoft.BasicImage(opacity=.75);
top: 0px;
left: 0px;
}
#photoAlbum {
z-index: 0;
}
#photoAlbum img {
width: 40%;
border: 2px solid red;
margin-left: 0px;
}
.slideControl {
color: red;
}
</style>
<body>
<!-- here is my loop and the divs for the overlay pop up window, I didn't put in my query, that's working fine with the next / prev functions. I'm adding in this overlay to a working layout--->
<div id="cover"> </div>
<div id="slide" onclick="hideSlide()">
<span class="slideControl">Click To Close</span>
<div id="photoSlide">Loading</div>
</div>
<div id="photoAlbum">
<cfloop query="cuMag" startRow="#URL.startRow#" endRow="#endRow#"><cfoutput>
<img src="../img/custom/#MYFile#" border="0" alt="text here" onClick="showSlide(this);">
</cfoutput></cfloop>
and that's pretty much it. It won't execute and I think it has to do with my cfloop. Can anyone help me figure this out?
thank you.
AdChoices