Last updated September 21, 2010. Created by stella on April 28, 2008.
Log in to edit this page.

This is very similar to the grouping functionality for images. The only difference is that "rel" attribute should be set to lightshow instead of "lightbox". Using the same example as above, we could launch the images in a slideshow by doing:

<a href="images/image-1.jpg" rel="lightshow[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightshow[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightshow[roadtrip][caption 3]">image #3</a>

If you want to display a "start slideshow" link at the top of the page for example (e.g. in a views header), you could try the following:

<a href="#" onclick="Lightbox.triggerLightbox('lightshow', 'groupname');">Start slideshow</a>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

This code will create a slideshow from a series of thumbnails displayed on a page. I want to display only one thumbnail that launches a Lightbox2 slideshow. I'm not using any of the Drupal gallery tools and wanted to know how you would place the code inline to link several images together. Sorry if this has been discussed, if so I could not find it. Thanks.

try this, which should show just one link "MyImages", but shows a slideshow of 3 images when clicked on:

<a href="images/image-1.jpg" rel="lightshow[roadtrip]">MyImages</a>
<a href="images/image-2.jpg" rel="lightshow[roadtrip][caption 2]"></a>
<a href="images/image-3.jpg" rel="lightshow[roadtrip][caption 3]"></a>

I've done this (except for replacing "lighshow" with "lightbox" because I don't want it to auto-play) and it works great, except it seems that whenever I go back into a page to edit it after initially entering the code, all of the subsequent slides have been removed from the code, so all I have left is the thumb and one slide. It seems to be formatted exactly like other pages which work fine. Any ideas? (Images are in a table so they show side by side.)

<table>
<tbody>
<tr>
<td><a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_01.png" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"> <img src="http://thebookjam.com/images/buttons-tour/7-steps-jambox-expository-thumb.png" alt="7 Steps for a Composition"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_02.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_03.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_04.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_05.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_06.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_07.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_08.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_09.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_10.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_11.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_12.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_13.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_14.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_15.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_16.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_17.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_18.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_19.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_20.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_21.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
<a href="http://thebookjam.com/images/buttons-tour/7-steps-JAMBOX_Expository_Page_22.png" class="lightbox_hide_image" alt="Expository Essay" rel="lightbox[7comp][EXAMPLE: 7 Step Outline for an Expository Composition]"></a>
</td>
<td><a href="http://thebookjam.com/images/buttons-tour/Step%202B-Organize%20and%20Focus.jpg" alt="JamBox Graphic Organizers" rel="lightbox[JamGO][EXAMPLES: Graphic Organizers for the various essay types found in the Composition JamBox]"><img src="http://thebookjam.com/images/buttons-tour/7steps-jambox-GOs-thumb.png" alt="Composition Jambox Graphic Organizers"></a>
<a href="http://thebookjam.com/images/buttons-tour/Step%206B-Outline%20Self%20Assessment.jpg" class="lightbox_hide_image" alt="JamBox Graphic Organizers" rel="lightbox[JamGO][EXAMPLES: Graphic Organizers for the various essay types found in the Composition JamBox]"></a>
<a href="http://thebookjam.com/images/buttons-tour/Step%202A-Pinwheel%20Map.jpg" class="lightbox_hide_image" alt="JamBox Graphic Organizers" rel="lightbox[JamGO][EXAMPLES: Graphic Organizers for the various essay types found in the Composition JamBox]"></a>
<a href="http://thebookjam.com/images/buttons-tour/Step%202B-%20Pro%20Con%20Chart.jpg" class="lightbox_hide_image" alt="JamBox Graphic Organizers" rel="lightbox[JamGO][EXAMPLES: Graphic Organizers for the various essay types found in the Composition JamBox]"></a>
</td>
</tr>
</tbody>
</table>

--
Jennah

I have experienced the same issue and it appears to be related to fckeditor stripping the extra code. If I enter the data into the text only window, it works. It only fails when I go into the fckeditor html popup window.

Thanks, Stephen

A little confused what you mean by "fckeditor html popup window"...popup? Mine isn't a popup, but it does default to the visual editor and not source, if that's what you mean...? Anyway...I disabled FCKeditor and that seemed to do the trick. I'd like to be able to enable it again though, as it's good for quick visual edits. Should I submit this is a big to FCK, I guess?

I've also noticed that even though the subsequent slides/images are set to be invisible (and they are), it seems that it's inserting blank lines for each line of code. So under my thumbnail, if I have 25 slides in that lightbox/show, there are 25 blank lines inserted before whatever comes next. I still have that problem after using FCK editor. I seem to be able to work around it using a span. I set the entire bit of hidden lightbox junk as z-index:1 and everything else after it on the page as z-index:2. I picked a horizontal position, but no vertical one and it seems to have figured out to place it where it needs to go (at least on FF, have to test on other browsers). This is sort of a clunky workaround, though...any other ideas out there?

--
Jennah

q=admin/settings/fckeditor/edit/admin

Editor Appearance

Default state:
Default editor state. If disabled, rich text editor may still be enabled using toggle or popup window.
Show disable/enable rich text editor toggle:
Whether or not to show the disable/enable rich text editor toggle below the textarea. Works only if FCKeditor is not running in a popup window (see below).
Use FCKeditor in a popup window:
If this option is enabled a link to a popup window will be used instead of a textarea replace.

This is what I was referring to, but I do not think it is related to the Popup itself, but rather Fck pre-processing the html and stripping it out and or rewriting it.

Thanks, Stephen

Hi,

I can't get my slidesow to work... I use CKeditor, but I excluded the field in which I put my code, so it's the plain text editor.

