Silverlightbox

This project is intended to create a silverlight replacement for Javascript lighbox. The Silverlightbox is backward compatible with traditional lightbox and provide a fallback version for client that doesn't have the plugin installed.

Please keep in touch with me to ask improvements and bug fixes at http://www.silverlightplayground.org

Releases

Current release: 1.0.3942.0

Stay up-to-date with the project following http://twitter.com/aboschin or http://www.silverlightplayground.org

How to use

The current release of Silverlightbox is made of a zip file you have to unzip in the root of the website where you need to add the images slideshow in a folder called "slb".
Once you have installed the runtime you are able to tag hyperlinks to show the silverlightbox and popup images in a silverlight overlay.

<link href="slb/sllightbox.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="slb/silverlight.js"></script>
<script type="text/javascript" src="slb/silverlightbox.js"></script> 

Adding the scripts let you tag hyperlinks to open the Silverlightbox. Here is a sample:

<a href="/images/pics/DSC_6508.jpg" rel="lightbox" title="Image Title">Show image</a>

Using the title attribute you can specify a title to show in the slideshow for each image. Finally you can use the rel attribute to create slideshows (collection of images)

<a href="/images/pics/DSC_6508.jpg" rel="lightbox[dolphins]" title="Image Title 1">Show image</a>
<a href="/images/pics/DSC_6509.jpg" rel="lightbox[dolphins]" title="Image Title 2">Show image</a>
<a href="/images/pics/DSC_6510.jpg" rel="lightbox[dolphins]" title="Image Title 3">Show image</a>
<a href="/images/pics/DSC_6511.jpg" rel="lightbox[dolphins]" title="Image Title 4">Show image</a>

This sample create a collection named "dolphins". You can have multiple collections in the same page using different names for each collections.

Last edited Oct 19, 2010 at 2:32 PM by codeblock, version 16