Setup: Drupal 6.1, Lightbox V2 6.x-1.5, FCKEditor module 6.x-1.1, FCKEditor 2.5.1 (and now 2.6 Beta), Mac OS X 10.5.2, all browsers.

As explained here, Lightbox V2 can display a group of images with forward / back buttons. However, using this method actually shows the text links (as indicated on that page) “image #1,” “image #2,” and “image #3.” I want to hide those links and display a single thumbnail picture that launches Lightbox V2 and allows the user to browse the group.

I have got the following code working on a development site which displays a single thumbnail on the page. If the user clicks on it, Lightbox launches and allows browsing of three images:

<div>
     <a href="image/1of3.jpg" rel="lightbox[group]"><img src="image/teaser.png" /></a>
     <a href="image/2of3.jpg" rel="lightbox[group]"></a>
     <a href="image/3of3.jpg" rel="lightbox[group]"></a>
</div>

This seems to work JUST FINE: a thumbnail is displayed on the page. If the user clicks on it, they are taken to 1of3.jpg and are able to browser through all three images with forward / back buttons.

Problem is, the second and third links are invalid HTML (no text is included between <a> and </a>. So, when saving the page FCKEditor strips out those links. The only solution is to edit the page in plain text mode. Is there a way to prevent FCKEditor from stripping out these links ... or ... is there a better coding solution to achieve this?

Thanks!

Comments

jeffsensat’s picture

jeffsensat CreditAttribution: jeffsensat commented

Answering my own question:

In order to make secondary (and any subsequent) group text links in Lightbox V2 invisible, assign an html “ID” attribute in the anchor tag to the secondary (and any additional) link. For instance:

<div>
     <a href="image/1of3.jpg" rel="lightbox[group]"><img src="image/teaser.png" /></a>
     <a href="image/2of3.jpg" rel="lightbox[group]" id="hide">Image2</a>
     <a href="image/3of3.jpg" rel="lightbox[group]" id="hide">Image3</a>
</div>

Now edit your master CSS with an entry such as:

#hide {
	display: none;
}

This will target any element with the ID “Hide” (id="hide" in HTML / #hide in CSS) to be completely invisible; the text links “Image2” and “Image3” above should be hidden.

Note: display: none is used instead of visibility: hidden since using the visibility: tag still leaves a VISIBLE BLANK SPACE where the element is positioned, whereas display: not only makes the element invisible but also does NOT make (or leave) space for it. More info here.

ncy’s picture

ncy CreditAttribution: ncy commented

nice post.

what if you had a thumbnail viewer, where there were left and right arrow buttons to browse through each thumbnail? would it be possible to have Lightbox open the currently displayed thumbnail (Image X of Y) in the set? or can you only start Lightbox from the first image when you're hiding links?

thx

stella’s picture

stella CreditAttribution: stella commented
Category: support » feature
Status: Active » Fixed

jeffsensat: Thanks! I've added a new class to the lightbox2 css files (#lightbox_hidden) which is the same as your #hide example. This means the users don't have to modify their css file to implement your solution. I've also updated the README.txt file with your example, and will update the online documentation as soon as another release is made. Thanks again.

ncy: I don't fully follow your question. However, what I can say is that lightbox will open whatever image/link is clicked on. It doesn't have to be the first in the set when hiding links. Using jeffsensat's example above, if the #hide class was given to links 1 and 3, when link 2 is clicked on, then the 2nd image is opened in the lightbox with a prev/next link to each of images 1 and 3. Hope that makes sense.

Cheers,
Stella

jeffsensat’s picture

jeffsensat CreditAttribution: jeffsensat commented

This is a pretty special day, snpower. It marks my first EVER contribution to impact Drupal. Given the MASSIVE efforts of everyone else who’ve spent time creating the CMS I’ve grown to love, I’m VERY glad that I could have been some small help!

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

stella’s picture

stella CreditAttribution: stella commented

Released in Lightbox2 6.x-1.6 and 5.x-2.6.

Cheers,
Stella

s.Daniel’s picture

s.Daniel CreditAttribution: s.Daniel commented

Stella: What was releases in 6.x-1.6 and 5.x-2.6?

ncy’s picture

ncy CreditAttribution: ncy commented

you can specify to hide the lightbox link on the page, but have it still show up in the lightbox popup window (see above thread) by using class="lightbox_hide_image"

see here: http://drupal.org/node/144488

-nick

stella’s picture

stella CreditAttribution: stella commented

You can find out in the release notes. See http://drupal.org/node/55200/release for all past releases and their release notes.

s.Daniel’s picture

s.Daniel CreditAttribution: s.Daniel commented

Thanks Stella and ncy - I know about the releases page - I just wanted to know what had been changed in 6.x-1.6 related to this issue which is clear now. Sorry for not making myself clear.