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

[unwohltaeter]

Wie bekomme ich es hin, dass in einem Container genau das Bild mit dem größten Z-Index ausgewählt wird und eine Klasse (z.B. class="top") angehängt bekommt?

 

[CPoly]

Du gibst ja selbst schon fast die Anleitung (Hab den Code jetzt nicht getestet).

in einem Container

//Der container
var con = document.getElementById('container');

das Bild

//Alle Bilder in dem container
var images = con.getElementsByTagName('img');

mit dem größten Z-Index

//Maximum suchen
var maxImg = null, maxZ = -1;
for(var i = 0; i < images.length; i++) {
    var z = images[i].style.zIndex | 0;
    
    if(z > maxZ) {
        z = maxZ;
        maxImg = images[i];
    }
}

eine Klasse (z.B. class="top") angehängt bekommt

//Klasse anhängen
maxImg.className += ' top';

 

[unwohltaeter]

Was wäre, wenn diese Bilder nochmal in einem a-Tag eingeschlossen wären?
Zum Beispiel:
#produkte -> a -> img

Übrigens: Der Z-Index der Bilder wird dynamisch generiert. Ich benutze das jQuery-Plugin "Cloud Carousel".

 

[CPoly]

Was wäre, wenn diese Bilder nochmal in einem a-Tag eingeschlossen wären?
Zum Beispiel:

Kommt drauf an. Wenn die img-Elemente den z-index haben, dann ändert sich nichts. Wenn allerdings die Links den z-index haben, musst du eben alle "a" Elemente nehmen, anstatt alle "img".


Du hättest von vornerein sagen können, dass du
1.jQuery verwendest
2.Ein fertiges Carousel Script

In den standard-Einstellungen ist der größte z-index 100. Also kannst du einfach folgendes machen (Es sei denn es läuft gerade eine Animation).

$('.cloudcarousel').filter(function() {
    return this.style.zIndex == 100;
});

 

[unwohltaeter]

$('.cloudcarousel').filter(function() {
    return this.style.zIndex == 100;
});

Was bewirkt das? Wie kann ich das verwenden um eine Klasse anzuhängen?

 

[CPoly]

Das bewirkt, dass du ein jQuery Objekt hast, welches die Elemente mit einem z-index von 100 enthält. Und eine Klasse anhängen ist jQuery-mäßig ganz einfach.

$('.cloudcarousel').filter(function() {
    return this.style.zIndex == 100;
}).addClass('top');

 

[unwohltaeter]

Habe es in

$(document).ready(function(){});

gepackt aber es funktioniert nicht.

Kann es sein, dass es nicht funktioniert, weil nicht nur Z-Index im Style-Attribut steht?

 

[CPoly]

Es muss nach dem Aufruf des Carousels stehen, sonst haben die Bilder ja noch keine "cloudcarousel" Klasse.

Kann es sein, dass es nicht funktioniert, weil nicht nur Z-Index im Style-Attribut steht?

Nein. Genau deshalb gibt es ja dass "style" Objekt mit den ganzen Eigenschaften, damit man getrennt darauf zugreifen kann.

 

[unwohltaeter]

Bin wohl zu blöd. Funktioniert nicht. Habs in meinem Wordpress-Theme im Footer ganz unten eingebunden aber das Script tutet nicht.

 

[CPoly]

Am einfachsten wäre es, wenn du das Plugin anpasst und dir als Option eine Callback Funktion hinzufügst, die jedes mal aufgerufen wird, wenn ein Element ganz vorne angekommen ist (Ende einer Animation). Da das vermutlich für dich zu weit geht und bei Updates des Plugins alles wieder gemacht werden muss, hier eine alternative Lösung.
Im Plugin gibt es eine Funktion "stop", die aufgerufen wird, sobald die Animation stoppt. Diese überschreiben wir, um unseren eigenen Code ausführen zu können (z.B. herausfinden, welches das oberste Element ist).

Erstmal erstellen wird das Carousel und merken uns das Objekt in einer Variablen (Mein Code ist jetzt nur auf ein einziges Carousel ausgelegt!).

var carousel = $("#carousel1").CloudCarousel({
	xPos: 128,
	yPos: 32,
	buttonLeft: $("#left-but"),
	buttonRight: $("#right-but"),
	altBox: $("#alt-text"),
	titleBox: $("#title-text")
});

Jetzt speichern wir die alte "stop" Funktion, denn die darf uns nicht verloren gehen.

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

Und wir verpassen dem Objekt eine neue Funktion, in der wir erstmal nichts anderes machen, als die alte aufzurufen (toll :-D).

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

Das tolle ist, wird können jetzt bei jedem "stop" unsere eigene Funktionalität ausführen. Wir hohlen uns jetzt mal das vorderste Elemente (so lange du die "minScale" Eigenschaft nicht anfasst, ist das ein z-index von 100. Ansonsten kannst du auch den Code aus meinem ersten Post benutzen für jeden beliebigen z-index)

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

    //Unser eigener Code!
    $('.cloudcarousel').removeClass('top').filter(function() {
        return this.style.zIndex == 100;
    }).addClass('top');
};

Und hier ein komplettes Beispiel. Der vorderste Element hat bei mir immer einen roten Rahmen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Carousel</title>
	
	<style type="text/css">
	.top {border:1px solid red;}
	</style>
</head>

<body>
	<div>
		<div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">
			<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
			<!-- You can place links around these images -->
			<img class="cloudcarousel" src="flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
			<img class="cloudcarousel" src="flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
			<img class="cloudcarousel" src="flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
			<img class="cloudcarousel" src="flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
			<img class="cloudcarousel" src="flag5.png" alt="Flag 5 Description" title="Flag 5 Title" />
			<img class="cloudcarousel" src="flag6.png" alt="Flag 6 Description" title="Flag 6 Title" />
		</div>
	
		<!-- Define left and right buttons. -->
		<input id="left-but"  type="button" value="Left" />
		<input id="right-but" type="button" value="Right" />

		<!-- Define elements to accept the alt and title text from the images. -->
		<p id="title-text"></p>
		<p id="alt-text"></p>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="cloud-carousel.1.0.5.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		var carousel = $("#carousel1").CloudCarousel({
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		});
		
		var stop = carousel.data('cloudcarousel').stop;
		
		carousel.data('cloudcarousel').stop = function() {
			stop.call(this);
			
			$('.cloudcarousel').removeClass('top').filter(function() {
				return this.style.zIndex == 100;
			}).addClass('top');
		};
	});
	/* ]]> */
	</script>
</body>

</html>