shadowbox

A quick sample page to show uses of Shadowbox for different content types. Initially I had trusted the default of



<script type="text/javascript">

Shadowbox.init();

</script>

alone - which proved to be less reliable than specifying the players individually - so do bear this in mind when start the setup of your shadowbox :)

depending on what kind of player you want to use - you should specify it within the tag above. You can choose to only set the one individual player if that is all you'll need, or add multiple players as required - the complete player list would be set as shown here:


	
<script type="text/javascript">

Shadowbox.init({

    language: 'en',

    players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});

</script>

standard images

info

using images within site folder

how to

set up each thumbnail image as link to the large image, adding the following to the href tag:


				rel="shadowbox[set title]" title="your title"

example for image 1:


<a rel="shadowbox[artisan]" title="artisan visual" href="images/01.jpg">

<img src="images/01_thn.jpg" width="50" height="50" alt="artisan 1" />

</a>

SAMPLE

individual flickr images

info

using individual images, setup one by one

how to

create custom thumbnails (and add to your site's images folder) and link to the image location on flickr: right click the original to 'copy image location'. As before, you will need to refer to the shadowbox in your href:


				rel="shadowbox[set title]" title="your title"

example for image 1:


<a rel="shadowbox[artisan]" title="artisan visual" href="images/01.jpg"> 

<img src="http://farm3.static.flickr.com/2095/3538265237_15b0a3ba1d.jpg?v=0" width="50" height="50" alt="artisan 1" /> 

</a>

SAMPLE

flickr slideshow

info

showing a flickr slideshow

how to

create your link as image or text link and link it to the Flickr slideshow you want to show: on your flickr page, right click the slideshow icon link to 'copy link location' - or get the URL directly from your browser by opening up the chosen slideshow in the browser window.
Again, you will need to refer to the shadowbox in your link - without the need for the square bracket this time as you are only going to show 1 element alone, ie the slideshow.


				rel="shadowbox" title="your title"

example for link below:


<a rel="shadowbox[artisan]" title="artisan visual" href="images/01.jpg"> 

<img src="ttp://www.flickr.com/photos/prisca_eyedea/sets/72157618245147007/show/" width="500" height="50" alt="artisan slideshow" /> 

</a>

SAMPLE

external website

info

display external website

how to

to show an external site using ShadowBox - simply use the URL within your href and that's it ;) of course, you will need to refer tp the shadowbox again:


				rel="shadowbox" title="your title"

example:


<a rel="shadowbox" title="the official ShadowboxJS site" href="http://shadowbox-js.com"> 

ShadowBox - JS 

</a>

SAMPLE

ShadowBox - JS