Simple Lightbox Integration

[dave_finlayson]

Since it was asked about recently I have quickly knocked together this to show one way you can intergrate Lightbox into Actinic. There are a few ways to do it but I found this the easiest, feel free to add tips etc if you have any!

1. Download Lightbox and extract the contents
2. Copy all the files (excluding index.html) into your site directory, making sure you do not copy the folder structure, just the physical files. By the end you should have copied a number of images, a css file and 4 js files directly into your site folder
3. Open lightbox.js in a text editor. You will find image references in there that currently point to "images/close.gif' etc. Go through the file and remove every instance of "images/" you find, leaving just the reference to the actual image file in place. Then open lightbox.css and remove all references to '../images/' within the file.
4. Open Actinic and navigate yourself to your head section then add this code

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>

below

<script language="JavaScript" src="actiniccore.js" type="text/javascript"></script>
<script language="JavaScript" src="actinicextras.js" type="text/javascript"></script>

5. Then add

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

after

   <link href="actinic.css" rel="stylesheet" type="text/css" />

5. Add all the lightbox files to Design | Additional Files, they should be as follows (unchecked):-

lightbox.css
blank.gif
close.gif
closelabel.gif
loading.gif
next.gif
nextlabel.gif
prev.gif
prevlabel.gif
effects.js
lightbox.js
prototype.js
scriptaculous.js

That's the code ready to be used, now all you need to do is intergrate it into the Actinic layouts. For this, we set up a block that looks for the text 'Lightbox' within the extended information text box, if it is found it uses the lightbox code if not it uses the standard pop up box. This allows you to control whether a pop up box or lightbox is used depending on what text is entered into this box.

Integrating into the Product layouts:-

1. Go to Design | Library | Layouts
2. Open the layout called Standard Product Image
3. Replace everything in this layout with the code below

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22%20AND%20%3cactinic%3avariable%20name%3d%22ExtendedInfoText%22%20%2f%3e%20%21%3d%20%27Lightbox%27" >
      <a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
   </actinic:block>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInfoText%22%20%2f%3e%20%3d%3d%20%27Lightbox%27">
    <a title="<actinic:variable name="ProductName" />" rel="lightbox" href="<actinic:variable name="ExtendedInfoImage" />">
   </actinic:block>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
      <a href="<actinic:variable name="ExtendedInfoPageName" />">
   </actinic:block>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
   <img src="<actinic:variable name="ProductImageFileName" />"
      border="0"
      width="<actinic:variable name="ProductImageWidth" />"
      height="<actinic:variable name="ProductImageHeight" />"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
   <img src="<actinic:variable name="DefaultProductImage" />"
      border="0"
      alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
   </a>
</actinic:block>

The code will display the product name within Lightbox, you can change this to something else if you want though.

That should be you. To implement create your extended info pages as normal, making sure you include the image you want to display, and if you want to use Lightbox, simply type 'Lightbox' into the Extended Information text box. If you intend to use Lightbox exclusively and have no plans for pop up boxes you can simplify it by just overwriting the standard pop up code

<a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">

with

<a title="<actinic:variable name="ProductName" />" rel="lightbox" href="<actinic:variable name="ExtendedInfoImage" />">

This will mean that you won't need to type 'Lightbox' into the extended info box to make it work, but it does mean pop ups wont work anymore so be careful!

There are numerous other ways to do this, this is just how I chose to so please have a play around and see if you can come up with something better. If you want to view this offline you will need to copy all images, css and js files to the PreviewHTML directory

Also, take a snapshot before you try anything and note that i typed this up quite quickly, if you find any mistakes give me a shout and I will update the code!

Want to display multiple product images? See Norman's suggestion below (post 6)

[los_design]

Great stuff Dave, nicework and added to my snippets

Many thanks
Daren

[Duncan Rounding]

Thanks for sharing. One for the AUG I reckon.

[NormanRouxel]

A few observations.

You need to edit lightbox.css and remove all ../images/from the definitions.

You need to make an extra copy of all the images, effects.js and scriptaculous.js into PreviewHTML.

[dave_finlayson]

Norman,

Yep as ever correct, I forgot to include the css change, I will amend the above code. And as you say, if you want to view offline you will need to copy all of them to PreviewHTML. Thanks for that!

I'm also sure there is a better way to selectively control the display of the code instead of using a block to check for 'Lightbox'. If anyone has any ideas then please do post them.

[NormanRouxel]

An alternative for multiple images would be to create Product level variables of type Filename (check Allow blank) called Lightbox-1 through Lightbox-4 and then add this code to your Product Layout.

		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d1%22%20%2f%3e%20%21%3d%20%22%22">
		<a href="<actinic:variable name="Lightbox-1" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 1</a>
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d2%22%20%2f%3e%20%21%3d%20%22%22" >
		<a href="<actinic:variable name="Lightbox-2" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 2</a>
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d3%22%20%2f%3e%20%21%3d%20%22%22">
		<a href="<actinic:variable name="Lightbox-3" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 3</a>
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d4%22%20%2f%3e%20%21%3d%20%22%22">
		<a href="<actinic:variable name="Lightbox-4" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 4</a>
		</actinic:block>

[dave_finlayson]

Nice one Norman, I'll add a note above about that!

[NormanRouxel]

Another important bit (or you'll overwrite your home page).

When unzipping Lightbox into your Site folder make sure you rename index.html to something like LightBoxInfo.html otherwise Actinic will upload it and clobber your home page.

[NormanRouxel]

I could make a variation on my Multi Product Images to use Lightbox. See http://www.drillpine.biz/v8lightbox/acatalog/Books.html for a demo. Here the small icons are automagically created from the big images and are only 1Kb in size.

[dave_finlayson]

Looks great Norman, be a great addition to many sites, especially ones selling prints etc!

[mattc]

Lightbox 2?

I've tried this twice now, and both times, the closest i've managed is to get the image to open in the same window.

Could it be because im using lightbox 2 instead of 1?

[NormanRouxel]

I use Ligthbox2 on my Lightbox add-on. See http://www.drillpine.biz/v8lightbox/acatalog/Books.html for a demo. This is a considerable extension of this thread in that it automatically generates scaled down icons and has is easy to add to Actinic and use.

[DarrenSpink]

Just wanted to add an important note about the post here, the files you need to copy across must also include 'builder.js'.

Also the full line is:

<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>

not

<script type="text/javascript" src="scriptaculous.js?load=effects"></script>


I used this for standard links (not extended info)

Also to stop Actinic complaining about errors I uploaded the scripts manually to a separate folder ie 'js'

so the line would then be:

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

[NormanRouxel]

Darren, are you sure that builder.js is needed? If you look at my example site http://www.drillpine.biz/v8lightbox/acatalog/Books.html it works just fine without it.

[jont]

are you sure that builder.js is needed?

Isn't that from an older version of the script? I think the newer versions have removed that .js (or included it into another)