RapidWeaver FAQ - Shadowbox







Share/Bookmark


How can I add Shadowbox to my RapidWeaver created website? What can I do with it?


Shadowbox is an enlarge on click effect (zoom) such as Lightbox or
Highslide. It is easy to use and looks fantastic. Here you will find a few examples...

Simple image:



Multiple images opening from one image:



Multiple images opening from an image gallery:



Movie from a thumbnail:




Further examples are also found on the
Shadowbox-js.com website.

Just as Highslide, Shadowbox is free to use for personal websites but it's not free if you use it for
commercial purposes (20$) . And I would really urge you to respect that!


1. Go to
Shadowbox-js.com, check all the boxes you find on the page and hit the zip file at the bottom of the page to download the necessary source files
2. You will get a folder named shadowbox-X.X.X, rename this folder shadowbox and upload it to the root of your website (
What is the root of a server/website?)
3. Now we need to add the shadowbox code to your page. The first part of the code is the same no matter what you want to do with the shadowbox. The first part is:

<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>



The second part of the code differs depending on what you want to do with it. Whether you want to use it for images, movies, whatever first upload the files to your server and find out the URL (If you don't know what the root is or how this is done read it
here).

Simple image opening from a thumbnail:

<a href="myimage.jpg" rel="shadowbox" title="My Image Title"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>



Where it says
myimage.jpg add the URL to your image
Replace
My Image Title with the title you wnat to give to your image
Adapt width and height for the thumbnail

Multiple images opening from one image:

<a href="myimage.jpg" rel="shadowbox[albumname]" title="My Image Title"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>
<a href="myimage2.jpg" rel="shadowbox[albumname]" title="My Image Title 2"></a>
<a href="myimage3.jpg" rel="shadowbox[albumname]" title="My Image Title 3"></a>



Where it says
myimage.jpg add the URL to your image
Replace
My Image Title with the title you want to give to your image
Adapt width and height for the thumbnail
Replace
albumname with the name you want to give to the album or group of images. Of course you can have multiple groups on the same page by giving different group names.

Multiple images opening from an image gallery:

<div style="width:450px; text-alignment:left;">
<a href="myimage.jpg" rel="shadowbox[albumname]" title="My Image Title"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a> <a href="myimage2.jpg" rel="shadowbox[albumname]" title="My Image Title 2"><img src="myimage2.jpg" style="width:200px; height:120px;border:0px;"></a> <a href="myimage3.jpg" rel="shadowbox[albumname]" title="My Image Title 3"><img src="myimage3.jpg" style="width:200px; height:120px;border:0px;"></a>
</div>



Where it says
myimage.jpg add the URL to your image
Replace
My Image Title with the title you want to give to your image
Adapt width and height for the thumbnail
Replace
albumname with the name you want to give to the album or group of images. Of course you can have multiple groups on the same page by giving different group names.
The div was added to give a uniform look to the gallery. Enter the width you want to have thumbnails displaying in and change left to center if you want.

Movie:

<a href="mymovie.extension" rel="shadowbox;height=140;width=120">My Movie</a>



Where it says
mymovie.extension add the URL to your movie
Adapt height and width to fit your movie
Change
My Movie to what you want to display as the link text

Movie from thumbnail:

<a href="mymovie.extension" rel="shadowbox;height=140;width=120"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>



Where it says
mymovie.extension add the URL to your movie
Adapt height and width to fit your movie
Change
My Movie to what you want to display as the link text
Where it says
myimage.jpg add the URL to your image
Adapt width and height for the thumbnail

Website from link:

<a href="mywebsite.html" rel="shadowbox">Link Title</a>



Replace
mywebsite.html with teh URL to the page you want to open in the shadowbox
Change
Link Title to what you want to display as the link text

Website from thumbnail:

<a href="mywebsite.html" rel="shadowbox"><img src="myimage.jpg" style="width:200px; height:120px;border:0px;"></a>



Replace
mywebsite.html with the URL to the page you want to open in the shadowbox
Where it says
myimage.jpg add the URL to your image
Adapt width and height for the thumbnail

Mixed:

Of course you can also have an album with mixed content like images and movies and websites all in one. Just specify the same album name as we've seen earlier.


Take the first part of the code and the second part of the code which fits your needs.

If you want to add multiple shadowboxes to your page you have to add the first part of the code only once on your page. For the other boxes only add the appropriate second part of the code. No need to add the first part multiple times on the same page.

4. Paste the code for the shadowbox you found in step 3 of this tutorial into your post or page where you want the shadowbox to appear. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".


This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share