JQuerySerialScroll < System

---+ %TOPIC%
%JQPLUGINS{"serialscroll"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
This plugin allows you to easily animate any series of elements, by sequentially scrolling them.
It uses JQueryScrollTo to achieve the scrolling animation.
%ENDSECTION{"summary"}%

---++ Examples
%JQREQUIRE{"serialscroll"}%
<div id="screen1">
<div id="slideshow">
<ul>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=1" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=2" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=3" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=4" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=5" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=6" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=7" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=8" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=9" /></li>
  <li><img width="225" height="300" src="http://lorempixel.com/255/300/people?t=10" /></li>
</ul>
</div>
  <div id="buttons">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
  %CLEAR%
  </div>
</div>

<literal>
<script type="text/javascript">
(function($) {
  $(function() {
    $('#slideshow').serialScroll({
      items:'li',
      prev:'#screen1 a.prev',
      next:'#screen1 a.next',
      offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
      start:1, //as we are centering it, start at the 2nd
      duration:1200,
      force:true,
      stop:true,
      lock:false,
      cycle:false, //don't pull back once you reach the end
      easing:'easeOutQuart', //use this easing equation for a funny effect
      jump: true //click on the images to scroll to them
    });
  });
})(jQuery);
</script>

<style type="text/css">
#slideshow{
  overflow:hidden;
  width:680px;
  border:1px solid #eee;
}

#slideshow ul{
  padding:0;
  margin:0;
  list-style:none;
  width:3900px;
  padding-left:225px;
}

#slideshow li{
  padding:0;
  list-style:none;
  float:left;
  margin:0 16px;
  cursor:pointer;
}
.prev{
  float:left;
}
.next{
  float:right;
}
</style>
</literal>

This topic: System > JQueryPlugin > JQuerySerialScroll
Topic revision: revision 1 (raw view)

Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding BACCHUS Wiki? Send feedback