Few hours ago I released a new project on Codeplex called Silverlightbox. The purpose of this project is to create a replacement for the javascript lightbox, used widely in many websites to display images and slideshows. The project works adding a silverlight overlay to the page that is showed when an hyperlink to an image is hit.
The Silverlightbox I released is compatible with the javascript lightbox. You can easily change the scripts of lightbox with my scripts and it works seamless without any change to the HTML already tagged for the lightbox. To have a look at how it appear try to click one of these images
Also if I'm a strong fan of Silverlight I provided the Silverlightbox with a minimal fallback javascript version that take place when the client does not have the plugin installed.
How to use Silverlightbox
To add the Silverlightbox to your website you have to link few script in the page. They are a cascading style sheet, the main silverlightbox.js script and the silverlight.js. You have also to link jQuery from the microsoft CDN. jQuery is used for the fallback javascript and for the part that query the page to find links to attach. Here is the code you have to add to the page <HEAD>
<link href="slb/sllightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="slb/silverlight.js"></script>
<script type="text/javascript" src="slb/silverlightbox.js"></script>
Once you have added the script to the page you can easily tag you hyperlink to show the silverlightbox. For this purpose you have to use the rel attribute and optionally specify a title attribute that is used to give a title to the displayed image. The code below show how to link an image to the Silverlightbox
<a href="http://blog.boschin.it/images/pics/DSC_6508.jpg" rel="lightbox" title="Dolphins 1">Show image</a>
Using a special syntax it is possible to create collection of images displayed ad slideshows. A slideshow have the navigation controls and let the user to move alogn the images without closinge the Silverlightbox. Here is how to create a slideshow
<a href="http://blog.boschin.it/images/pics/DSC_6511.jpg" rel="lightbox[dolphins]" title="Dolphins 2">Show image 1</a>
<a href="http://blog.boschin.it/images/pics/DSC_6516.jpg" rel="lightbox[dolphins]" title="Dolphins 3">Show image 2</a>
<a href="http://blog.boschin.it/images/pics/DSC_6519.jpg" rel="lightbox[dolphins]" title="Dolphins 4">Show image 3</a>
<a href="http://blog.boschin.it/images/pics/DSC_6522.jpg" rel="lightbox[dolphins]" title="Dolphins 5">Show image 4</a>
The code create a collection called "dolphins". You can have mltiple collections in a page using different names to group images each other.
Futures
I would want to continue the development of the Silverlightbox that now comes in the minimal release that cover the same features of the javascript counterpart. My intent is to add some interesting features:
1) autoplay of slideshows
2) support for video
3) customizable easing in and out
4) themes
Please let me know if there are other features you like and if you find any issue with the Silverlightbox. For this purpose please use the issue tracker on codeplex.
Link: http://silverlightbox.codeplex.com/