Добавьте HREF URL к кнопке, расположенной в верхней части слайдера цикла jQuery для активного изображения слайдера - PullRequest
Новая
       22

Добавьте HREF URL к кнопке, расположенной в верхней части слайдера цикла jQuery для активного изображения слайдера

0 голосов
/ 02 июля 2011

У меня есть ползунок, в который я добавил элементы управления поверх ползунка, обычный следующий и предыдущий ::: Кроме того, я хочу добавить кнопку, которая при нажатии на нее откроет изображение в полноэкранном режиме (лайтбокс)::: Мой код ниже заполняет href кнопки, но кажется, что он не синхронизирован с текущим отображаемым изображением ::: У меня недостаточно знаний о jQuery, чтобы докопаться до сути этого :: Я буду признателен за любыепомощь ::: 

$('.portfolio-slider').hover(function() { $('.portfolio-controls').fadeIn(); }, function() { $('.portfolio-controls').fadeOut(); });

$('.portfolio-slider .slides').cycle({
timeout: 2000, 
fx: 'fade',
prev : '.prev-slide', 
next : '.next-slide', 
pause: 1,
after: onAfter
});

function onAfter(currSlideElement) {
$('#full-size-button').attr('href', $('a', currSlideElement).attr('href'));
}

1 Ответ

0 голосов
/ 02 июля 2011

Почему бы не иметь кнопку, которая открывает большую версию изображения, чтобы захватить текущее изображение при нажатии, а не с функцией, которая запускается после перехода: 

<a id="full-size-button">View Bigger Image</a>

$('#full-size-button').live('click', function() {
    $('#full-size-button').attr('href', $('.portfolio-slider img').is(':visible').attr('href'));
});

ПРИМЕЧАНИЕ: селектор длявидимое изображение может нуждаться в настройке в зависимости от вашей HTML-структуры.

---- РЕДАКТИРОВАНИЕ ----

Я только что заметил в документах JQuery Cycle, что вы можете использовать свой текущийкод с функцией обратного вызова для «до», а не «после»: 

before: transition callback (scope set to element to be shown)
after: transition callback (scope set to element that was shown)

Если вы используете обратный вызов до, информация будет установлена ​​на следующем слайде, поэтому ваша ссылка откроет текущее изображение.

http://jquery.malsup.com/cycle/options.html

...