Changing Button Attributes to Match Slider Window

Question

Greets,

First - this site is incredible. I've learned a ton of great things here!

I'm using a jquery based slider program to display a sequence of pictures (a series of books). Beneath the slider window I've positioned a "PDF" buttons. I'm trying to sort how to have the button download the file associated with whatever image is currently displayed in the slider box. So if "Picture #3" is showing in the slider window I need the PDF button to be associated with the respective #3 file. I believe I need to change each button's attributes dynamically to match what's showing in the slider window.

You can view the beta site at beta

I suspect I'll need some sort of javascript to snag the click event and feed it to the button's attributes. That's as far as my shaky legs can carry me with this one. Can anyone point me in the right direction? I'm a real noob at this and learning slowly so use small words!

Cheers, TY

Answer 1

You're on the right track. I think this would probably work, but I'm not used to culling from arrays of jQ elements.

Put the filename into an alt tag in your list items, then use this script:

$('#download-button').click( function() {
    var left_pos = $('ul').css('left');
    var win_width = $('ul').innerWidth();

    left_pos = left_pos * (-1)  /* Will convert from negative to positive */

    var slide_num = left_pos/win_width;
    var slides = $('ul').find('li');        

    $(this).attr('src', 'path/to' + slides[slide_num].attr('alt'));
});

Also, upon checking the living DOM while playing around with the slider, I noticed that it seemed to jump a bit if you changed directions toward the end of/beginning of the slides. You may want to investigate that