Vertical Sidebar Gallery - jQuery Slider

Vertical Sidebar Gallery - jQuery Slider

Vertical Sidebar Gallery is a jQuery plugin and theme templates that create a stunning vertical image slider with three rotation degrees. Vertical Sidebar Gallery is a perfect companion for your website’s sidebar. You can use it as an image gallery or featured post scroller. Put unlimited amount of content in limited space! You just need to generate the HTML of your content and the gallery will do the rest. It is trendy, intuitive, and will enhance any website’s user experience.

How to use the plugin? Basically you can start with the basic.html file.
1. Copy the HTML from basic.html file (the code between … tags).
2. Include stylesheet to style the gallery:
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
3. Include the necessare JavaScript files:
<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/jquery-mousewheel-3.0.6/jquery.mousewheel.min.js”></script>
<script src=”js/flowslider.jquery.js”></script>
<script src=”js/vsg.flowslider.jquery.js”></script>
4. Start using the gallery by calling jQuery plugin:
<script>
jQuery().ready(function($) {
$(”.vsg-wrap”).VerticalSidebarGallery();
});
</script>

To better understand the Flow Slider’s option you are encouraged to visit its website. For example, to make horizontal slider to change its position without an animation, but instantly, just set optionsSliderHorizontal: {animation: “None”}

Customize Your Gallery
Vertical Image gallery comes with five design themes installed. Just create an element over the slider with one of the skin classes: .vsg-threadless, .vsg-closeup, .vsg-grass, or .vsg-combo. But hey, if you don’t find your design it is still easy to create your own look. Just modify the colors in one of the CSS skin files.

Change the Size of Your Slider
You can stretch Vertical Sidebar Gallery to any width you wish. Five width options are installed for you: .vsg-180, .vsg-200, .vsg-250, .vsg-300. Or create your own size by customizing one of the size CSS files.

Multi Thumbnails
Add more than one image to a thumbnail and an infinite image rotator will be created to scroll through those images.