iWeb FAQ - Shadowbox

iWebFAQ.org

 

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

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

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:





Website from link:


ShadowboxWebsiteGoHere



HTML Code:


Click here




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 (If you don't know what the root is or how this is done read it here)

3. On the pages where you want to add the Shadowbox add a TextBox with a code like ShadowboxGoesHere and publish your site to a folder

4. 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 want 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 the 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


HTML Code:


Either from an image or text. How this is done is described in my iWebFAQ.org E-Book (sample)


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 and keep them somewhere safe since we will need them further on.


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.


5. Go here to download MassReplaceIt (freeware). Once you downloaded it open it.

Read the Alternative HTML FAQ to know how MassReplaceIt works (do it!)

6. In MassReplaceIt under Find enter ShadowboxGoesHere or whatever code you typed where you want the menu to show up

7. In Replace enter the code for the shadowbox you found in step 4 of this tutorial

8. In MassReplaceIt under Files add your website's folder

9. Save the MassReplaceIt Query

10. Click “Replace” and the HTML code will be added to your pages

11. Upload your website to your server using your FTP application

12. Re-run MassReplaceIt every time you (re-)publish



If MassReplaceIt didn’t work. If MassReplaceIt didn’t find any of the TextBoxes to replace with HTML codes. Read the tutorial about using MassReplaceIt I wrote here or this Alternative HTML troubleshoot page




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


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark