Hej alla glada!
Jag sitter med ett script som byter bakgrundsbilder och förutom föregående- och nästa-knapp vill jag lägga till så att man även kan gå direkt till en bild. Jag har kopierat delar ev den befintliga funktionen som hämtar nästa bild, men hur gör jag för att min nyskapade funktion showslide ska gå direkt till önskad bild. Hur jag skickar in värdet för showslide har jag löst, men när jag väl har numret för den bild som jag vill åt, hur hämtar jag den i det här scriptet och ser till att föregående/nästa bild-knapparna ev. blir uppdaterade?
Här är en demo på hur det funkar
Tänk er att jag där har lagt till länkar för Bild 1, 2 och 3 (etc.) som ska leda till resp bilder. Idéer?
Här är min kodsnutt som jag tänkte att man kunde utgå ifrån där (showslide) skickas med för önskad bild.
Tack!!
showslide = function(showslide) {
if($.inAnimation) return false;
else $.inAnimation = true;
var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
var currentslide = $('#supersized .activeslide');
currentslide.removeClass('activeslide');
if ( currentslide.length == 0 ) currentslide = $('#supersized a:last'); //*******Check if end of array?
var nextslide = currentslide.next().length ? currentslide.next() : $('#supersized a:first'); //*******Array
var prevslide = nextslide.prev().length ? nextslide.prev() : $('#supersized a:last'); //*******Array
$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');
//Get the slide number of new slide
$.currentSlide == 0 ? $.currentSlide = options.slides.length - 1 : $.currentSlide-- ;
/**** Image Loading ****/
//Load next image
loadSlide=false;
$.currentSlide == options.slides.length - 1 ? loadSlide = 0 : loadSlide = $.currentSlide + 1;
imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
$("<img/>").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap("<a " + imageLink + "></a>");
currentslide.prev().remove(); //Remove Old Image
/**** End Image Loading ****/
nextslide.hide().addClass('activeslide')
if (options.transition == 0){
nextslide.show(); $.inAnimation = false;
}
if (options.transition == 1){
nextslide.fadeIn(750, function(){$.inAnimation = false;});
}
if (options.transition == 2){
nextslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 3){
nextslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 4){
nextslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
}
if (options.transition == 5){
nextslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
}
$('#supersized').resizenow();
}