0

...or that's how it feels at least :)

I know similar Lightbox link questions have been asked before but I'm not sure they applied exactly to my situation. I am trying to set it up so that a link in the Lightbox title/caption opens the full size image. In other words, on my page, I have a thumbnail, then if I click on that, it opens a detail (in Lightbox), then below that Lightbox popup would be some text, and a link to view an even larger image (ideally as a Lightbox popup.) I have read a bunch of other threads and followed the instructions to change the <> to html values, etc. and I think I'm nearly there, but it's not quite working. The link is showing up properly in my code, and I get a finger pointer when I hover over the link, but for some reason nothing happens when I click it. I can right click and open the link in new window, and that works, but apparently something (in the Lightbox code?) is preventing it from working on the page.

I guess what I'm wondering is:

  1. Is this possible?
  2. Is it relatively simple (I have no experience with Javascript/Jquery…)
  3. Is it possible to have a link in a Lightbox popup open another Lightbox popup?
  4. Is there an option other than Lightbox that will allow this (Colorbox? Slimbox?)

Here is my code so far:

<a href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="lightbox[<?php echo $page->catalogue(); ?>]" title="&lt;a href='<?php echo dirname($image->url()); ?>/max/<?php echo $image->name() ?>-max.jpg' rel='lightbox'&gt;FULL SIZE&lt;/a&gt;"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width() ?>" height="<?php echo $image->height() ?>" alt="<?php echo $image->name() ?>" /></a>

Here is an example of how it's outputting: 

<div class="item" style="width: 194px; margin: 3%;">
    <a href="http://www.chrissvensson.info/ces85/content/035-035/detail/DSC_3335-detail.jpg" rel="lightbox[035]" title="&lt;a href='http://www.chrissvensson.info/ces85/content/035-035/max/DSC_3335-max.jpg' rel='lightbox'&gt;MAXIMUM&lt;/a&gt;"><img src="http://www.chrissvensson.info/ces85/content/035-035/DSC_3335.jpg" width="194" height="300" alt="DSC_3335" /></a></div>

Just to clarify, I am using Lightbox 2.5.1 (http://lokeshdhakar.com/projects/lightbox2/)

Thanks so much for any help you might be able to provide. And again, I apologize if this has been answered before…

ornmnt
  • 355
  • 2
  • 6
  • 17
  • Could you post the HTML/Javascript this outputs? It'll be easier for us to read & comment on. – Ed_ Apr 08 '13 at 16:09
  • Here is the immediate code. Would more be helpful (and if so, could you tell me the best way to show it? there seems to be a character limit here…) to include more? MAXIMUM Thanks! – ornmnt Apr 08 '13 at 16:21
  • comments do have a limit - the best thing to do is edit your original question to add the code. To format the code nicely, you can copy and paste it from your browser/editor then highlight it all and click the '101010' button, or use the keyboard shortcut: ctrl + K. – Ed_ Apr 08 '13 at 18:41

1 Answers1

0

It's quite hard to tell exactly what you've got so far without you posting a little more of your code, but I can try to go through a couple of the very basics of what you need to do.

Firstly, most lightbox style plugins are based on jQuery, which means you're going to run some javascript code on the client side.

Your PHP will generate the static content which gets everything set up, then you need to run the jQuery plugin which will do lots of magic and convert it into a lightbox. As you didn't mention which plugin you're using I'll go with fancybox, as I think it has a lot of nice options: http://fancybox.net/howto. I won't go through all the boring set up details as they're already on the site, but here's the two most important bits:

  • you need to set up an image, encapsulated by a link, like the example given. Your PHP should dynamically generate this, similar to what you've done already.

<a id="image_id" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Before any javascript, it's just a thumbnail of the image (image_small.jpg) that links through to the full sized one (image_big.jpg)

  • Now to make this actually work, you need to point the javascript plugin at the link you just made.

I would advise you read through some basic jQuery documentation or tutorials like this one, as you'll find the library really useful, but long story short, to select an element by id in jquery, you would use this: $('#image_id').

All you need to do then, is run fancybox on this link when the plugin loads: $('#image_id').fancybox();

The best place to put this is within jQuery's $(document.ready(function(){/*your code in here*/}) which is call when the page is loaded.

With fancybox, to add a caption/title when the window opens, you just need to add a caption="caption here" attribute into the <a> anchors that you create.

Regarding your question about a lightbox popup within a lightbox popup, it is entirely possible, but you'd have to do a little bit of extra javascript wizardry. My advice would be to consider the user experience and find an alternative (perhaps just allow the user to download the massive image, or look for plugins that allow you to zoom in to something), because opening two modal dialogues sounds quite confusing for the user!

Anyway, hope this helps.

Ed_
  • 18,798
  • 8
  • 45
  • 71
  • thank you so much for your kind and thoughtful response! I really appreciate it. I'm going to go over it carefully, and also check out the links you sent. In the meantime, just to answer some of your questions, and clarify, I am using Lightbox 2 (http://lokeshdhakar.com/projects/lightbox2). I have been very pleased with it so far, but if you think I might be able to accomplish more with Fancybox, I'd be willing to switch. – ornmnt Apr 08 '13 at 20:17
  • I will try to put some more code in the original question like you suggested. In the meantime, it might be easiest to just look at one of the pages: (http://www.chrissvensson.info/ces85/035) Everything is working fine with the Lightbox effect except the "MAXIMUM" link that shows up as a caption on the Lightbox popup. Ideally, this is something I would love to get working. The html on the page seems to indicate that the link _should_ work, but I think something's stopping it… – ornmnt Apr 08 '13 at 20:22
  • I definitely appreciate your point about the user experience, but to be honest, I wouldn't mind if it feels a little unwieldy and dizzying. I'm the only client here and the stakes are pretty low so I would love to play around a little bit with layering :) – ornmnt Apr 08 '13 at 20:25
  • So the reason your lightbox link you've embedded in the caption doesn't work is because at the time the javascript lightbox plugin runs (which is just after the page loads), the embedded link is still an attribute string within another element. So lighbox will just see it as an attribute and not a DOM element that needs lightbox magic. The problem with this plugin is that it doesn't give you any way of triggering it manually, as far as I can see. – Ed_ Apr 08 '13 at 21:15
  • fancybox2 might be worth looking into: http://fancyapps.com/fancybox/#docs . It will be easier to get the effect you want because it has a callback function `afterShow` that will let you call fancybox again on your caption elements. I'm not sure what effect this will have though - as I can't imagine the plugin was designed for it! – Ed_ Apr 08 '13 at 21:20
  • Thanks so much for all your help @ed-hinchliffe! Fancybox looks great. It's funny though—there is an example on their page (Use element instead of attribute) that looks like it's exactly what I want to do, except it's not working :) (http://jsfiddle.net/cWNw9/) There is a link in the caption, but for me at least, it's doesn't work. The good news is, I found another thread and pasted their modification into my Lightbox.js file and it seems to work. Here is the thread: (http://stackoverflow.com/questions/11119879/turning-caption-into-a-link-doesnt-work-in-lightbox-2-51) – ornmnt Apr 08 '13 at 22:44
  • I can't say that I have any idea what that did, but perhaps someday it will make sense. Until then, baby steps. Thanks again for all your help. I think for now I'm gonna stick with Lightbox since it's [tentatively] working, but I will keep Fancybox in mind for a future project. – ornmnt Apr 08 '13 at 22:46