Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ onclick gallery with text and images

Posted by: Plane_Crazy_4_YHWH Jul 28 2009, 08:04 PM

OK, I posted this in the CSS section earlier, but I don't think it will really work without some JS...

Could someone help he figure out how to create a type of gallery that contains text, links, and images, only when clicked?

This is close to what I'm looking for, except I want it to display only when clicked.

http://www.cssplay.co.uk/menu/gallery-large.html

Thanks in advance,

KJ

Posted by: Frederiek Jul 29 2009, 03:18 AM

Have you also taken a look at Stu Nicholls' other site, where he makes use of java script: http://www.stunicholls.com/ ?

You also might be interested in Lightbox (http://www.huddletogether.com/projects/lightbox2/) or Thickbox (http://jquery.com/demo/thickbox/), but you'll need the jQuery javascript library for that one.

Posted by: pandy Jul 29 2009, 01:28 PM

You could also google "javascript+show+hide" and DIY.

Posted by: Plane_Crazy_4_YHWH Jul 30 2009, 04:20 PM

ok, I have found this simple script that almost does the trick...

<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>

and then for the effect I wanted, just as an example,

in the body goes:

<a href="#" onclick="showhide('div1'); return(false);">Div1</a>

<div style="display: none;" id="div1">
This text is displayed for div1.
</div>

This works fine, except that when I have multiple divs to show and hide. When a second div is selected, it drops down below the first, and if a third is selected, it drops below the second, and so on...

How could this code be modified so that the first one dissapears when the second is clicked?

Posted by: pandy Jul 30 2009, 11:54 PM

As you would do with "normal" DIVs to make them appear side by side, float them or whatever. Or maybe DIV isn't the best option.