bild und text verknüpfen

[oestersoe]

Hallo Forum,

ich habe etwas voreilig versprochen eine Homepage für eine Freundin zu machen. Bin aber absolut Anfänger und habe deswegen eine Vorlage genommen und diese angepasst. Ich habe thumbnails die man anklicken kann, dann kommt ein großes Bild nebenan. Jetzt möchte ich das große Bild ein Untertitel geben. Kann jemand vielleicht da helfen? Die Homepage ist hier: flausen.borgman.dk

Ich glaube diese Javatext regelt der thumbnail:

$(document).ready(function() {
//Meta-Links

$("#meta .print").bind("click",function(){window.print();});

//Image-Viewer-Klicks
$(".preview a").bind("click", function() {
var imagedisplay = $("#img_viewer");
var newimage = $(this).attr("href");
$(this).parents(".preview").find(".aktiv").removeClass("aktiv");
$(this).addClass("aktiv");
$(imagedisplay).attr("src", newimage);
return(false);
});
});

 

[threadi]

Soll die Bildunterschrift formatiert sein? Dann müsstest Du diese als <span> innerhalb der Links hinterlegen und in dem JavaScript auf eben dieses dann zugreifen und in ein Element kopieren welches dann unterhalb des Bildes angezeigt wird. Das wird jetzt sicher beim Lesen erstmal grausam schwierig klingen für dich :] Aber das ist imho der einfachste Weg. Beispiel im HTML:

<a class="aktiv" href="inhalt/bilder/bild-1.jpg"><img alt="Thumbnail" title="Bild-1" src="inhalt/bilder/bild-1_th.jpg"><span style="display: none;">Hier die Bildunterschrift</span></a>

Und das Element für die Bildunterschrift unterhalb des großen Bildes:

<p id="bildunterschrift"></p>

Und dann noch dein JavaScript entsprechend anpassen.

Moderation: Verschoben von HTML zu JavaScript.

 

[oestersoe]

Erstmal vielen Dank! Es ist aber tatsächlich etwas kompliziert ; )
Den html code kann ich erstmal ersetzten, aber javascript anpassen..... da müsste "id=bildunterschrift" rein? Oder in der .css? weisst du wie das aussehen sollte?

 

[Cheffchen]

Hallo,

also ich bin der totale neuling in jquery (seit 2 tage rumspielen) deswegen seit nicht so hard zu mir ).
Ich würde dies einfach über title tag machen.
beim tumb auslesen und beim großen anzeigen lassen.

$(document).ready(function() {
        //Meta-Links
 
        $("#meta .print").bind("click",function(){window.print();})  ;
 
        //Image-Viewer-Klicks
        $(".preview a").bind("click", function() {
            var imagedisplay = $("#img_viewer");
            var newimage = $(this).attr("href");
            var newtitle = $(this).attr("title");           // <------------- neu
            $(this).parents(".preview").find(".aktiv").removeClass("aktiv"); // <---- hier war leerzeich zuviel drin
            $(this).addClass("aktiv");
            $(imagedisplay).attr("src", newimage);
            $("#titledisplay").html(newtitle);           // <------------- neu
            return(false);
        });
 });

und dann im html code dies noch einfügen wo das dann angezeigt werden soll

<div id="titledisplay"></div>

Cheffchen

 

[oestersoe]

Danke!! Super, es funktioniert fast ; )
Wenn ich an das 2. thumbnail klicke verschwindet der Text. Nur sollte ja eine neue Text mit dem 2., 3. usw thumbnail erscheinen...

Der html-code für die jeweilige Bilder sieht so aus:

<div class="item" style="padding-top:3px;"> <ul class="preview">
<li><a href="inhalt/objekte/bild-1.jpg" class="aktiv"><img src="inhalt/objekte/bild-1_th.jpg" title="Objekt-1" alt="Thumbnail" /></a></li>
<li><a href="inhalt/objekte/bild-2.jpg" class="aktiv"><img src="inhalt/objekte/bild-2_th.jpg" title="Objekt-2" alt="Thumbnail" /></a></li>
<li><a href="inhalt/objekte/bild-3.jpg" class="aktiv"><img src="inhalt/objekte/bild-3_th.jpg" title="Objekt-3" alt="Thumbnail" /></a></li>
<li><a href="inhalt/objekte/bild-3.jpg" class="aktiv"><img src="inhalt/objekte/bild-3_th.jpg" title="Objekt-3" alt="Thumbnail" /></a></li>
<li class="clear"></li>
</ul>
</div>


Aber ich kann ja nicht den Untertext im href einfügen? Und vor- oder nachher erscheint der Text am thumbnail, nicht an das große Bild.
Viele Grüße

 

[threadi]

<div id="titledisplay"></div>

Das wäre semantisch nicht korrekt. Ein <p> wäre hier passender.

Wenn ich an das 2. thumbnail klicke verschwindet der Text. Nur sollte ja eine neue Text mit dem 2., 3. usw thumbnail erscheinen...

Du hast den Text ins falsche Element gesetzt.

Falsch:

<li><a href="inhalt/objekte/bild-1.jpg"  class="aktiv"><img  src="inhalt/objekte/bild-1_th.jpg"  title="Objekt-1" alt="Thumbnail" /></a></li>

Richtig:

<li><a href="inhalt/objekte/bild-1.jpg"  title="Objekt-1"  class="aktiv"><img  src="inhalt/objekte/bild-1_th.jpg" alt="Thumbnail" /></a></li>

Und nein, im href-Attribut wäre das falsch. href darf nur Zeichenfolgen ohne Leerzeichen enthalten, url-encoded. Mit dem title-Attribut hast Du diese Beschränkung nicht.

 

[oestersoe]

Tausend Dank, Ihr seid genial! Es funktioniert perfekt.
Viele Grüße