Overview

Eldridge Park

Yes, the world is full of image carousels, but most of them are for the jQuery crowd. I'm not aware of any powered by the fabulous Dojo Toolkit, and I'm not aware of any that boast graceful degrading as a focus. That is what Eldridge Park is all about.

Getting Started

Of course, you'll need to include the proper libraries for this to work:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script src="eldridge_park.js" type="text/javascript"></script> 
<script src="mybase.js" type="text/javascript"></script>

Where mybase.js includes the initialization function. You actually don't need to define any of the _selector arguments, but the defaults are displayed here:

dojo.addOnLoad(
  function(){
    var opts = {
      width: 605,
      height: 300
    }
    var ep = new eldridge_park.carousel("#eldridge_park", opts);
  }
);

Of course, you'll need the appropriate markup. The basic idea is you stick your elements as .ep_items within a .ep_overlay. All of it is wrapped in an #eldridge_park:

<div id="eldridge_park">
  <div class="ep_overlay">
    <div class="ep_item first">
      <div class="caption"><h1>HawaiiInternment.org</h1><h2>Wordpress custom theme, development</h2></div>
      <img src="http://freelancedreams.s3.amazonaws.com/slideshow/homepage/internment.png">
    </div>
    <div class="ep_item">
      <div class="caption"><h1>California Hotel &amp; Casino</h1><h2>Graphic Design: Exhibit Piece</h2></div>
      <img src="http://freelancedreams.s3.amazonaws.com/slideshow/homepage/cali.jpg">
    </div>
  </div>
</div>

Just make sure that your css will hide all the .ep_items but show the first.