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 customize your gallery use the following options:
<script>
jQuery().ready(function($) {
$(”.vsg-wrap”).VerticalSidebarGallery({
prefix: “vsg”, // css class prefix
showHoverBars: true, // whether to show top-left hover menu
rotateVertical: true, // whether to use the the vertical rotations
rotateHorizontal: true, // whether to use the the horizontal rotations
rotateThumbnails: true, // whether to use the thumbnail rotation
optionsSliderHorizontal: {}, // Flow Slider options for the horizontal slider
optionsSliderVertical: {}, // Flow Slider options for the vertical sliders
optionsSliderThumbnail: {} // Flow Slider options for the thumbnail sliders
});
});
</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.
3-in-1 Slider
Three sliders power this template: horizontal panel slider, vertical thumbnail slider, and horizontal image rotator.
Top Navigation
Slide top panels by clicking top navigation buttons or hovering top-left navigation legend.
Mouse Wheel
Place your cursor over the slider to scroll top panel content using mouse scroll wheel.
Hash Controller
Navigate through galleries with browser’s URL hash. For example, add #3 to the URL of this page and refresh it.
Browser Support
Vertical Image Gallery supports all major browsers, like: Firefox, Internet Explorer, Chrome, Safari, Opera.
CSS3 Transitions
Supports CSS3 transition property. Create a slider with hardware accelerated CSS3 transitions.
Flow Slider
This template is powered by Flow Slider Free jQuery plugin, which is endlesly customizable and ensures flawless sliding.
Customizable Plugin
Customize all the features of the gallery by changing option when using this jQuery plugin.
Download Vertical Sidebar Gallery – jQuery Slider (Sliders)
