code.Atomic8Ball.com

Simple Slideshow Usage Instructions

  1. Between the <head> & </head> tags add the following: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.a8b.co/demos/jquery-slideshow/js/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
         $('#slideshow').cycle({
           fx: 'shuffle'
         });
       });
    </script>
  2. In the your page's HTML insert the following where you would like the slideshow to appear then add your own image paths:<div id="slideshow">
      <img src="images/1.jpg" alt="coffee" />
      <img src="images/2.jpg" alt="something" />
      <img src="images/3.jpg" alt="other" />
    </div>

    Notes:

    • You can change the containing div id or class by changing it in the HTML and here
          $('#slideshow').cycle({
      in the jQuery.
    • You can also change the effects by changing
          fx: 'shuffle'
      to any of the following:
      • shuffle
      • zoom
      • fade
      • turnDown
      • curtainX
    • There are a ton of options you can apply to they jQuery to make it do just about anything you would like, to view them all check out http://jquery.malsup.com/cycle/options.html