I have a slider that I've added controls on top of the slider, the normal next & previous ::: Additionally I want to add a button that when clicked on it will open the image in full view (lightbox) ::: My code below does populate the button's href but it seems to be out of sync with the current image being displayed ::: I don't have enough knowledge of jQuery to get to the bottom of this ::: I will Appreciate any assistance :::
$('.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'));
}
Why not have the button that opens the large version of the image grab the current image when it is clicked, rather than with a function that runs after transition:
<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'));
});
NOTE: the selector for the visible image may need to be tweaked depending on your HTML structure.
----EDIT----
I just noticed in the JQuery Cycle docs that you may want to use your current code with the callback function for "before" rather than "after":
before: transition callback (scope set to element to be shown)
after: transition callback (scope set to element that was shown)
If you use the before callback the information will be set to the next slide so your link will open the current image.