ALS - Any List Scroller

ALS - Any List Scroller is the jQuery plugin by musings.it to scroll any list, of any dimension, with any content.

• It is surprisingly easy to use
• it works on any kind of list
• List elements can be texts, images, anything
• List items must not have a fixed size, or equal to each other
• The list can be scrolled horizontally or vertically
• Scrolling can be simple or infinite (circular)
• Scrolling can be manual or automatic (autoscroll)
• You can set the number of visible items
• You can set the scrolling step
• You can set the starting item (new from v.1.1)
• You can put more than one ALS in a single page (multiple instance)
• You can set the scrolling speed and "easing" function (new from v.1.3)

Structure

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: als.musings.it

1. INCLUDE CSS AND JS FILES

<!-- 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-last.min.js" ></script>

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

<!-- 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 -->

We have to define the elements illustrated in ALS Structure and give them the classes shown in the figure: als-container,als-viewport, als-wrapper and als-item. The only optional elements are als-prev and als-next and they become necessary only if a manual list scrolling is chosen.

als-wrapper and als-item can be classical list elements <ul> <li> or generic <div> elements.

3. 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;
}

The styling of the generic ALS elements reported below is strongly recommended. Various elements are then stylized at will to suit the position chosen.

If list elements contain images we suggest to add to the styling of als-item values for min-width and min-height.

4. JAVASCRIPT

<!-- in our example the container has id="my-als-list" thus ALS is initialized like this -->
$(document).ready(function(){
	$("#my-als-list").als();
});

5. OPTIONS

visible-items (number)

It is the number of visible elements of the list.

Accepted values: integers. Default value: 3. Configuration example:

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

scrolling-items (number)

It is the scrolling step of the list elements.

Accepted values: integers. Default value: 1. Configuration example:

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

orientation (string)

It definers the list orientation: it can be horizontal or vertical.

Accepted values: "horizontal" and "vertical". Default value: "horizontal". Configuration example:

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

circular (string)

It defines the list scrolling type: it can be simple or infinite (circular).

Accepted values: "yes" and "no". Default value: "no". Configuration example:

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

autoscroll (stringa)

It defines how the scrolling starts: manually or automatically.

Please note: if autoscroll is set to "yes" also circular will be set to "yes".

Accepted values: "yes" and "no". Default value: "no". Configuration example:

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

interval (number)

It is the scrolling interval (in msec) when autoscroll is set to "yes".

Accepted values: integers. Default value: 5000. Configuration example:

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

direction (string)

It defines the scrolling direction when autoscroll is set to "yes".

Accepted values: "left" and "right" (if orientation is "horizontal"), "up" and "down" (if orientation is "vertical").
Default value: "left" ("up"). Configuration example:

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

start_from (number)   [new from v.1.1]

Sets the first visible items in the list.

Accepted values: integers. If the value is greater than the difference between the total number of items and the number of visible items, it is automatically reset to 0.
Default value: 0 (first element). Configuration example:

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

speed (number)   [new from v.1.3]

Sets the scrolling speed (in msec).

Accepted values: integers. Default value: 600. Configuration example:

$("#my-als-list").als({
	speed: 400
});

easing (string)   [new from v.1.3]

Sets the easing function for the scrolling animation.

Accepted values: "swing" and "linear". Default value: "swing". Configuration example:

$("#my-als-list").als({
	easing: "linear"
});