spawning a pop up window / overlay from a cfloop

Report · Jan 27, 2010

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?

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>

<div id="cover"> </div>
<div id="slide" onclick="hideSlide()">
<span class="slideControl">Click To Close</span>
<div id="photoSlide">Loading</div>
</div>

</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.

Report · Jan 27, 2010

I noticed you are using innerHTML. That may only work with IE.

Also, you have this:

objectLargePhoto=document.getElementById('largePhoto');

I saw no items called largePhoto. Also, since you mentioned that this is in a loop, if you have two items with the same id, js will get confused and not do anything.

Report · Jan 27, 2010

so if I add the ID="LargePhoto" in my image in the cfloo

p it will not work properly either. Is there a better way to write this section so it will work in all browsers and give ea

ch image an ID? I'm trying to pass the actual image size to this as well. I have it set as 2 tables in the databas

e. here is my query:

<CFQUERY name="cuMag" datasource="#APPLICATION.dataSource#">
SELECT Name, MYFile, Body, hight, width
FROM custMag
</CFQUERY>

Any help would be more then appreciated.

thanks.

Report · Jan 28, 2010

To get js to work, any object you wish to reference has to exist exactly once. If you are doing something inside a loop, you will have to do something to make any relevent element names unique.

For troubleshoot js, I usually use window.alert(); It's tedious, but, a combination of outputting variables and moving the line calling the alert eventually allows me to figure out why things are not working.