First attempt at js

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:

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

&bull; Sigma 8mm 1:3.5 EX DG Fisheye Lens<br />
&bull; Canon EF 16-35mm f/2.8 L USM Lens<br />
&bull; Canon EF 24-70mm f/2.8L USM<br />
&bull; 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:

notarypublic

New Member
Here is the javascript I'ver written:

HTML:
<script type = "text/javascript">
        //thumbToShow is the ID of the link that was clicked on
	function showInfo(thumbToShow) {
		
		//Clears all elements with the name "Thumbnail" so that they revert to being hidden again.
		document.getElementsByName("thumbnail").className = document.getElementsByName("thumbnail").className.replace(/\bvisible\b/,'')
		
//Finds the element that was clicked on, based on its class, and adds the 'visible' class.
		document.getElementById(thumbToShow).className += " visible";
	}
</script>

Here is the css for the class "visible"
HTML:
.visible{
    position:absolute;  
    top:0px; 
    left:535px;
	width:230px; 
    height:605px;
    background:#FFFFFF;
	color: #333;
}

and here is an example of one of the image links:
HTML:
<li>
			<a class="gallery slideA" href="#nogo" id = "1" name = "thumbnail" onclick="changeClass("1")">
				<span>
					<img src="http://www.webdesignforum.com/images/pic-gallery/EEG-200.jpg" alt="EEG recording and analysis system" />
				<br/>Both of our 168-channel ActiveTwo EEG recording and analysis systems from BioSemi, Inc., as well as a 64-channel EEG	system from Neuroscan, Inc., are used to take EEG readings during labs.
			</span>
		  </a>
</li>

Now all I have to do is make it work :D
 

DHDdirect

New Member
Hey notary.. The called function in your onclick doesn't match the function in your javascript (function called changeClass, function in javascript is showInfo). Also you can grab the element id with this.id or the element name with this.name such as:

Code:
onclick="changeClass(this.id);"
 
or 
 
onclick="changeClass(this.name);"
 

notarypublic

New Member
DHD, I changed that.. must not be the only problem. I've heard firebug is a good firefox add-in for web code debugging, so I'll give it a shot?
 

DHDdirect

New Member
Can you paste what you have currently? Also one other things that I noticed in your other code is you must make sure to watch your qoutes inside qoutes.. such as:

Code:
//wrong
[COLOR=#008000]onclick=[/COLOR][COLOR=#0000ff]"changeClass("[/COLOR][COLOR=#008000]1")"[/COLOR]
 
//correct
onclick="changeClass('1')"
 
onclick='changeClass("1")'
 

notarypublic

New Member
After 3, 4 days of staring at this.. the solution was ridiculously simple. I created an empty div that floats right of the image slide show, and the content is just replaced with the direct html content of the span that is being clicked on:

HTML:
<script>
	function showInfo(newID) {
		document.getElementById('descArea').innerHTML=document.getElementById(newID).innerHTML
	}
</script>

This is great for this one situation, because the content is all loaded/displayed anyway, through CSS. To use this in the kayak example that someone else asked in a different thread, I'll have to modify the code slightly.

You can see the updated photo gallery here. It has minor issues with text popping, but it's probably an "off by 1" pixel issue with the margins. The CSS is kind of a mess, because I've been experimenting as I go.
 

DHDdirect

New Member
Very good.. Now just to be a pain in the butt I'd suggest to make the image swap when you click on the thumbnail. Main reason is it is impossible to move your mouse without the image changing. Why would someone want to do this you may ask, well there may not be a reason good enough to bother changing your code but I'd say just incase someone wanted to select and copy the text, or possibly to print the page. Either way it'll give you an opportunity to learn more javascript :)
 

notarypublic

New Member
The script should be called when the user clicks on a thumbnail:
HTML:
<a class="gallery slideA" href="#" [B]id = "thumb1" onclick="showInfo(this.id)"[/B]>
				<span>
					<img src="images/pic-gallery/EEG-200.jpg" alt="EEG recording and analysis system" />
				<br/>Both of our 168-channel ActiveTwo EEG recording and analysis systems from BioSemi, Inc., as well as a 64-channel EEG	system from Neuroscan, Inc., are used to take EEG readings during labs.
			</span>
		  </a>

What you see when you move the mouse over another thumbnail is actually a CSS Hack where a hidden, absolutely positioned link (that contains the image, and description.. don't ask why, it seemed like a hack to me from the tutorial) is set to be visible. It just floats on top of the actual text that the javascript is creating. Is it not working correctly?
 

DHDdirect

New Member
Hovering over the thumbnail changes the image on the right. Clicking has no effect. I'd say the hovering effect that you have is overriding the onclick function.
 

notarypublic

New Member
What browser are you using, and do you have js disabled/ need to refresh your cache? I've tried it on different machines, it seems to be working fine..
 

che09

New Member
I didn't get any destruction on that matter,but I just can't click it.. Though whenever I've mouse it over it's fine!!
 
Top