Shadowbox

How can I add Shadowbox to my WordPress 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.

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

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
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

Comments are closed.