The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> onclick gallery with text and images
Plane_Crazy_4_YHWH
post Jul 28 2009, 08:04 PM
Post #1


Member
***

Group: Members
Posts: 42
Joined: 13-October 08
From: My computer desk...
Member No.: 6,886



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 29 2009, 03:18 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2009, 01:28 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You could also google "javascript+show+hide" and DIY.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Plane_Crazy_4_YHWH
post Jul 30 2009, 04:20 PM
Post #4


Member
***

Group: Members
Posts: 42
Joined: 13-October 08
From: My computer desk...
Member No.: 6,886



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 30 2009, 11:54 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:05 PM