BlogSlideShow

jQuery image viewer 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 achive 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.

Demo

Select the visual effect you want to apply:

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

The photos are taken from my personal alboum

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>