ALS - Content Scrolling Plugin

ALS - Content Scrolling Plugin
File Size: 299 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

ALS (Any List Scroller) is a jQuery plugin that can be used to scroll any elements on the page (text,image,list...). By using thi plugin, these elements can be scrolled either horizontally or vertically.

How to use:

1. Files to include in the <head> section:

<!-- basic ALS css -->
<link rel="stylesheet" type="text/css" media="screen" href="path/css/als_style.css" />

<!-- your jQuery version -->
<script type="text/javascript" src="path/js/jquery-1.7.2.min.js" ></script>

<!-- your ALS version -->
<script type="text/javascript" src="path/js/jquery.als-1.0.min.js" ></script>

2. Add CSS

 * generic styling for ALS elements: outer container

.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;

 * viewport styling

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;

 * wrapper styling

.als-wrapper {
	position: relative;
	/* if you are using a list with <ul> <li> */
	list-style: none;

 * item: single list element

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;

 * prev, next: buttons styling
.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;

3. Add HTML

<!-- define a container with class "als-container": this will be the object binded to ALS; we suggest to give it an ID
to retrieve it easily during ALS inizialization -->

<div class="als-container" id="my-als-list">

<!-- if you choose manual scrolling (which is set by default), insert <span> with class "als-prev"  and "als-next": 
they define the buttons "previous" and "next"; within the <span> you can use images or simple text -->	
  <span class="als-prev"><img src="images/prev.png" alt="prev" title="previous" /></span>

<!-- define a container with class "als-viewport": this will be the viewport for the list visible elements -->

  <div class="als-viewport">
<!-- define a container with class "als-wrapper": this will be the wrapper for the list elements, 
it can be a classic <ul> element or even a <div> element -->

    <ul class="als-wrapper">

<!-- define the list elements, each must have class "als-item"; they can be classic <li> elements 
or generic <div> elements and they can contain anything: text, images, ... -->

      <li class="als-item">orange</li> <!-- text only -->
      <li class="als-item"><img src="images/fruits/apple.png" alt="apple" title="apple" /></li> <!-- image -->
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li> <!-- image + text -->

    </ul> <!-- als-wrapper end -->
  </div> <!-- als-viewport end -->
  <span class="als-next"><img src="images/next.png" alt="next" title="next" /></span> <!-- "next" button -->
</div> <!-- als-container end -->

4. Basic inizialization

<script type="text/javascript">

5. Options

// visible-items (number)

	visible_items: 4

// scrolling-items (number)

	scrolling_items: 2

// orientation (string)

	orientation: "vertical"

// circular (string)

	circular: "yes"

// autoscroll (stringa)

	autoscroll: "yes"

// interval (number)

	interval: 4000

// direction (string)

	direction: "down"

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.