creating a Lightbox button

Adds a Lightbox slideshow to your products.
Post Reply
RJW
Posts: 2
Joined: Mon Oct 13, 2008 9:25 pm

creating a Lightbox button

Post by RJW »

Hi Norman

First of all - great add-on - wish I had used it earlier! Probably the best isntructions I have ever read, for anything, really easy to implement even with a heavily customised site. :D

Now then, quick question - is there a way to launch the lightbox via a single graphic/button and hide the thumbnails? May sound odd but for some of our products we have lots of different shaped images and to keep it clean I would prefer a single button (such as 'Gallery) to launch the show.

Cheers
Rob
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: creating a Lightbox button

Post by norman »

You can do this by removing a lot of code from the Lightbox Image List layout. Here are the steps:

1) Go to Design / Library / Layouts / Lightbox Images.

2) Right-click Lightbox Image List and choose Copy.

3) Rename that copy to be Single Link Lightbox Image List.

4) Double click Single Link Lightbox Image List to edit it.

5) Replace all contents with the following:

Code: Select all

<actinic:block php="true">
// - internal code - leave at top of layout - V1.09
// patched to remove icons and use single link instead

include_once 'dpimagesupport.php';

$LightBoxImages = array('<actinic:variable name="LightboxImage1" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage2" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage3" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage4" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage5" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage6" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage7" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage8" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage9" encoding="perl" selectable="false" />',
			'<actinic:variable name="LightboxImage10" encoding="perl" selectable="false" />');
$LightBoxImageCount = count($LightBoxImages);
$havelightboximage = false;
for ( $i=0; $i < $LightBoxImageCount; $i++ )
	{
	if ( $LightBoxImages[$i] != '' )
		{
		$LightBoxImages[$i] = str_replace('\\', '/', $LightBoxImages[$i]);	// fix troublesome backslashes
		$havelightboximage = true;
		}
	}
if ( $havelightboximage )
	{
	$LightBoxTitles = array('<actinic:variable name="LightboxTitle1" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle2" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle3" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle4" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle5" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle6" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle7" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle8" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle9" encoding="perl" selectable="false" />',
				'<actinic:variable name="LightboxTitle10" encoding="perl" selectable="false" />');
	$ProductName = htmlspecialchars('<actinic:variable name="ProductName" encoding="html" selectable="false" />');
	$ProductAnchor = '<actinic:variable name="EncodedProductAnchor" encoding="perl" selectable="false"/>';
	
	$hadimage = false;	
	for ( $i=0; $i < $LightBoxImageCount; $i++ )
		{
		if ( $LightBoxImages[$i] != '' )
			{
			$ThisLightBoxImage = $LightBoxImages[$i];
			$title = $LightBoxTitles[$i] != '' ? htmlspecialchars($LightBoxTitles[$i]) : $ProductName;
			echo "<a href=\"$ThisLightBoxImage\" rel=\"lightbox[$ProductAnchor]\" title=\"$title\">";
			if ( ! $hadimage )
				{
				echo 'Start slideshow';
				}
			echo "</a>";
			$hadimage = true;
			}
		}
	}
</actinic:block>
6) Now in your layouts, use

Code: Select all

<actinic:variable name="Lightbox" value="Single Link Lightbox Image List" />
to display the Start Slideshow link.

You can change the line

echo 'Start slideshow';

to e.g.

echo '<img src="slideshowimage.jpg" height=23 width=45 />';

to use an image instead of the text link.
Norman
RJW
Posts: 2
Joined: Mon Oct 13, 2008 9:25 pm

Re: creating a Lightbox button

Post by RJW »

Excellent! Thanks Norman, really helpful

Rob
pinkequine
Posts: 1
Joined: Tue Jun 16, 2009 3:23 pm

Re: creating a Lightbox button

Post by pinkequine »

Perfect, excellent solution, just added border="0" to get rid of the link border.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: creating a Lightbox button

Post by norman »

I see a couple of people have used this.

Just a quick note to say that this code should work fine with my Lightbox/Slimbox V3.nn as well.
Norman
Post Reply