#horizontal layouts

New Post has been published on http://www.htmluse.com/radiant-scroller-jquery-plugin/

Radiant Scroller jQuery plugin

Download   Demo

Radiant Scroller is a jQuery plugin that allows to create responsive scrollers (carousels) with grid and simple horizontal layouts. RadiantScroller can be cuztomized with the variety of options and some API methods are also available.

Requirements

jQuery 1.7.0+

MouseWheel plugin (only if you want to provide mousewheel support)

Demos

Basic scroller with 3×2 grid with no mousewheel support and no pagination

Scroller with 3×2 grid with mousewheel support and pagination

Scroller with one column and two rows

Basic Radiant Scroller’s API 

1. INCLUDE JS AND CSS FILES

<script src="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery-1.11.1.min.js"></script> <script src="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery.mousewheel.min.js"></script> <script src="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery.radiant_scroller.min.js"></script> <link rel="stylesheet" type="text/css" href="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery.radiant_scroller.css" media="all">

2. HTML

<div id="your_scroller_id"> <div class="scroller-el"><img src="image1.jpg" alt="Image1" /></div> <div class="scroller-el"><img src="image2.jpg" alt="Image2" /></div> <div class="scroller-el"><img src="image3.jpg" alt="Image3" /></div> </div>

The scroller-el class is required.

3. CSS

.radiant_scroller .scroller-el width: 200px; height: 200px; margin-right: 10px; margin-bottom: 10px; /* This is optional but recommended - otherwise your images will have no horizontal spacing */

4. JAVASCRIPT

$(document).ready(function() $('#myScroller').radiantScroller( elementWidth: 200, elementMargin: 10, cols: 3, rows: 3 ); );

5. OPTIONS

  Property Default Description animateDuration 700 Integer Animation duration for the scrolling. The value is specified in milliseconds. addPagination false Boolean Whether the scroller should have pagination (often displayed as small navigational dots) enabled. cols 2 Integer How many (maximum) columns should the scroller have – basically this means how many elements will be visible at once horizontally (but if the scroller’s width changes this value will also change). easingType “swing” String Easing type for the scrolling. You can specify any other type of easing but bear in mind that jQuery has only swing and linear easings included. You will have to include jQueryUI’s effects and easings plugin to get more. elementMargin 10 Integer Horizontal (left/right) margin for the scroller’s elements. This value should correspond to the value that is provided in the styles. elementWidth 200 Integer Width for the scroller’s elements. This value should correspond to the value that is provided in the styles. nextButtonText “” String Text to be shown on the “next” button. prevButtonText “” String Text to be shown on the “previous” button. rows 2 Integer How many rows should the scroller have. useMouseWheel false Boolean Whether support for the mousewheel scrolling should be enabled. Please note that when this value is set to true, you should hook up MouseWheel plugin.

6. API

To get access to the RadiantScroller’s API you should initialize your scroller like this:

var my_scroller = $('#myScroller').radiantScroller(...);

And then you can manage your scroller by calling radiantScroller on the my_scroller variable and passing it an API action to invoke. Currently there are a few API methods available:

radiantScroller(‘next’) - scroll one page forward.

radiantScroller(‘prev’) - scroll one page backward.

radiantScroller(< number >) - scroll to a page with the specified number. Page numeration starts from 1. If a non-existent page is provided nothing happens.