PHP Anweisung Quellcode hinzufügen

Hallo zusammen,

ich baue für uns gerade eine Bemusterungstool zusammen mit RSForm. Klappt auch soweit. Ich erstelle mehrere Radio-Gruppen mit Bildern. Das klappt und sieht im Moment so aus wenn ich es erstelle:

http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg|<img src="http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg" / title="AB111/751">

So habe ich in der Auswahl als auch im Ergebnis später ein Bild das dargestellt wird. Um das ganz noch eleganter darzustellen, würde ich gerne zusätzlichen Quellcode automatisch hinzufügen. Ich dachte das ich den Bildern ggf. eine Klasse gebe und dann soll es in etwas so geschehen:

Wenn hier ein Bild mit der Klasse "XYZ" vorhanden ist, füge vor dem IMG-Tag Code-X ein und nach dem Tag Code-Y ein. Danach soll das dann in etwa so aussehen:

http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg|<figure class="uk-overlay uk-overlay-hover"><img class=XYZ" src="http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg" / title="AB111/751"><figcaption class="uk-overlay-panel uk-overlay-slide-top">(((SCHÖN WÄRE WENN HIER ZUSÄTZLICH DER TITELTAL AB111/751 EINGEFÜGT WIRD)))</figcaption></figure>

Ich kenn mich mit PHP nicht aus. Haber das ein oder andere TUT gefunden von dem ich das ableiten kann. Nur in der Umsetzung habe ich dann glaub immer das Problem das ich eine Klammer oder so falsch setzte und es dann nicht klappt.

Evtl. hat jemand für mich einen Link wo das gut nachlesbar ist oder hat mir sogar ein Codeschnipsel wie das aussehen könnte.

Evtl. ist das auch gar nicht möglich und ich vertue mich da?

In jedem Fall Danke im Voraus!

Danke. JQuery und nicht PHP. Danke. Minimalziel erreicht!

Ich würde nun gerne noch eine Lightbox einbauen. Hier brauche ich aber dann noch den Pfad des Bilder an der href-Stelle in der Lightbox Anweisung. Hast du mir eine Seite/Tutorial wo ich das evtl. selbst raus finde? Gerne auch ein passendes Schlagwort für die Funktion. Dann recherchiere ich mal und schau ob ich das alleine hin bekomme.

Danke für die Hilfe!

<script>
;(function($){
 $(document).ready(function()
 {  
  $("img.bette").each(function()
  {
   $(this).wrap('<figure class="uk-overlay uk-overlay-hover"><a href="HIER DER PFAD VOM BILD" data-uk-lightbox title=""></figure>');
   $(this).after('</a><figcaption class="uk-overlay-panel uk-overlay-slide-top">' + $(this).attr("title") + '</figcaption>');
  });
 }); //document ready
})(jQuery);
</script>

Hab einen Fehler gemacht. Das Bild darf nicht in der Lightbox sein, sonst funktioniert das Popup nicht. Weiter sollte ich noch ein Bild pro Klasse in das Overlay packen. Dann hab ich es. Hier nochmal der fertige Code.

<figure class="uk-overlay uk-overlay-hover">
<a href="/BILDPFAD-WIE-NAECHSTE-ZEILE.jpg" data-uk-lightbox title=""></a>
 <img class="bette" src="http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg" title="AB111/751">
 <figcaption class="uk-overlay-panel uk-overlay-slide-top uk-flex uk-flex-center uk-flex-middle uk-text-center">
<div>
<h3>AB111/751</h3> /*Titel aus Bild*/
<p><img src="images/hersteller/bette.jpg"></p> /*Bildpfad gebe ich pro img-class hard ein*/
</div>
</figcaption>
</figure>

Dann sollte es passen und ich kann alles füllen!

Ich bau dieses Script mehrfach ein. pro Hersteller ein z.B. bette, hansgrohe, Kaldewei usw. jeweils mit der Anweisung

$("img.bette").each(function()...$("img.hansgrohe").each(function()...$("img.kaldewei").each(function()...

Wenn ich in RSForm nun ein Bild einbaue, gebe ich diesem jeweils die Klasse des Herstellers. Das klappt so super wie du mir das vorbereitet hast. So sieht es im Moment aus:

<script>;(function($){ $(document).ready(function() {    $("img.bette").each(function()  {   $aTag = $(this)    .wrap('<a href="' + $(this).attr("src") + '" data-uk-lightbox title="' + $(this).attr("title") + '"></a>');   $aTag.wrap('<figure class="uk-overlay  uk-overlay-hover">');   $aTag.after('<figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center">' + $(this).attr("title"));  }); }); //document ready})(jQuery);</script>

Und das wird dann ausgegeben und Funktioniert:

<a href="http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg" data-uk-lightbox="" title="AB111/751"><figure class="uk-overlay  uk-overlay-hover"><img class="bette" src="http://localhost/muster/images/bemusterung/bw/bw/157x75/ab111-751.jpg" title="AB111/751"><figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center">AB111/751</figcaption></figure></a>

Was jetzt noch nice to have wäre, wenn nach dem Titel im figcaption (AB111/751) in einer neuen Zeile ein Bild eingebaut werden könnte. Das meinte ich mit Hard-Einfügen. Das wäre ein Bild pro Klasse. Soll das Hersteller-Logo sein. Und das wird dann ja wieder automatisch gezogen.

Weiß jetzt nicht ob das verständlich geschrieben war? Wahrscheinlich eher nicht Aber wie gesagt. Minimalziel erreicht. Es geht jetzt eigentlich nur noch darum, wie dieser Tag aussehen muss wenn danach HTML in einer neuen Zeile sein soll.

$aTag.after('<figcaption class="uk-overlay-panel uk-flex uk-flex-center uk-flex-middle uk-text-center">' + $(this).attr("title")HIER MUSS HTML/EIN BILD IN EINER NEUE ZEILE);});

Aber nochmals wie gesagt bin auch so zufrieden. Vielen Dank für deine Zeit. Ist jetzt ja auch fast schon Wochenende.

Danke!