notarypublic
New Member
I have an image gallery that I am trying to add functionality to; when the user clicks on any of the images in the gallery, I want the image and description to persist while the mouse isn't rolling over any of the other images.
I'm still working through the actual javascript code, but I just want to make sure that the concept I have is correct. Currently, every image is a link, and links are set to {overflow: hidden;} unless the mouse is rolling over them. I'll have them display with a z-index of 1000 so that they float over any content behind them.
Next, the actual javascript part: I would make each image an object, and create a temporary object for whichever image/description should be visible at the time. When something is clicked, using the onClick() event I will replace the values inside the temporary object with the content of whichever object was clicked on. The temporary object will have a z-index smaller than what would happen when the mouse rolls over something, so it is hidden while the mouse hovers over another thumbnail.
-----
Is this the best solution?
Edit: This seems to show a more efficient way; I can just add a class to whichever element is clicked on to be visible, and set all of the others to hidden. However, each thumbnail is stored as a link in an unordered list, like so:
Would there be problems adding an additional class? And if I'm supposed to add an onClick() event to each image thumbnail link - how do I tell it to add the 'visible' class to only this link?
EDIT: This thread is still getting responses, so I thought I would include in the first post that I found a solution.
Rather than deal with showing/hidding 25 different divs, I just copied the HTML content from a div that's been clicked on (which is normally hidden, by CSS) into a div that's visible. This system still has functionality if JS is disabled, the CSS method to display the divs will continue to work.
You can see the finished results here: http://www.cvcn.psych.ndsu.nodak.edu/facilities.html
I'm still working through the actual javascript code, but I just want to make sure that the concept I have is correct. Currently, every image is a link, and links are set to {overflow: hidden;} unless the mouse is rolling over them. I'll have them display with a z-index of 1000 so that they float over any content behind them.
Next, the actual javascript part: I would make each image an object, and create a temporary object for whichever image/description should be visible at the time. When something is clicked, using the onClick() event I will replace the values inside the temporary object with the content of whichever object was clicked on. The temporary object will have a z-index smaller than what would happen when the mouse rolls over something, so it is hidden while the mouse hovers over another thumbnail.
-----
Is this the best solution?
Edit: This seems to show a more efficient way; I can just add a class to whichever element is clicked on to be visible, and set all of the others to hidden. However, each thumbnail is stored as a link in an unordered list, like so:
HTML:
<li>
<a class="gallery slideE" href="#nogo">
<span>
<img src="http://www.webdesignforum.com/images/pic-gallery/canon-200.jpg" alt="Canon EOS-1Ds"/>
<br/>The Canon EOS-1Ds is an extra high-resolution professional digital camera featuring a full-frame 35mm CMOS sensor with 11.1 million effective pixels.
Current Lenses:<br /><br />
• Sigma 8mm 1:3.5 EX DG Fisheye Lens<br />
• Canon EF 16-35mm f/2.8 L USM Lens<br />
• Canon EF 24-70mm f/2.8L USM<br />
• Canon EF 100-400mm f4.5-5.6L IS USM Telephoto Zoom Lens<br />
</span>
</a>
</li>
Would there be problems adding an additional class? And if I'm supposed to add an onClick() event to each image thumbnail link - how do I tell it to add the 'visible' class to only this link?
EDIT: This thread is still getting responses, so I thought I would include in the first post that I found a solution.
HTML:
<script>
function showInfo(newID) {
document.getElementById('descArea').innerHTML=document.getElementById(newID).innerHTML
}
</script>
Rather than deal with showing/hidding 25 different divs, I just copied the HTML content from a div that's been clicked on (which is normally hidden, by CSS) into a div that's visible. This system still has functionality if JS is disabled, the CSS method to display the divs will continue to work.
You can see the finished results here: http://www.cvcn.psych.ndsu.nodak.edu/facilities.html
Last edited: