Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.