YUI 2.4.0, which was just released today, comes with a minor update to its history library. To celebrate this new release, I thought I would write a short article demonstrating how to use the YUI Browser History Manager to add back button and bookmarking support to a DHTML slide show.

Let’s start with a slightly modified version of Christian Heilmann’s maintainable, unobstrusive DHTML slide show. First, import the YUI Browser History Manager code and its dependencies:

<script type="text/javascript" src=".../2.4.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src=".../2.4.0/build/history/history-min.js"></script>

Then, add the necessary static markup to the page:

<iframe id="yui-history-iframe" src="img/aston-martin.jpg"></iframe>
<input id="yui-history-field" type="hidden">

Note that the asset loaded in the IFrame does not have to be an HTML document (here, we load the first visible image in the slide show) This trick is useful to avoid an additional server round-trip, which would degrade the performance of your site.

Don’t forget to hide the IFrame by adding the following style declaration:

#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px;
  visibility:hidden;
}

Our application is composed of only one module, the slide show, which we will refer to using the identifier “slideshow”. The state of the “slideshow” module will encode the 0-based index of the currently visible slide. The next step is to figure out the initial state of our slide show module:

initialState = YAHOO.util.History.getBookmarkedState("slideshow") || "0";

The “slideshow” module can now be registered with the Browser History Manager, passing in the onStateChange callback, which will be executed when the state of the “slideshow” module changes:

YAHOO.util.History.register("slideshow", initialState, function (state) {
    showSlide(parseInt(state));
});

The initialization routine (initSlideShow) needs to be slightly modified to add a history entry instead of just showing the next slide when the user hits the “previous” or “next” links:

function initSlideShow () {
    currentSlideIndex = parseInt(YAHOO.util.History.getCurrentState("slideshow"));
    slides = YAHOO.util.Dom.get("slides").getElementsByTagName("li");
    YAHOO.util.Dom.addClass(slides[currentSlideIndex], "current");
    YAHOO.util.Event.addListener(["prev", "next"], "click", function (evt) {
        YAHOO.util.Event.stopEvent(evt);
        var newSlideIndex = this.id === "next" ?
            currentSlideIndex + 1 :
            currentSlideIndex - 1;
        if (newSlideIndex >= slides.length) {
            newSlideIndex = 0;
        } else if (newSlideIndex < 0) {
            newSlideIndex = slides.length - 1;
        }
        YAHOO.util.History.navigate("slideshow", newSlideIndex.toString());
    });
}

Call initSlideShow when the Browser History Manager is ready:

YAHOO.util.History.onReady(function () {
    initSlideShow();
});

Finally, initialize the Browser History Manager:

YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");

The final version is available here. Cheers!