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">
	$(document).ready(function(){
		$("#my-als-list").als();
	});	
</script>

5. Options

// visible-items (number)

$("#my-als-list").als({
	visible_items: 4
});

// scrolling-items (number)

$("#my-als-list").als({
	scrolling_items: 2
});

// orientation (string)

$("#my-als-list").als({
	orientation: "vertical"
});

// circular (string)

$("#my-als-list").als({
	circular: "yes"
});

// autoscroll (stringa)

$("#my-als-list").als({
	autoscroll: "yes"
});

// interval (number)

$("#my-als-list").als({
	interval: 4000
});

// direction (string)

$("#my-als-list").als({
	direction: "down"
});

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