lightbox question
- Started
- Last post
- 6 Responses
- move
I was wondering if anyone could answer a quick question for me? I am attempting to create groups of images on my site with lightbox, similar to how it is done on this site:
http://eslercreative.com/work.ht…
I guess my question is how do you create those individual groups? Would you create four individual image folders in your lightbox file, or is it something in the scripting?
- acrossthesea0
Check out the <a href> tag for how they create sets. Looks like they use: rel="lightbox[work2]"
Also: http://www.huddletogether.com/pr…
(Part 2, number 2)
- move0
hey thanks for you response:
yeah, I checked out the huddletogether site. The problem is that the site is very vague on how to create those sets. It doesn't give a thorough explanation on how or where the images should be placed or grouped. For example, is [work2] references a folder of images or a script?
- acrossthesea0
It's not a folder as it doesn't care where these images are. So if you want 3 images for a set, just have 3 complete <a href> tags with the rel="lightbox[setname]" and wrap one of those around a thumbnail image so you have something to actually click on. Once you click on it, it'll know that you have 3 total images to cycle through.
- move0
I guess the next question would be how to include the <a href> link to the images in the set that are not thumbnails. I currently have the thumbnails within AP Divs. Should I take the images (without thmbnls) into illustrator and create the <a href> link there?
- acrossthesea0
You kinda lost me when you mentioned adding links in illustrator but I think you're over-thinking this a bit. Take a look at the Elser creative link you mentioned earlier and see how they're going about this. Looks like they are wrapping a link around around the thumbnail image. When you click on this, it will launch lightbox. Lightbox will then associate any other <a hrefs> on the page with the same rel="lightbox[pandas]" and show them as a set.
For the other images in the set that are not thumbnails, just write the full <a href> code with the rel="lightbox[pandas]" and don't put anything between <a> and </a>. This won't show up on the page, but lightbox will see these as additional items in your set.
<a href="image-1.jpg" rel="lightbox[pandas]">IMG THUMBNAIL GOES HERE</a>
<a href="image-2.jpg" rel="lightbox[pandas]">LEAVE THIS SPACE EMPTY</a>
<a href="image-3.jpg" rel="lightbox[pandas]">LEAVE THIS SPACE EMPTY</a>
- move0
damn I meant photoshop:) I wrote the response late last night. I'll try your answers and let you know how it works out. thanks again for the help