Using jQuery BBQ plugin for photo gallery

Click here to view demo

Let’s take previous demo and use jQuery BBQ plugin instead. Our goal is Ajax photo gallery that supports browser’s back button. We will display numbers instead of actual photos for now.

$(function () 
{
  $(window).bind('hashchange', function(e) {
    var i = parseInt(e.fragment, 10);
    if (!isNaN(i))
      switchTo(i);
  });
  $(window).trigger('hashchange');
});

function switchTo(i)
{
  if ($("#number").text() == i)
    return;
  $("#number").text(i);
  document.title = i;
  if (i > 1)
    $("#lnk_prev").attr("href", "#" + (i - 1)).removeClass("disabled");
  else
    $("#lnk_prev").removeAttr("href").addClass("disabled");
  if (i < 20)
    $("#lnk_next").attr("href", "#" + (i + 1)).removeClass("disabled");
  else
    $("#lnk_next").removeAttr("href").addClass("disabled");
}

Instead of handling click event we modify href attribute of the links. BBQ will fire hashchange event whenever we "navigate" to a new page. No need to prevent default processing – simple!

One gotcha to watch out for is changing page title. If you take naive approach and simply use document.title (like I did) to set page title you won't see your titles in the history menu in Internet Explorer 7:

Compare with Internet Explorer 8:

Leave a Reply

Your email address will not be published. Required fields are marked *