webForumDet fria alternativet

Ändra lite i script så att vald bild hämtas?

2 svar · 518 visningar · startad av bassebhu

bassebhuMedlem sedan nov. 20016 480 inlägg
#1

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();
	}
bassebhuMedlem sedan nov. 20016 480 inlägg
#2

hehe, några timmar senare. Jag försöker men får inte till det. Den verkar ju dumt nog inte spara allt i en enkel array så att man kommer åt bilderna lätt utan hämtar bara in tre i taget (vilket inte funkar om man har fler än tre) och ger dem namn för active, prev och next. Det ställer till det ordentligt.

Det här har jag testat nu och det visas i rätt riktning, men det är långt ifrån en elegant lösning :)

Förslag? Tack!

 	//Slideshow Show Slide
	showslide = function(showslide) {
		if($.inAnimation) return false;
		else $.inAnimation = true;
	    var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);
		
		var currentslide = $('#supersized .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
		
		//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;
		loadSlide = showslide-1;
		imageLink = (options.slides[options.slides.length - 1].url) ? "href='" + options.slides[options.slides.length - 1].url + "'" : "";
			$("<img/>").attr("src", options.slides[options.slides.length - 1].image).appendTo("#supersized").wrap("<a " + imageLink + " class=\"prevslide\">></a>");
		imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : "";
			var newslide = $("<img/>").attr("src", options.slides[loadSlide].image).appendTo("#supersized").wrap("<a " + imageLink + " class=\"activeslide\"></a>");
		imageLink = (options.slides[loadSlide+1].url) ? "href='" + options.slides[loadSlide+1].url + "'" : "";
			$("<img/>").attr("src", options.slides[loadSlide+1].image).appendTo("#supersized").wrap("<a " + imageLink + " class=\"nextslide\">></a>");

		currentslide.prev().remove(); //Remove Old Image
		prevslide.remove();
		nextslide.remove();
		
		/**** End Image Loading ****/
		
	    newslide.hide()
	    	if (options.transition == 0){
	    		newslide.show(); $.inAnimation = false;
	    	}
	    	if (options.transition == 1){
	    		newslide.fadeIn(750, function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 2){
	    		newslide.show("slide", { direction: "up" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 3){
	    		newslide.show("slide", { direction: "right" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 4){
	    		newslide.show("slide", { direction: "down" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    	if (options.transition == 5){
	    		newslide.show("slide", { direction: "left" }, 'slow', function(){$.inAnimation = false;});
	    	}
	    $('#supersized').resizenow();
	}
bassebhuMedlem sedan nov. 20016 480 inlägg
#3

Jag hittade ett enklare script som gör det som jag vill efter lite pill.

Problemet löst!

132 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)