Geek Answers Handbook

Jquery Cycle Hash url from image header attribute

I am using jQuery Cycle with dynamically created pager navigation. I am trying to figure out how to link a specific slide using window.location.hash from the title attribute. I figured out how to change the plugin to this point using this example (http://jquery.malsup.com/cycle/perma2.html#home), but it is not related. It just brings you back to the first slide.

I referred to this stackoverflow support thread (http://stackoverflow.com/questions/4969752/display-anchor-instead-of-index-in-url-with-jquery-cycle), but they use the existing navigation pager, not the one that is generated on the fly. I'm still new to learning jQuery, so any guidance is appreciated!

Here is the jQuery script:

$(function() {
var h, 
    hash = window.location.hash, 
    hashes = {},
    index = 0;

$('#slide img').each(function(i) {
    h = $(this).find('img').attr('title');
    hashes[h] = i;
});

if (hash)
    index = hashes[hash.substring(1)] || index;

$('#slide').cycle({ 
    fx:     'fade', 
    startingSlide: index, // <-- don't forget this!
    speed:  'fast', 
    timeout: 0,
    activePagerClass: 'active',
    pager:  '.timeline', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '.timeline li:eq(' + idx + ') a';
    },
    after: function(curr,next,opts) {
        h = $(this).find('img').attr('title');
        window.location.hash = h;
    }
});
});
+5
1
$('#slide img').each(function(i) {
    h = $(this).find('img').attr('title');
    hashes[h] = i;
});


$('#slide img').each(function(i) {
    h = $(this).attr('title');
    hashes[h] = i;
});

img-DOM. "" .

+3

More articles:


All Articles