Artikelbilder Vorschau

  • Hallo! :P


    Eine Frage, kann mir jemand bitte anhand eines Codes erklären,
    wie man dieses Bild "nachprogrammieren" kann?


    Also so eine Artikelvorschau. Wenn man mit der Maus über ein Bild fährt,
    wird das Bild in diesem großen Bereich angezeigt...


    Vielen Dank! :D 8) :thumbup:

  • Mal so ganz rudimentär (ohne die Logik dahinter wo die Bilder herkommen und wie das HTML ggf. generiert wird), unter der Voraussetzung dass jQuery verfügbar ist (der Übersichtlichkeit halber) und komplett ungetestet:


    Du hast einen Container, in den das Bild reinsoll, und die Thumbnails unten drunter (oder sonstwo - das ist prinzipiell egal):

    HTML
    <div id="ziel-container"></div>
    <img class="thumbnail" src="bild-1-thumbnail.jpg">
    <img class="thumbnail" src="bild-2-thumbnail.jpg">
    <img class="thumbnail" src="bild-3-thumbnail.jpg">
    <img class="thumbnail" src="bild-4-thumbnail.jpg">


    Zusätzlich musst du noch irgendwie an die Information kommen, wie das größere Bild geladen werden soll, dazu könnte man z.B. einfach das -thumbnail aus dem src-Attribut rausnehmen, aber der Übersichtlichkeit halber machen wir das mal mit einem data-Attribut:

    HTML
    <img class="thumbnail" src="bild-1-thumbnail.jpg" data-src="bild-1.jpg">
    ...


    In scr steckt also das Thumbnail-Bild, was vom Browser ganz normal angezeigt wird und in data-src das große Bild was wir später oben anzeigen wollen (data-*-Attribute werden vom Browser ignoriert).


    Nun kommt Javascript (in unserem Fall mit jQuery-Framework) zum Einsatz.
    Die Logik hinter unserem Plan ist ja die folgende:
    WENN jemand mit der Maus über ein Bild fährt DANN zeige das entsprechende größere Bild im Container an.


    Dazu registrieren wir einen event-Handler, der genau das macht:

    JavaScript
    $('.thumbnail').mouseenter(function(event) {	
        // do something	
    });


    Wir wählen also alle Elemente aus, die die Klasse thumbnail haben, und weisen Ihnen eine Funktion zu, die immer aufgerufen wird, wenn die Maus über das Element fährt.
    Würden wir das ganze so:

    JavaScript
    $('.thumbnail').mouseenter(function(event) {
    	alert('hallo');	
    });


    abändern, würde bei jedem hovern ein alert aufgehen der hallo ausgibt.


    Nun wollen wir aber nicht hallo ausgeben, sondern das Bild im oberen Container ändern.
    Erstmal holen wir uns die URL aus unserem Element.

    JavaScript
    var url = $(event.currentTarget).data('src');


    Wir nehmen das gehoverte Element (dieses steckt in event.currentTarget, welches wir dann per $ Funktion zu einem jQuery-Element machen, auf das wir dann mit weiteren jQuery-Funktionen wieder zugreifen können), und holen uns von dem das data-Attribut mit dem Namen src. Wenn wir also über Bild 1 gehovert hätten, steckt in der Variable url nun "bild-1.jpg".


    Danach weisen wir dem Container das Bild als Hintergrundbild zu:

    JavaScript
    $('#ziel-container').css({
    	'background-image': 'url(' + url + ')'
    });


    Erklärung: wir wählen den Ziel-Container via id aus, und weisen ihm ein background-image zu. Statt nun background-image: url(bild-1.jpg) zu schreiben, wir wir es im normalen CSS tun würden, schreiben wir als Dateinamen den Wert der Variablen url rein.


    Unser kompletter Javascript-Code sieht dann so aus:

    JavaScript
    $('.thumbnail').mouseenter(function(event) {
    	var url = $(event.currentTarget).data('src');
    	$('#ziel-container').css({
    		'background-image': 'url(' + url + ')'
    	});
    });


    Das ganze dann irgendwie einbinden (entweder per script-Tag oder besser in einer extra-Datei) - fertig.
    Natürlich kann man das ganze auf viele verschiedene Weisen lösen, aber das ist mal die einfachste. Geht natürlich auch mit normalem Javascript.


    Bei Fragen fragen :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!