Submit your widget
HomeLightbox & Dialog & OverlayBlogSlideShow image viewer with fancy transition effects (jQuery&CSS3;)

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

Created 14 years ago   Views 9244   downloads 1550    Author sheiko
BlogSlideShow image viewer with fancy transition effects (jQuery&CSS3;)
View DemoDownload
101
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>

You might also like