Jquery Cycle Hash URL from Image Title Attribute

Question

I am using JQuery Cycle with a dynamically generated pager navigation. I am trying to figure out how to link to a specific slide using window.location.hash from the image title attribute. I figured out how to modified the plugin up until this point using this example (http://jquery.malsup.com/cycle/perma2.html#home), but it doesn't link. It just sends you back to the first slide.

I referenced this stackoverflow support thread (http://stackoverflow.com/questions/4969752/display-anchor-instead-of-index-in-url-with-jquery-cycle), but they are using an existing pager navigation, not 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;
    }
});
});

score 3 · Accepted Answer · answered Oct 19 '11 at 20:15

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

should be

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

You are already on the img-DOM. No need to "find" it again.

Jquery Cycle Hash URL from Image Title Attribute

1 Answers1