Adding Back Button and Bookmarking Support to Your DHTML Slide Show

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="http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/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!

6 thoughts on “Adding Back Button and Bookmarking Support to Your DHTML Slide Show

  1. Julien Lecomte Post author

    @mrrau

    Yes, this is a known limitation of the YUI Browser History Manager (it is listed here) The same limitation is shared by all the history frameworks out there. Opera knows about the problem, but has not given any estimate as to when this bug will be fixed.

  2. Julien Lecomte Post author

    @mrrau

    Also note that even though the YUI Browser History Manager does not support Opera, Opera users can fully enjoy the slide show. The only thing they will miss is the back button and bookmarking functionality. To that regard, the YUI Browser History Manager allows for graceful degradation.

  3. Robert Nyman

    Thanks for sharing. However, I wouldn’t recommend adding an iframe to the markup of any page, since it will be invalid HTML/XHTML (with a strict doctype, that is, which is what everyone should use).

    I’d rather like the iframe to be added dynamically through the script/framework to cater to these things; just as I did it with ASK (feel completely free to remove this link; i just wanted something to exemplify what I’m talking about).

  4. Julien Lecomte Post author

    @Robert

    The YUI Browser History Manager used to create the markup dynamically in previous versions. However, doing so is the source of a major bug where Internet Explorer “forgets” some of its history when leaving the page and then coming back.

Comments are closed.