Lightbox trigger question

Discussion in 'Web Design and Development' started by achavandra, Mar 6, 2009.

  1. achavandra macrumors newbie

    Joined:
    Mar 6, 2009
    Location:
    Northern Highlands of Scotland
    #1
    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!).
     
  2. LeviG macrumors 65816

    Joined:
    Nov 6, 2006
    Location:
    Norfolk, UK
    #2
    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 :eek:

    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>

    Code:
    <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>
    
     
  3. Guiyon macrumors 6502a

    Joined:
    Mar 19, 2008
    Location:
    North Shore, MA
    #3
    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):
    Code:
    <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).
     
  4. achavandra thread starter macrumors newbie

    Joined:
    Mar 6, 2009
    Location:
    Northern Highlands of Scotland
    #4
    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.:confused:
     
  5. LeviG macrumors 65816

    Joined:
    Nov 6, 2006
    Location:
    Norfolk, UK
    #5
    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>
    Code:
    <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.
     
  6. achavandra thread starter macrumors newbie

    Joined:
    Mar 6, 2009
    Location:
    Northern Highlands of Scotland
    #6
    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...
     
  7. Scooby_Doo macrumors member

    Scooby_Doo

    Joined:
    Apr 5, 2005
    Location:
    Chicago
    #7
    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!
     
  8. LeviG macrumors 65816

    Joined:
    Nov 6, 2006
    Location:
    Norfolk, UK
    #8
    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 :eek:
     

Share This Page