Slideshow 2 and Lightbox integration into Rapidweaver

Since i have switched to OS X, i use Rapidweaver to maintain my personal homepage and a website of a small company. Searching for a simple but stylish way to present photos i ran into slideshow2 which is is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Rapidweaver makes it easy for you to build and maintain your website because there are a lot of add-ons available. When your add-on is not available you have to customize your pages yourself by adding code manually. This is not always an easy task when your are not familiar with HTML, CSS or JavaScript. In this tutorial i will explain how to integrate Slideshow2 (r113) and lightbox into Rapidweaver.

Integrating Slideshow2


When i started to find a way to integrate Slideshow2 i ran into a thread which gave me de hint in the right direction. The only problem was that i could not find the 'package' mentioned so i had to find the code somewhere else.

To start with, you have to download Slideshow2 from Google code and to unzip it. The folder 'Slideshow 2!' will contain, besides an 'index.html' and a 'README' three sub-folders; 'css', 'images' and 'js'. Some of those files have to be added to the theme package, so make sure you first make a copy of the the theme by control-clicking the theme you use and select 'Duplicate Theme'.

Then control-click the theme you will modify again and select 'Reveal The Contents in Finder...'. This wil open the folder where the theme is located in Finder. Open the 'css' folder by double-clicking on the folder.
Create a new folder here with the name 'slideshow' by pressing shift-command-n and typing 'slideshow'. De-selecting the folder will commit the creation of the folder.
Now copy the 'css' and 'js' folder from the 'Slideshow 2!' folder to the folder 'slideshow' you just created by alt-dragging the folders. You are now finished making modifications to the theme and can close the finder window by pressing command-w.


Open the webpage in RapidWeaver whereon you want to add the slideshow and reveal the Page Inspector. Select the 'Header' section and the 'Header' button to add a Custom Header to your webpage. Cut-and-paste the sample code below into the Custom Header field.

<!-- slideshow 2! stylesheets and scripts -->
<link rel="stylesheet" type="text/css" media="screen" href="%pathto(css/slideshow/css/slideshow.css)%" />
<script type="text/javascript" src="%pathto(css/slideshow/js/mootools.js)%" />
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.js)%" />
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.flash.js)%" />
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.fold.js)%" />
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.kenburns.js)%" />
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.push.js)%" />
<!-- slideshow 2! stylesheets and scripts -->

Add the images you want to show by selecting the 'Assets' field and the 'Add Files..." button. The files listed in the 'Page Assets' field will now be automatically uploaded when you publish your page. In this example i will further used the files '1.jpg' ... '4.jpg' but it any valid filename can be used.

Now you have to add some code, listed below, to your page to show the slideshow. Make sure that when you are using a 'Styled Text(+)', ' Blocks' or any other non 'HTML Code' page you ignore and clear formatting of the code. You can do this by, after you pasted the code, select the code and select command-. and alt-command-. Alternatively you can select the code and choose 'Ignore Formatting' and 'Clear Formatting' under 'Format' in the menu-bar.

<script type="text/javascript">
  //<![CDATA[
  window.addEvent('domready', function(){
    var data = {
    '1.jpg': { caption: 'Image 1.' },
    '2.jpg': { caption: 'Image 2.' },
    '3.jpg': { caption: 'Image 3.' },
    '4.jpg': { caption: 'Image 4.' } };

    var myShow = new Slideshow('slideshow2', data,
      { delay: 2500, width: 400, height: 267, loader: true, controller: true,  hu: '../assets/'});
  }); 
  //]]>
</script>

<div id="slideshow2" class="slideshow">
  <img src="../assets/1.jpg" width="400" height="267" alt="Image 1." />
</div> 

The path to the directory where to images of the slideshow reside, should be set to 'assets/'. There is only one exception, this is when your webpage is your homepage. i.e. when the filename of your page is 'index.html' or 'index.php'. If the page whereon you present the slideshow is your homepage, then change the path to '../assets/'. This path is set on two locations in the code, so do not forget to change both. When you followed the instruction correctly, the slideshow will look like the slideshow below. If you want to add other images than '1.jpg' through '4.jpg' do change the data in the variable 'data'. Do not forget to set the name and caption of the first image into the 'src' and 'alt' attributes of the img element.

Image 1.
Slideshow 2! has numerous configuration options and layouts. Some links below can help you getting started.

Official development website http://code.google.com/p/slideshow
Demos and examples http://www.electricprism.com/aeron/slideshow/
FAQ http://code.google.com/p/slideshow/wiki/FAQ
Manual http://code.google.com/p/slideshow/wiki/Slideshow
Google Group http://groups.google.com/group/mootools-slideshow


