jMyCarousel

Steps

• Install JQuery
• Download jMyCarousel-01.zip
• Decompress zipped files
• Put jMyCarousel.css, jMyCarousel.js on your web server and link them to your web page:

  <link href="jMyCarousel.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" 
       src="http://code.jquery.com/jquery-1.5.2.js"></script>
  <script type="text/javascript" src="jMyCarousel.js"></script>		
  

• Read the README.txt file
• Insert the JMyCarousel class div:

  <div class="jMyCarousel">
    <ul>
       <li><img src="images/1.jpg" width="200" height="200"></li>
       <li><img src="images/2.jpg" width="200" height="200"></li>
       <li><img src="images/3.jpg" width="200" height="200"></li>
       <li><img src="images/4.jpg" width="200" height="200"></li>
       <li><img src="images/5.jpg" width="200" height="200"></li>
       <li><img src="images/6.jpg" width="200" height="200"></li>
    </ul>  </div> 

• And insert this javascript in the header of your html page:

  $(function() { 
      $(".jMyCarousel").jMyCarousel({
          visible: '100%', 		
          eltByElt: true
      }); 
  });

• From there, modify the script at the top to set the parameters

btnPrev	The previous button. Artwork path is in jMyCarousel.css. Can be set outside of the carousel by giving its jquery reference, $('#layerId') for example.
btnNext	next button. Can be set as above
mouseWheel	mouseWheel activation or not. true or false.
auto	whether the carousel start scrolling automatically (manual mode deactivated, no arrows). true or false.
speed	speed of the animation. value in ms.
easing	custom animation effect, 'linear' as default. Param is relative to the jquery framework.
vertical	whether the carousel is displayed horizontally or vertically. true or false.
circular	whether the animation must scroll in a cicular way, without stopping. true or false.
visible	size of the carousel.
start	what position in pixels the carousel will start at. value in pixels.
step	the step size of each animation. value in pixels.
eltByElt	shall the carousel move element by element, or in a linear way ? true or false.
evtStart	event customization : start event. 'mouseover', 'click', etc..
evtStop	event customization : stop event. 'mouseout', 'mouseup', etc...

• The above has an attached onclick event script, like this:

  <li><img src="images/1_preview.jpg" 
           width="200" height="200" 
           onclick="showView(0)"></li>  

• Which calls a script in the head of this document:

  function showView(whichOne) {
      document.getElementById("view").src=image_url[whichOne];
  }

• This script requires that an array be set up with pre-loaded images. Preloads tell the browser to find an image an load it into the machine memory, but without displaying it. The Preload code looks like this:

  preload_image_object = new Image();
  // set image url
  image_url = new Array();
  image_url[0] = "images/1.jpg";
  image_url[1] = "images/2.jpg";
  image_url[2] = "images/3.jpg";
  image_url[3] = "images/4.jpg";
  image_url[4] = "images/5.jpg";
  image_url[5] = "images/6.jpg";
  
  for(i=0; i<=3; i++) {
  	preload_image_object.src = image_url[i];
  }