<a class="vignettes" href="link" rel="lightbox[test]" title="DESCRIPTION"><img alt="alt" title="title" src="thumbnail" /></a>
<a class="vignettes" href="link" rel="lightbox[test][caption 2]" title="DESCRIPTION"><img alt="alt" title="title" src="thumbnail" /></a>
<a class="vignettes" href="link" rel="lightbox[test][caption 3]" title="DESCRIPTION"><img alt="alt" title="title" src="thumbnail" /></a>

When I click on a thumbnail, the lightbow opens, but no slideshow buttons on it... and when I click on the image of the "slideshow", the lightbox disappears instantly.

I must precise I use it in a Dynamic display block

Could that be the source of the problem ? Or is anything else wrong ?

Interesting resources for developers? Have a look at appsta!

Go to the edit FCK page (admin/settings/fckeditor/edit) security settings and double check that FCK is allowing the Lightbox tags. If they aren't checked off, FCK will delete them.

Can Lightbox create a slideshow in which user does not have to click on any link?
I am new to lightbox. I have created a slideshow, but it shows as n number of hyperlinks and the slideshow starts in a modal window. Is there a way to automatically start it in the front page (not a pop up modal window)? I am sure there is ... can't think of how.
any help appreciated.

pj

RE hidden images showing up as blank lines...

I'm an idiot. For some reason I put in a <br /> after each line. After removing that, no more spaces!

--
Jennah

Switch off your editor for such pages/nodes, by adding them to "Paths to exclude/include" in admin/settings/fckeditor/editg.

A visual editor will mess up your lightshow

I have the CKEditor Module installed, and haven't tested this on other WYSIWYG editors.

If you change the input format to PHP Code, then you can move the code for all but the first image to a separate HTML file and include that HTML file. For example (cleaned up a little for presentation):

<a class="lightbox_processed"
     href="sites/default/files/images/house/house1.jpg"
     rel="lightshow[house][Caption1]"
>
<img alt="Mountaintop Removal stops here!"
        src="sites/default/files/images/house/house1.jpg"
        style="padding: 0pt 0pt 10px 10px; width: 400px; float: right; clear: none;"
        title="Mountaintop Removal stops here!"
/>
</a>
<?php include 'sites/all/themes/zen/house_slideshow.html'; ?>

...And here's the include file:

<a href="sites/default/files/images/house/fenceline.jpg" rel="lightshow[house][Caption2]"></a>
<a href="sites/default/files/images/house/front_corner_bright.jpg" rel="lightshow[house][Caption3]"></a>

When you go back to re-edit your page, it the editor should not remove the PHP code and, therefore, not break your slideshow code.

Why not simply add "hidden" block with all other links needed, as:

<div style="display: none">
<a href="..." rel="lightshow[whatever]"></a>
...
<a href="..." rel="lightshow[whatever]"></a>
</div>

at the end of the document? ;-)

This way, you can have also something within the link (text, image...), if your text processor hates "empty" links...

I've been trying to use the same |width:...... code to resize my slideshow, but it just doesn't seem to work. what ends up happening is on laptops my slideshows get reduced to a very small box, without the option of expanding them. ive tried enable the "do not resize" function in lightboxs menu, but still nothing helps.

any ideas on how to force a standard size using lightshow? thanks everyone.
-JB

I tried to use Lightbox for a slideshow. It works, but I have a lot of empty space below the link to the slideshow becouse of the space of the hidden links. I made the code manually:

<a href="/sites/default/files/images/trieste 10/29matt/29matt00001.jpg" rel="lightshow[roadtrip]">immagini 29 mattina</a>
<a href="/sites/default/files/images/trieste 10/29matt/29matt00002.jpg" rel="lightshow[roadtrip][caption 2]"></a>
<a href="/sites/default/files/images/trieste 10/29matt/29matt00003.jpg" rel="lightshow[roadtrip][caption 3]"></a>
<a href="/sites/default/files/images/trieste 10/29matt/29matt00004.jpg" rel="lightshow[roadtrip][caption 4]"></a>
<a href="/sites/default/files/images/trieste 10/29matt/29matt00005.jpg" rel="lightshow[roadtrip][caption 5]"></a>

(and so on...)
You can see my page here: http://www.scienzesocialiweb.it/trieste29mattina
How can I delete this empty space? It's a problem of code?

facc8

Can Lightbox create a slideshow in which user does not have to click on any link?
I am new to lightbox. I have created a slideshow, but it shows as n number of hyperlinks and the slideshow starts in a modal window. Is there a way to automatically start it in the front page (not a pop up modal window)? I am sure there is ... can't think of how.
any help appreciated.

pj

I would look at the Views Slideshow module. That's probably more what you're looking for.

––
Jeremy Stoller
Senior Graphic Artist
California Science Center

hey pj,
Can Lightbox create a slideshow in which user does not have to click on any link?
>> haven't tried it, but what about a nice JavaScript function to execute the click for your users when the DOM is fully loaded? Jquery does it http://api.jquery.com/click/ .....

Hey guys,

I have implemented the Lightshow feature to my site and am having issues with the images opening up in a new tab as well as loading the lightshow...

Below is an example of an anchor with the lightshow attached:

<a rel="lightshow[customclass][]" href="http://image1.jpg" class="lightbox-processed"><img class="customclass" alt="" src="http://image.jpg" style="height: 118px; width: 223px;" typeof="foaf:Image"></a>

Anyone experienced this behaviour before and know how to prevent the extra tab opening up?

cheers,
Craig

Dear:
I add Start slideshow
at the top of page that has image #1...
the I click the link
but ,there is nothing happen?

how to play videos in JW player in lightbox..Can any1 give a solution for this.......