Lightbox trigger question

[achavandra]

As a designer, I have little or no knowledge of Javascript but I'm trying to call a lightbox gallery of about six images from a single button (with a rollover state). However, all the examples I've seen show thumbnails of each image in the gallery.

Does anyone know if this can be done from a single button? - if so, can they recommend a suitable lightbox app? (one for the technically disadvantaged!).

 

[LeviG]

I'm not sure if this is what you're after but this is what I'm using to get a rollover link to a 'lightbox gallery'
I'll admit this was a lot of trial and error for me as I'm not a web designer by trade and the author of the script avoided the question but this works for a single image with left/right linking to the next image etc. It could probably be improved but as I said I'm no web designer/developer

It was done with floatbox as it seemed to offer more of what I needed and theres lots of options to play with.

You may need to change a few bits to suit your own site, for a slideshow etc.

source -

<div>
<a onmouseover="changeImages('thumb5a','thumbnails/red/thumb5b.jpg');return true" rel="gallery.group" title="Create animations to show how a product works <a onmouseover=" changeimages(="" thumb5a="" ,="" thumbnails="" red="" thumb5b.jpg="" );return="changeImages('thumb5a','thumbnails/red/thumb5b.jpg');return" true="" onmouseout="changeImages('thumb5a','thumbnails/grey/thumb5a.jpg');return true" href="images/gallery/image5.jpg"><img style="width: 181px; height: 109px;" id="thumb5a" src="thumbnails/grey/thumb5a.jpg" alt="Image 5" name="thumb5a" border="0"></a></div>

<div>

					<a onmouseover="changeImages('thumb5a','thumbnails/red/thumb5b.jpg');return true" rel="gallery.group" title="Create animations to show how a product works <a onmouseover=" changeimages(="" thumb5a="" ,="" thumbnails="" red="" thumb5b.jpg="" );return="changeImages('thumb5a','thumbnails/red/thumb5b.jpg');return" true="" onmouseout="changeImages('thumb5a','thumbnails/grey/thumb5a.jpg');return true" href="images/gallery/image5.jpg"><img style="width: 181px; height: 109px;" id="thumb5a" src="thumbnails/grey/thumb5a.jpg" alt="Image 5" name="thumb5a" border="0"></a></div>
				<div>

 

[Guiyon]

Edit: Ah, I see the issue now. Ignore this; doesn't help much as you still need all the images linked into the group somewhere and these are more slideshow related than gallery layouts.

IIRC, the actual object that has the link doesn't matter with Lightbox; all that matters is that something is contained within an 'a' tag with the 'rel="lightbox[imagename]"' attribute.

ie (this code should work, haven't tested it):

<a href="images/first_image.png" rel="lightbox[group]">
  <button type="button">Some Text</button>
</a>

This is method works for either Lytebox or Lightbox2 (I'm using Lytebox personally, much more lightweight).

 

[achavandra]

Still puzzled

Thanks for these but it still seems that I must have each of the images in a set linked to separate text/images on the page - that's what I'm trying to avoid.

 

[LeviG]

This is all covered on the site I got mine from but you need to use href to add in the remaining images but they won't show on the page (ie hidden referencing) - mine is like the below and links with my above text.
Source
<div>
<a href="images/gallery/image5.jpg" rel="gallery.group" title="Create animations to show how a product works"></a><a href="images/gallery/image6.jpg" rel="gallery.group" title="Remove unwanted parts of a photo"></a>

<div>
 <a href="images/gallery/image5.jpg" rel="gallery.group" title="Create animations to show how a product works"></a><a href="images/gallery/image6.jpg" rel="gallery.group" title="Remove unwanted parts of a photo"></a>

If you're still struggling go to my site in profile and go to the gallery pages and look at the source code to see how I've done mine.

 

[achavandra]

Thanks again! - it's starting to sink in, now. [And I'm delighted to find from your headers that I'm not the only Luddite who still prefers GoLive to Macromedia's offerings, with their wonderful capability but just about the worst GUI in history (despite Adobe's efforts).] Now, if I can just get it working before my head explodes...

 

[Scooby_Doo]

Hack a solution?

This is an interesting problem.

As far as the JavaScript I've been increasingly using the jQuery framework to get these effects working. You just have to link to them in your <head> tag then write some relatively simple code to get the functionality to work. Great documentation:
http://plugins.jquery.com/project/jquery-lightbox

However, you probably already have something that works for you.

When I was searching I found the same problem as you, you have to show all images for them to be added to an array of images that the script is picking up. Why not try hacking a solution and "layering" them on top of one another using CSS? Some absolute positioning for every image in a <div> tag could make them look like one button, when really there are as many as you want.

Good luck!

 

[LeviG]

Thanks again! - it's starting to sink in, now. [And I'm delighted to find from your headers that I'm not the only Luddite who still prefers GoLive to Macromedia's offerings, with their wonderful capability but just about the worst GUI in history (despite Adobe's efforts).] Now, if I can just get it working before my head explodes...

Yeah I prefer (in my view) the design orientated approach of golive over the developer approach of dreamweaver (although I am trying to get back into dw as I did a basic course on it), it's a shame it's been discontinued now

As to getting it all working, you really don't want to know how long I spent playing with it all to get it working in the first place