Изменение атрибутов кнопки для соответствия окна ползунка

Question

Поздравил,

Первое - этот сайт невероятный. Я узнал массу замечательных вещей здесь!

Я использую программу-слайдер на основе jquery для отображения последовательности изображений (серии книг). Под окном слайдера я разместил кнопки "PDF". Я пытаюсь отсортировать, как кнопка загружает файл, связанный с тем изображением, которое в данный момент отображается в окне ползунка. Поэтому, если в окне слайдера отображается "Изображение № 3", мне нужно, чтобы кнопка PDF была связана с соответствующим файлом № 3. Я считаю, что мне нужно динамически изменять атрибуты каждой кнопки в соответствии с тем, что отображается в окне слайдера.

Вы можете просмотреть бета-сайт в бета-версии

Я подозреваю, что мне понадобится какой-то javascript, чтобы поймать событие click и передать его атрибутам кнопки. Это насколько мои шаткие ноги могут нести меня с этим. Может кто-то указать мне верное направление? Я настоящий новичок в этом и учусь медленно, поэтому используйте маленькие слова!

Ура, TY

Answer 1

Вы на правильном пути. Я думаю, что это, вероятно, сработает, но я не привык отбирать массивы элементов jQ.

Поместите имя файла в alt отметьте в списке элементы, а затем используйте этот скрипт:

$('#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'));
});

Также, проверив живой DOM во время игры с ползунком, я заметил, что он немного подскочил, если вы изменили направление к концу / началу слайдов. Вы можете исследовать это