Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

bntz313

macrumors 6502
Original poster
Jul 11, 2007
399
0
Ok, so I'm trying to have a gallery section of my work for my online portfolio. I wanted to have one thumbnail for each section, when clicked opens in a lightbox with the rest of my samples.

I want it to only have one image per group. Hope this makes sense.
 
The problem is that I can not set it up to have one image visible and hide the rest
 
Can you show us what you're trying, or provide a link to a live site? We're not psychic, at least not on Wednesdays.
 
Taking the first image HTML as an example:
HTML:
<a href="site/work_r6_c8.gif" height="78" width="70" alt="art" rel="lightbox[most_beautiful]" title="art">
			  <image #1><img src="site/work_r6_c8.gif" id="work_r6_c8"  height="78" width="70" alt="" />
              		</a>
You have the rel attribute on the link set to "lightbox[most_beautiful]"

From the lightbox page:
Add a rel="lightbox" attribute to any link tag to activate the lightbox.
Code:
<a ... rel="lightbox">
...
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.
Code:
<a ... rel="lightbox[set]">
Clear enough?
 
Had a quick look at your website and it looks like you may have figured it out, since the first line of images offers 8, even though only 4 are shown...

nevertheless i thought i'd throw in my suggestion of considering lytebox ... a modified version of lightbox which doesn't depend on the beefy scriptaculous or prototype libraries [unless you are also utilizing other features of the libraries]. One benefit of lytebox, that may also be in the other, is a slideshow function:

rather than just writing rel="lytebox[series_name]", you can write rel="lyteshow[series_name]" - and then it opens up a whole class of the javascript which provides some nice automated slideshow functions.. timed transitions, etc.

http://www.dolem.com/lytebox/


but to further what angelwatt said.. just only list the first image you want as an actual img src within the link tag.. then for the rest, they just sit below it or really anywhere in the HTML as simply <a href="..." rel="lytebox[series_name]"... tags.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.