CODEWITHSUNDEEP
jquerybackjquery-cycle
Nick
Nick

Reputation: 932

Jquery cycle plugin: how to link from within slides and have slide number reflected in the URL

Ok, I have updated my code according to comments, thank you for that. So the back button is now working, however, it has stopped my internal links from working in the sense that they are no longer reflected in the URL. Previously I was writing links as so and filling in the slide number:

<a href="javascript:setSlide(1)"></a>

This is still working but is not changing the URL like it did with the malsup code. How can I link these 2 bits of code up? I am not very experienced.

Many thanks

$(function () {

// get current slide's number
function currentSlide() {
    var hash = window.location.hash || '#slide-1';
    return parseInt(hash.replace(/[A-Za-z#\-\/!]/g, '') - 1); 
}
// global vars  
var cycleSelector = $('.images'),
        startSlide = currentSlide(),
        hasSlid = 0;

// append some markup for the controls      
cycleSelector.before() 
// start jQuery Cycle   
.cycle({ 
     startingSlide: startSlide,
     // when using the next/prev links
 onPrevNextEvent: function(isNext, idx, slide) { 
    hasSlid = 1;
    window.location.hash = "slide-"+ (parseInt(idx) + 1) + ""; 
    return false;
 },
 // when using the pager thumbnails
 onPagerEvent: function(idx, slide) { 
    hasSlid = 1;
    window.location.hash = "slide-"+ (parseInt(idx) + 1) + "";  
    return false;
 },
 timeout: 0, 
 pager:  '#nav',
 next: '.next',
 prev: '.prev',
 slideResize: 0,
 containerResize: 0,
 speed: 500,
 before: onBefore,
 nowrap: 1,
 // build the thumbnails
 pagerAnchorBuilder: function(idx, slide) { 
   return '<a href="#"><p>' + $(slide).find('h1').html() + ' </p></a>'; 
} 
});


// bind to the hashchange event
$(window).bind('hashchange', function () {
        var slideNo = currentSlide();
        // we only want to fire the slide change if the next button or the pager hasn't done it for us
        if (hasSlid === 0) { cycleSelector.cycle(slideNo); }
        // return it back to zero
        hasSlid = 0;
}); 

// when the page loads, we need to trigger a hashchange
$(window).trigger( "hashchange" );

function onBefore() { 
            var title = $(this).find('h1').html();
            $('#caption') 
            .html(title); 
        };

});


function setSlide(index) {
            $('.images').cycle(index);
        }

Upvotes: 0

Views: 538

Answers (1)

Nick
Nick

Reputation: 932

For anyone who is interested I figured this out. In the above code you would need to change this:

function setSlide(index) {
        $('.images').cycle(index);
    }

to this:

function setSlide(index) {
            $('.images').cycle(index);
             window.location.hash = "slide-"+ (index) + ""; 
             return false;
        }

and then continue creating internal links with the following, changing the number depending on what slide you wanted to link to

<a href="javascript:setSlide(1)"></a>

Upvotes: 1

Related Questions