{"id":151,"date":"2010-04-09T20:42:20","date_gmt":"2010-04-09T10:42:20","guid":{"rendered":"http:\/\/chuchuva.com\/pavel\/?p=151"},"modified":"2011-09-20T11:02:40","modified_gmt":"2011-09-20T01:02:40","slug":"using-asual-jquery-address-plugin-for-photo-gallery","status":"publish","type":"post","link":"https:\/\/chuchuva.com\/pavel\/2010\/04\/using-asual-jquery-address-plugin-for-photo-gallery\/","title":{"rendered":"Using Asual jQuery Address plugin for photo gallery"},"content":{"rendered":"

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

Let’s say you want to build photo gallery. Something like this:
\n\"\"<\/p>\n

You want to open next and previous photos without page reload, using Ajax. One problem with this is that browser’s back button stops working. Fortunately, it’s easy to fix with jQuery Address plugin<\/a> from Asual. I tried using this plugin and it worked very well. I’ve put together a simple demo<\/a>.<\/p>\n

For simplicity, let’s display just a number instead of actual photo:
\n\"\"<\/p>\n

Every time you click right arrow the number increases; left arrow decrements the number by one. Simple! Back and forward buttons should work. Also, it would be nice to have different titles in the history:<\/p>\n

\"\"<\/p>\n

The code:<\/p>\n

$(function () \r\n{\r\n  $.address.strict(false);\r\n  $.address.externalChange(function(e)\r\n  {\r\n    switchTo(e.value);\r\n  });\r\n\r\n  $(\"#lnk_prev\").click(function(e)\r\n  {\r\n    e.preventDefault();\r\n    var i = $(\"#number\").text() * 1 - 1;\r\n    switchTo(i);\r\n    $.address.value(i);\r\n  });\r\n\r\n  $(\"#lnk_next\").click(function(e)\r\n  {\r\n    e.preventDefault();\r\n    var i = $(\"#number\").text() * 1 + 1;\r\n    switchTo(i);\r\n    $.address.value(i);\r\n  });\r\n});\r\n\r\nfunction switchTo(i)\r\n{\r\n  $(\"#number\").text(i);\r\n  $.address.title(i);\r\n}\r\n<\/code><\/pre>\n
The magic happens in click handler. $.address.value method changes page address and adds browser history point. You need to cancel navigation by calling e.preventDefault() \u2014 otherwise browser would follow the link and two history entries would get created.<\/p>\n
\"\"<\/a><\/p>\n
Note that you need to disable plugin’s strict option, otherwise it would add slash symbol immediately after hash symbol, like this: #\/11.<\/p>\n","protected":false},"excerpt":{"rendered":"
Click here to view demo Let’s say you want to build photo gallery. Something like this: You want to open next and previous photos without page reload, using Ajax. One problem with this is that browser’s back button stops working. Fortunately, it’s easy to fix with jQuery Address plugin from Asual. I tried using this … Continue reading Using Asual jQuery Address 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-151","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\/151","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=151"}],"version-history":[{"count":0,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/posts\/151\/revisions"}],"wp:attachment":[{"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/categories?post=151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chuchuva.com\/pavel\/wp-json\/wp\/v2\/tags?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}