Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Help with image gallery


  • Please log in to reply
3 replies to this topic

#1 Sequim Web Dev

Sequim Web Dev

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:11:45 PM

Posted 27 April 2010 - 08:09 PM

Good evening!

A few months back I read an article on someone's post relating to setting up an image gallery with CSS. Basically you create some sort of navigation of categories, then you create a <ul> list of images....each image in it's on <li> and had a class(es) associated to it that corresponded to the navigation of categories. The whole idea was to be able to show certain images at a given time without refreshing the page.

I can't seem to find the article for reference, but I'm needing to figure out how to do this. Ideally the page would have some categories at the top, i.e. beaches, forest, city, etc. When the user clicks on one of those categories, it only displays the images that use that class...some images may be in multiple classes, while others are only in one.

I thought that it could be done with just CSS, but I don't know if it's possible without the help of something like jquery.

Currently I have all the images just dumped on to the page using a script and each one is also implementing lightbox. I'd like to still be able to use the script to call up all the images as I'll have over 200+ images to display. The script to call up the images looks something like this:

[codebox]
&lt;script type="text/javascript">
var i=1;
for (i = 1; i < 180; i+=1){
document.write('<a href="images/big' + i +'.jpg" rel="lightbox[nature]"><img src="images/thumbnails' + i +'.jpg" /></a>');
}
</script>
[/codebox]

Can anyone help? Or am I just off my rocker?? :thumbsup:


TIA

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:45 AM

Posted 28 April 2010 - 08:45 PM

There is any number of ways that this can be done. I don't know what your desired layout is, or why you couldn't just make sections invisible or visible when a button is clicked. It is pretty easy to put content in a div that is initially not visible, then making it visible via Javascript when a button is selected.

#3 Sequim Web Dev

Sequim Web Dev
  • Topic Starter

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:11:45 PM

Posted 29 April 2010 - 12:00 AM

I never thought of that. Ideally, I will have a few categories at the top:

Beaches | Forests | Cities | Other



Each one will show images below that...

What is the best way to go about using the invisibile / visible method with the javascript? Will that effect the current script which is calling up the pictures?

Thanks!

Edited by Sequim Web Dev, 29 April 2010 - 12:00 AM.


#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:12:45 AM

Posted 29 April 2010 - 09:54 AM

Your current script does nothing except display images that are supposed to work like links, but do not even do that because there is nothing to link to. It definitely does not do what you want, or even come close. Here is a sample that does what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript">

function hide_show(id){

	var showId = 'div' + id;

	document.getElementById("div1").style.display = "none";
	document.getElementById("div2").style.display = "none";

	document.getElementById(showId).style.display = "block";
}

</script>

<style type="text/css">

#div1{
	display:none;
}

#div2{
	display:none;
}

</style>

</head>

<body>

	<input type="button" id="1" value="Rainbows" onclick="hide_show(1)"/>
	<input type="button" id="2" value="Bunnies" onclick="hide_show(2)" />

	
	<div id="div1">
		<br />Div 1 is now visible<br />
		<img src="http://seligorscastle.zoomshare.com/files/3_blind_mice/RAINBOWS/Over_the_rainbow.gif" alt="rainbow" />
	</div>
	<div id="div2">
		<br />Div 2 is now visible<br />
		<img src="http://www.mype.co.za/gallery/data/media/25/bunnies.jpg" alt="bunnies" />
	</div>
</body>
	

</html>

There are a ton of ways to do this, but the general principle is that you set everything invisible, regardless of the fact that it may already be invisible, then make the one part you want visible, visible. You lay out your elements inside each div,whether it be tables, lists, images, links, etc., and everything will initially be hidden. If you want one of the divs to initially be visible, set its style to 'display:block'.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users