BlogSlideShow jQuery Plugin Live Demo

Introduction

BlogSlideShow is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

All what you need is to provide links on your images. Likely you already have images on blog pages linked. Just add rel attribute containing "blogslideshow" to them.

When you click on such a link, you'll get the image viewer on the overlay. When hovering the overlay you get toolbar appeared by which you can navigate images. Besides, you can use keyboard arrows <-, ->, Esc as well.

Demo

Select the visual effect you want to apply: fade scroll ladder jalousie (CSS3) rotate (CSS3) zoom (CSS3) [without any effect]

Now click on one of the following links and enjoy the image viwer.

• Frankfurt am Main
• Füssen
• Wiesbaden
• Zakopane
• Würzburg
• Palmen Garten
• Keukenhof

The photos are taken from my personal alboum

How to use it?

To make the image viewer available on your page you just need this package files and those lines in your HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script> <script src="jquery.blogslideshow.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $(document).ready(function(){ $('a[rel=blogslideshow]').bsShow({ effect: 'fade' }); }); }); // --> </script>

My other open source works can be found here