Submit your widget

BlogSlideShow image viewer with fancy transition effects (jQuery&CSS3;)

Created 8 years ago   Views 13681   downloads 2074    Author sheiko
BlogSlideShow image viewer with fancy transition effects (jQuery&CSS3;)
View DemoDownload 242.8 KB
137
Share |

BlogSlideShow is a free JQuery plugin that enhances your blog pages with , 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 arrows <-, ->, Esc as well.

 

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>