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.
No comments:
Post a Comment