Lightbox2 - How to create a slideshow

Last modified: September 29, 2008 - 10:26

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>

Slideshow from one Thumbnail

jrb207 - April 30, 2009 - 16:02

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 just

boran - May 9, 2009 - 10:04

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>

thanks boran

Matti303 - June 16, 2009 - 17:42

thanks boran

[URL="http://reanimatepc.com"][B]ReanimatePC.com[/B] - Bring Your PC Back To Life[/URL]

Drupal removing code?

kjennah - October 27, 2009 - 18:41

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

Answer - not a solution

ElegantSolutions - October 28, 2009 - 21:45

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.

If the Solution to the problem be concise and artfully or ingeniously contrived yet simple and handsome in effect, then the solution merits the adjective Elegant. -- K.G. Wilson

FCKeditor

kjennah - October 29, 2009 - 14:02

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

FCK Popup Window

ElegantSolutions - November 6, 2009 - 13:56

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.

If the Solution to the problem be concise and artfully or ingeniously contrived yet simple and handsome in effect, then the solution merits the adjective Elegant. -- K.G. Wilson

hidden images

kjennah - November 16, 2009 - 15:42

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

boran - November 20, 2009 - 08:48

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

 
 

Drupal is a registered trademark of Dries Buytaert.