Integrating Lightbox


Once i succeeded in integrating Slideshow 2 into RapidWeaver i also wanted to integrate Lightbox. With Lightbox i could offer the viewer a friendly way to view an enlarged version of a selected photo. On electricprism.com i found a working example of Lightbox in Slideshow 2 and found after quite a number of attempts the solution. Main problem was that there are quite some Lightbox variants which not all work fine in combination with Slideshow 2. The working Lightbox code, came from Lokesh Dhakar. I will explain here how to integrate Lightbox JS into RapidWeaver.

First download the Lightbox JS code from huddletogether.com, do not download Lightbox JS 2.0 code but scroll down the page to the Download section. Download the files 'lightbox.js', 'lightbox.css', 'overlay.png', 'loading.gif' and 'close.gif' separately to a temporary folder. Control-click the theme you previously modified in RapidWeaver for 'Slideshow 2' and select 'Reveal The Contents in Finder...'. This wil open the folder where the theme is located in Finder.
Open the 'css' folder by double-clicking on the folder. Create a new folder here with the name 'lightbox' by pressing shift-command-n and typing 'lightbox'. De-selecting the folder will commit the creation of the folder. Now create in the same way as you did for the 'lightbox' folder the 'css' and 'js' folders in the 'lightbox' folder. Copy the 'lightbox.js' to the 'lightbox/js' folder and the other downloaded files to 'lightbox/css' alt-dragging the files to the folders. You are now finished making modifications to the theme and can close the finder window by pressing command-w.

Open the webpage in RapidWeaver whereon you added the slideshow and reveal the Page Inspector. Select the 'Header' section and the 'Header' button to add a Custom Header to your webpage. Replace the code you added previously for the 'Slideshow 2' by pasting the sample code below into the Custom Header field .

<!-- slideshow 2! stylesheets and scripts -->
<link rel="stylesheet" type="text/css" media="screen" href="%pathto(css/slideshow/css/slideshow.css)%" />
<link rel="stylesheet" type="text/css" media="screen" href="%pathto(css/lightbox/css/lightbox.css)%"  />
<script type="text/javascript" src="%pathto(css/slideshow/js/mootools.js)%" ></script>
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.js)%" ></script>
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.flash.js)%" ></script>
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.fold.js)%" ></script>
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.kenburns.js)%" ></script>
<script type="text/javascript" src="%pathto(css/slideshow/js/slideshow.push.js)%" ></script>
<script type="text/javascript" src="%pathto(css/lightbox/js/lightbox.js)%" ></script>
<!-- slideshow 2! stylesheets and scripts -->


If you have not already added the images as described in 'Slideshow 2' , add them now by selecting the 'Assets' field and the 'Add Files..." button. The files listed in the 'Page Assets' field will now be automatically uploaded when you publish your page.

Now you have to replace the code which you added for
the slideshow. It is basically the same code with some modifications. First the 'loadingImage' and 'closeButton' variables have been added. These two variables will point to the default images in the lightbox used for the close button and the image loading indicator. The 'linked: true' parameter is added to the parameters of slideshow to auto-link all slides to the full-size image. Another modification is the addition of the 'close' and 'open' callbacks to pause the show while the modal window is visible. The last modification is the addition of the '<  rel="lightbox" ...>' anchor.

<script type="text/javascript">
  //<![CDATA[
  var loadingImage = '%pathto(css/lightbox/css/loading.gif)%';
  var closeButton = '%pathto(css/lightbox/css/close.gif)%';

  window.addEvent('domready', function(){
    var data = {
    '1.jpg': { caption: 'Image 1.' },
    '2.jpg': { caption: 'Image 2.' },
    '3.jpg': { caption: 'Image 3.' },
    '4.jpg': { caption: 'Image 4.' } };

    var myShow = new Slideshow('slideshow2', data,
      { delay: 2500, width: 400, height: 267, loader: true, controller: true,  linked: true, hu: '../assets/'});
    var box = new Lightbox({
      'onClose': function(){ this.pause(false); }.bind(myShow2),
      'onOpen': function(){ this.pause(true); }.bind(myShow2) });
  }); 
  //]]>
</script>

<div id="slideshow2" class="slideshow">
  <a rel="lightbox" href="../assets/1.jpg"></a>
  <img src="../assets/1.jpg" width="400" height="267" alt="Image 1." />
</div> 


After adding the code you should be able to view an image in a Lightbox by selecting the image as shown in the example below or in my portfolio

Image 1.


blog comments powered by Disqus