Jquery Cycle Hash Navigation
Hi to everyone. I'm using Jquery Cycle to show up some pages with "Hash" and its working very fine navigating and loading pages. But my thing now is the back and next browser button that is not working at all. Does anybody have the same issue?.
Here's my code for the slideshow:
- $slideshow = {
- context: false,
- tabs: false,
- timeout: 0,
- slideSpeed: 1000,
- tabSpeed: 600,
- fx: 'blindY',
- init: function() {
- this.context = $('#slideshow');
- this.tabs = $('nav#main_nav ul li', this.context);
- this.tabs.remove();
- this.prepareSlideshow();
- },
-
- prepareSlideshow: function() {
-
- var h,
- hash = window.location.hash,
- hashes = {},
- index = 0;
-
- $('div.slides > ul.cont_slider > li').each(function(i) {
- h = $(this).data('hash');
- hashes[h] = i;
- });
- if (hash)
- index = hashes[hash.substring(1)] || index;
-
- $('div.slides > ul.cont_slider', $slideshow.context).cycle({
- fx: $slideshow.fx,
- timeout: $slideshow.timeout,
- speed: $slideshow.slideSpeed,
- startingSlide: index,
- fastOnEvent: $slideshow.tabSpeed,
- pager: $('nav#main_nav ul', $slideshow.context),
- pagerAnchorBuilder: $slideshow.prepareTabs,
- before: $slideshow.activateTab,
- pauseOnPagerHover: true,
- pause: true,
- after: function(curr,next,opts) {
- h = $(this).data('hash');
- window.location.hash = h;
- }
- });
- },
-
- prepareTabs: function(i, slide) {
- return $slideshow.tabs.eq(i);
- },
- activateTab: function(currentSlide, nextSlide) {
- var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
-
- if(activeTab.length) {
- $slideshow.tabs.removeClass('on');
- $('body').removeClass(currentSlide.id);
- activeTab.parent().addClass('on');
- $("#menu-inner ul li a").addClass('on');
- $('body').addClass(nextSlide.id);
- }
- }
- };
And my HTML have its own data-hash like:
- <li id="inicio" data-hash="inicio">...</li>
How can add the Back/Next browser button actions in this code. Is there any chance to do it here as a fancy solution?