{"id":167,"date":"2010-04-27T21:41:59","date_gmt":"2010-04-27T11:41:59","guid":{"rendered":"http:\/\/chuchuva.com\/pavel\/?p=167"},"modified":"2010-04-27T17:29:34","modified_gmt":"2010-04-27T07:29:34","slug":"using-jquery-bbq-plugin-for-photo-gallery","status":"publish","type":"post","link":"https:\/\/chuchuva.com\/pavel\/2010\/04\/using-jquery-bbq-plugin-for-photo-gallery\/","title":{"rendered":"Using jQuery BBQ plugin for photo gallery"},"content":{"rendered":"

Click here to view demo<\/a><\/p>\n

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

$(function () \r\n{\r\n  $(window).bind('hashchange', function(e) {\r\n    var i = parseInt(e.fragment, 10);\r\n    if (!isNaN(i))\r\n      switchTo(i);\r\n  });\r\n  $(window).trigger('hashchange');\r\n});\r\n\r\nfunction switchTo(i)\r\n{\r\n  if ($(\"#number\").text() == i)\r\n    return;\r\n  $(\"#number\").text(i);\r\n  document.title = i;\r\n  if (i > 1)\r\n    $(\"#lnk_prev\").attr(\"href\", \"#\" + (i - 1)).removeClass(\"disabled\");\r\n  else\r\n    $(\"#lnk_prev\").removeAttr(\"href\").addClass(\"disabled\");\r\n  if (i < 20)\r\n    $(\"#lnk_next\").attr(\"href\", \"#\" + (i + 1)).removeClass(\"disabled\");\r\n  else\r\n    $(\"#lnk_next\").removeAttr(\"href\").addClass(\"disabled\");\r\n}\r\n<\/code><\/pre>\n
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 \u00e2\u20ac\u201c simple!<\/p>\n
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:
\n\"\"<\/p>\n
Compare with Internet Explorer 8:
\n\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
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) … Continue reading Using jQuery BBQ plugin for photo gallery<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[8],"tags":[11],"class_list":["post-167","post","type-post","status-publish","format-standard","hentry","category-develop","tag-jquery"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":0,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"wp:attachment":[{"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}