Bildern automatisch highslide zuordnen
Riepör
- javascript
Hallo :)
Ich konnte mich nicht ganz entscheiden, wo ich das hier jetzt poste und hab mich einfach mal für javascript entschieden, weil es vermutlich darauf hinaus laufen wird *seufz* ^^
Ich habe auf meiner Seite eine Shoutbox und möchte, dass wenn in dieser Bilder gepostet werden die automatisch einen Highslide bekommen und entsprechend verkleinert werden.
Meine Lösungsidee dazu war, dass alle Elemente in einem div container automatisch Atribute etc zugewiesen bekommen.
<a class="highslide " onclick="return hs.expand(this)" href="<LINK_ZUM_BILD>" rel="nofollow">
<img id="hs_imageresizer_container_1" width="auto" style="max-height:50px" border="0" onload="HSImageResizer.createOn(this);" src="<LINK_ZUM_BILD">
</a>
So sieht ein Bild in einem Highslide aus wenn ich manuell alles setze. Jetzt werden die Bilder ja direkt als Link bzw im [img][/img]-Tag gepostet. Den Img-Tag selber kann ich nicht mit dem highslide verknüpfen, weil ich ja den Highslide nur in der Shoutbox und nicht auf dem Rest der Seite möchte.
Meine Idee ist jetzt einen Container um die SB zu machen und dem zu sagen, dass er sich immer wenn ein Bild geshoutet wird die URL nimmt und aus dieser dann das obere baut und statdessen postet.
Also soll:
<div id="magic">
<IRGENDWELCHER ANDERER KRAM>
<p>IRGENDWELCHER_SHOUT_TEXT <img border="0" alt="" src="https://www.google.de/images/srpr/logo11w.png"> WEITERER_SHOUT_TEXT</p>
<NOCH MEHR ANDERER KRAM>
</div>
automatisch zu
<div id="magic">
<IRGENDWELCHER ANDERER KRAM>
<p>IRGENDWELCHER_SHOUT_TEXT <a class="highslide " onclick="return hs.expand(this)" href="<https://www.google.de/images/srpr/logo11w.png" rel="nofollow">
<img id="hs_imageresizer_container_1" width="auto" style="max-height:50px" border="0" onload="HSImageResizer.createOn(this);" src="https://www.google.de/images/srpr/logo11w.png"
</a> WEITERER_SHOUT_TEXT</p>
<NOCH MEHR ANDERER KRAM>
</div>
werden. Das Problem daran ist, dass ich kein javascript kann und mir nicht viele andere Lösungen einfallen.
(Zwischen den shouts sind noch weitere container, scripte und anderer kram aber keine Bilder, die die max-height überschreiden, wodurch das ja kein Problem sein sollte ^^)
Ganz edel wäre es ja, wenn man nicht mal den [img][/img] tag um den Bildlink machen muss sondern alles was ein Bild ist automatisch umgewandelt wird, wobei sich da das Problem mit www.xx.xx/bild.png.html bildern (gab da nen Fachbegriff für, den ich aber gerade vergessen habe :'( )ergeben würde da die dann ja vermutlich nicht erkannt werden ^^
Ich hoffe ich hab mich zumindest einigermaßen erklären können. Wäre sehr cool, wenn jemand mir da helfen könnte :)
MFG
Riepör