Bild mit höchstem Z-Index auswählen und Klasse hinzufügen

[unwohltaeter]

Danke, funktioniert alles bestens!
Nur einen Haken hat die Sache: Ich möchte, dasss die Klasse "top" beim Klick auf ein Karussellelement oder auf den "next" oder "prev"-Button sofort verschwindet.
Geht das auch?

 

[CPoly]

Ein kurzer Blick in den Code: Es gibt eine go() Methode!

var go = carousel.data('cloudcarousel').go;

carousel.data('cloudcarousel').go = function() {
	go.call(this);
	
	$('.cloudcarousel').removeClass('top');
};

 

[unwohltaeter]

Danke, danke, danke! Ich verbeuge mich! ^^

 

[unwohltaeter]

Wenn ich darf noch eine Frage...
Du scheinst dich ziemlich gut mit JavaScript und jQuery auszukennen.
Weißt du zufällig, wie ich bei diesem Karussell eine Art Preloader zustande bekomme? Soll heißen, dass die das ganze Karussell erst einmal die Klasse "hide" bekommt und erst wenn alle Bilder geladen sind die Klasse wieder entfernt wird.

Die Funktion im Karussell sieht so aus:

 this.checkImagesLoaded = function () {
                var i;
                for (i = 0; i < images.length; i++) {
                    if ((images[i].width === undefined) || ((images[i].complete !== undefined) && (!images[i].complete))) {
                        return
                    }
                }
                for (i = 0; i < images.length; i++) {
                    items.push(new Item(images[i], options));
                    jQuery(images[i]).data('itemIndex', i)
                }
                clearInterval(this.tt);
                this.showFrontText();
                this.autoRotate();
                this.updateAll()
            };

 

[CPoly]

Ich muss erstmal überlegen, wie man das am Besten macht, ohne den Plugin Code zu verändern.

Aber zuerst noch eine gute Nachricht. Ich bin gerade im Code über die Eigenschaft "frontIndex" gestolpert. Das heißt du kannst dir das prüfen des z-index sparen, denn dort steht immer der Index des vordersten Bildes drin.

carousel.data('cloudcarousel').stop = function() {
    stop.call(this);

    $('.cloudcarousel').removeClass('top').eq(this.frontIndex).addClass('top');
};

Jetzt zum Preloading. Im Code sieht man eine Eigenschaft "this.imagesLoaded = 0;" die leider auskommentiert ist. Es wäre ein leichtes diese wieder einzubauen, aber wir wollen ja den Plugin code nicht verändern. Also müssen wir das irgendwie anders festmachen. Das "items" Array ist leider eine private Eigenschaft, da kommen wir von außen nicht dran...
Was ich sehen kann, dass "updateAll" zum aller ersten mal aufgerufen wird, wenn alle Bilder geladen sind. Also überschreiben wir diese wie wir es vorher mit stop und go gemacht haben, aber nach einmaligen ausführen machen wir das wieder rückgängig (brauchen es ja nur ein mal).

$(function() {
	var carousel = $("#carousel1").CloudCarousel({
		xPos: 128,
		yPos: 32,
		buttonLeft: $("#left-but"),
		buttonRight: $("#right-but"),
		altBox: $("#alt-text"),
		titleBox: $("#title-text"),
		autoRotate: "right"
	});
	
	var
		imgs = carousel.find('.cloudcarousel'),
		data = carousel.data('cloudcarousel'),
		stop = data.stop,
		go = data.go,
		updateAll = data.updateAll;
	
	//Erstmal dem Carousel die Klasse "hide" verpassen
	carousel.addClass('hide');
	
	data.stop = function() {
		stop.call(this);
		
		//Wenn die Animation anhält, bekommt nur das vorderste Element die Klasse "top"
		imgs.removeClass('top').eq(this.frontIndex).addClass('top');
	};
	
	data.go = function() {
		go.call(this);
		
		//Wenn die Animation startet ist keines der Elemente mehr "ganz vorne"
		imgs.removeClass('top');
	};
	
	data.updateAll = function() {
		
		//Klasse "hide" vom Carousel entfernen
		carousel.removeClass('hide');
		
		//Das soll nur ein einziges mal passieren, deshalb setzen wir die "updateAll" Funktion wieder zurück zum Ursprung
		data.updateAll = updateAll;
		
		//Jetzt rufen wir noch die ursprüngliche Funktion auf
		updateAll.call(this);
	};
});

 

[unwohltaeter]

Naja, wenn man den Code umbauen muss auch egal. Wenns dadurch möglich wird...

Der Preloader funktioniert nicht - Die Bilder werden mir beim Laden dennoch angezeigt.

 

[CPoly]

Nach dem du noch weitere Fragen hattest, habe ich doch den Plugin code jetzt doch angepasst.

-Funktioniert mit mehrere Carousels, nicht nur einem
-Neue Option "frontClass", um die Klasse festzulegen, die das vorderste Elemente bekommen soll
-Neue Option "onPreloaded". Eine Funktion die aufgerufen wird, sobald alle Bilder geladen sind. "this" referenziert innerhalb der Funktion das Element, bei dem ursprünglich "CloudCarousel" aufgerufen wurde.

$("#carousel1, #carousel2, #carousel3").addClass('hide').CloudCarousel({
	frontClass: "top",
	onPreloaded: function() {
	    $(this).removeClass('hide');
	}
});

 

[unwohltaeter]

Klasse. Vielen Dank!
Besserer Support als vom eigentlichen Programmierer!

Irgendwann hätte ich das zwar selbst hinbekommen aber erst nachdem ich mich 'n bisschen mit Javascript und jQuery befasst hätte. Und dat hätte gedauert. Minimum 'nen Monat.