article:
UI: UI Progress Bars
article:
Elements Design: PSD login form with twitter and facebook buttons

JS Plugin: Any List Scroller

Advertisement

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



Characteristics

- It is easy to use
- It works on any kind of list
- List elements can be texts, images, anything (read the instructions below)
- 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 put more than one Any List Scroller in a single page (multiple instance)



Screenshot

Plugin: Any List Scroller



Implementation

add plugin
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.alsEN-1.0.min.js"></script>

html code
<div class="als-container" id="demo2">
  <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
  <div class="als-viewport">
    <ul class="als-wrapper">
      <li class="als-item"><img src="images/fruits/arancio.png" alt="orange" title="orange" />orange</li>
      <li class="als-item"><img src="images/fruits/mela.png" alt="apple" title="apple" />apple</li>
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li>
      <li class="als-item"><img src="images/fruits/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
      <li class="als-item"><img src="images/fruits/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
      <li class="als-item"><img src="images/fruits/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
      <li class="als-item"><img src="images/fruits/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
      <li class="als-item"><img src="images/fruits/avocado.png" alt="avocado" title="avocado" />avocado</li>
      <li class="als-item"><img src="images/fruits/pera.png" alt="pear" title="pear" />pear</li>
      <li class="als-item"><img src="images/fruits/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
      <li class="als-item"><img src="images/fruits/papaya.png" alt="papaya" title="papaya" />papaya</li>
      <li class="als-item"><img src="images/fruits/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
    </ul>
  </div>
  <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

javascript code
$("#demo2").als({
    visible_items: 4,
    scrolling_items: 1,
    orientation: "horizontal",
    circular: "yes",
    autoscroll: "no"
});

add css stylesheets

Plugin: Any List Scroller

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

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

.als-wrapper {
    position: relative;
    list-style: none;
}

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

.als-prev, .als-next {
    position: absolute;
    cursor: pointer;
    clear: both;
}



demo
source
download

Advertisement
Tags: plugin, list, scroller, jquery, css, html, js, layout, easy, circular, miniscroller, autoscroll, interface, web, website

Leave a Comment

No Comment

© Creative3x Ltd.