HTML Code automatisch mit Javascript ersetzen / einfügen

[Kosty]

Hallo !

Ich benötige Hilfe von jemanden der sich mit javascript auskennt.
Auf einer Joomla basierenden Seite verwende ich ein Plugin names "Multithumb", um eine Bildergallerie mit Lightbox einzufügen.

Jedenfalls wird in meinem Fall ein HTML Code generiert.

Mein Ziel ist es einen Teil des HTML Codes zu verändern, bzw. einen Teil einzufügen.

Konkret geht es darum dass ich VOR dem erstellten

<img class="........">

eine weiteren Code einfügen will, damit es dann am Ende so aussieht :

<span class="..."><img src="..." width=".." height=".." alt="..."></span><img class="........">

Ich wollte das Ganze mit der Replace Funktion oder document.write Funktion von Javascript lösen.
Das Problem dabei ist, dass ich damit keinen HTML Code ersetzen kann, da er den String nach den " für abgeschlossen sieht.

Kann mir da jemand eine Methode sagen, wie ich das ganze löse ?
Es muss nicht umbedingt Javascript sein, kann auch gerne auch anders gelöst werden. (Ich kenne mich mit Programmieren leider nicht besonders gut aus)

Danke !

 

[Dtd-Track]

Ich habe es nicht ausprobiert, aber das müsste inetwa passen:

function replaceImg ()
{
// Suche alle img tags
var arrImgs = document.getElementsByName ('img');
var objParent = null;
var objSpan = null;
var objImg = null;

for (var i = 0; i < arrImgs.length; i++)
{
// Ist dies ein Bild aus der Galerie?
if (arrImgs.className == "deineClass")
{
// Ja ist es
objParent = arrImgs.parentNode;

// Erzeuge den Span-Tag
objSpan = document.createElement ("span");
objSpan.className = "deineSpanClass";

// Erzeuge das Img-Element
objImg = document.createElement ("img");
objImg.src = arrImgs.src;
objImg.className = arrImgs.className
objImg.style.width = parseInt (arrImgs.style.width, 10) + "px";
objImg.style.height = parseInt (arrImgs.style.height, 10) + "px";
objImg.alt = arrImgs.alt;

// Füge das Bild in den Span tag ein
objSpan.appendChild (objImg);

// Entferne das element aus dem Eltern-Element
objParent.removeChild (arrImgs);
// Füge das Span element hinzu
objParent.appendChild (objSpan);
}
}
}

Edit: Das Forum übernimmt meine Struktur nicht richtig. Nicht das jemand denkt, ich würde so mein Zeug schreiben.

Edit2: Warum willst du denn etwas so banales über JS lösen? Geh in die PHP Datei und füge deinen Span-Tag einfach ein. Ist doch wesentlich einfacher.

Letzter Edit3:

Ich wollte das Ganze mit der Replace Funktion oder document.write Funktion von Javascript lösen.

document.write ersetzt erstens die komplette Seite und zweitens macht man soetwas über das DOM. Den HTML code als String zu verändern ist eigentlich nicht vorgesehen. MS hat irgendwann mal das innerHTML eingeführt und seit dem ist es leider Gang und Gebe geworden, obwohl dies gar keine offizielle JS Eigenschaft ist.

 

[Kosty]

Vielen Dank für deine Hilfe !

Mir ist bei deinem Script nicht ganz klar, wo die Bild URL vom span Element hergenommen wird...

Ich habs zuerst versucht es direkt über die PHP Datei zu lösen, es ist allerdings immer eine Fehlermeldung gekommen.

Ich schilder mal genau, was ich mache, was automatisch erstellt wird und wie ich es am Ende haben möchte :

In Joomla schreibe ich im Content ins HTML Folgendes rein :

{multithumb thumb_height=150 thumb_width=190}<img src="https://www.deejayforum.de/images/pics/02.jpg" border="0" title="TITELVOMBILD" style="float: left; border: 1px solid black; margin: 4px 16px 3px 0px;" />

Das Multithumb Plugin erstellt mir dann im Browser folgendes HTML :

<a title="TITELVOMBILD" rel="lightbox[]" href="/cache/multithumb_thumbs/354437512.jpg" target="_blank">
<img class="multithumb" width="140" height="190" title="TITELVOMBILD" alt="" style="float: left; border: 3px solid rgb(0,0,0);" src="/cache/multithumb_thumbs/707377797.jpg">
</a>

Ich möchte den Span Tag, den ich oben beschrieben habe, innerhalb dieses <a> </a> drinnen haben.

Das Ganze soll dann so aussehen:

<a title="TITELVOMBILD" rel="lightbox[]" href="/cache/multithumb_thumbs/354437512.jpg" target="_blank">
<img class="multithumb" width="140" height="190" title="TITELVOMBILD" alt="" style="float: left; border: 3px solid rgb(0,0,0);" src="/cache/multithumb_thumbs/707377797.jpg">
<span class="zoom-icon"><img src="/images/zoomicon.gif" width="20px" height="20px" alt="Zoom"></span>
</a>

Das Span Element kann entweder vor dem <img class=...> oder vor dem </a> sein.

Ich hab mal das multithumb.php als Anhang raufgeladen. Vielleicht findest du die Stelle, wo ich das Span einfügen kann. (.txt beim Anhang entfernen)

 

[Dtd-Track]

Vielen Dank für deine Hilfe !

Mir ist bei deinem Script nicht ganz klar, wo die Bild URL vom span Element hergenommen wird...

objImg.src = arrImgs.src;

Nur mal so..

Ich gucke mir mal eben die PHP-Datei an.
----

Jetzt habe ich erst verstanden, was du machen willst. Mein Script hätte das Bild in ein Span-Element gesteckt.

----

Ich kann das Script jetzt natürlich nicht testen, aber ich schätze, dass ich die richtige Stelle gefunden habe. Wenn nicht, musst du dich mal selbst auf die Suche begeben und gucken, an welchen Stellen der Code generiert wird.

Die Änderung ist durch ein @ markiert.

 

[Kosty]

Vielen Dank für deine kompetente Antwort !

Die richtige Stelle war ein paar Zeilen darüber und hab es jetzt nach langen Versuchen geschafft !

Danke nochmals für deine Hilfsbereitschaft

 

[Lemuna]

Zwar schon gelöst, aber schau dir mal JQuery an, das kann solche sachen super einfach lösen
Gruß
Lemuna