BlogSlideShow 3.0a Live Demo - fancy image viewer jQuery plugin

Introduction

BlogSlideShow is a jQuery plugin enhancesing your blog pages with image viewer, which provides fancy transition effects.

BlogSlideShow comprises my library tEffects, which tries to apply CSS3 transitions to achieve the effects. If the browser does not support CSS3, it visualizes the effects using JS. So the plugin is running effects as good as the browser can afford.

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. That contains toolbar by which you can navigate images. Besides, you can use keyboard arrows <-, ->, Esc as well.

Usage and API

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

<link href="./assets/blogslideshow.css" rel="stylesheet" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.blogslideshow.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('a[rel=blogslideshow]').bsShow();
    });
</script>

Well, that works with no effect applied. Let's define the effect we want:

 $('a[rel=blogslideshow]').bsShow({
    effect: 'Jalousie',
    direction: 'horizontal'
});
</script>