LightBox gallery question

[bntz313]

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.

 

[angelwatt]

And the problem is? Their documentation covers this pretty clearly.

 

[bntz313]

The problem is that I can not set it up to have one image visible and hide the rest

 

[angelwatt]

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.

 

[bntz313]

Here is the site. http://anthonybetancourt.com/work.html See how I have identities or site layout. I wanted all the samples to be show within the lightbox and not displayed as a gallery.

-thanks

 

[angelwatt]

Taking the first image HTML as an example:

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

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

<a ... rel="lightbox[set]">

Clear enough?

 

[needlnerdz]

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.