Seite 1 von 1
Bilder nebeneinander zeigen
Verfasst: 14.11.2014 20:03
von MTT
Hallo zusammen,
ich komme mit der nächsten Frage
Ich möchte im Forum einige Bilder nebeneinander zeigen.
Und habe keine Ahnung wie das geht.
Leider hat mir die Suche auch nicht weiter geholfen.
Ich bitte Euch wieder mir zu helfen.
Herzlichen Dank,
M.
Re: Bilder nebeneinander zeigen
Verfasst: 14.11.2014 21:06
von HabNurNeFrage
Hi,
im Beitrag oder sollen die irgendwo auf einer seite immer angezeigt werden?
Wenn Du im Beitrag eine Art Bildergalerie anzeigen möchtest, könntest Du Dir dazu einen benutzerdefinierten bbCode einbauen.
Hier steht, wie das grundsätzlich gemacht wird:
https://www.phpbb.de/kb/benutzerdefinierter_bbcode
Ein g
eeig
neter bbCode könnte wie folg
t aussehen
bbCode Benutzung:
[lightbox]{URL}[/lightbox]
HTML-Ersetzung:
Code: Alles auswählen
<img src="{URL}" style="max-height:144px;cursor:pointer;" alt="*" onclick="img_src=$(this).attr('src');$(this).next('.overlay_bg').fadeIn('slow');$(this).next('.lightbox_image').attr('src',img_src);" />
<div class="overlay_bg" style="background:beige;height:100%;width:100%;position:fixed;top:0;left:0;display:none;z-index:4444;">
<div style="position:absolute; left:0;top:0;right:0;bottom:0;width:100%;height:100%;">
<img class="lightbox_image" src="{URL}" style="position:relative;left:8%;top:4%;right:8%; max-width:84%; max-height:92%;" alt="*" />
<img onclick="$(this).closest('.overlay_bg').fadeOut('slow');" style="float:right;position:absolute;top:2%;left:6%;cursor:pointer;" src="data:image/png;base64,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" alt="X" />
</div>
<script type="text/javascript">
// <![CDATA[
if (typeof jQuery == 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "http://code.jquery.com/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
};
// ]]>
</script>
</div>
Tipp-Anzeige:
Benutzung: [lightbox]Bild-Link[/lightbox] - (Eine Bild-URL in den Code einfügen)
Beim Verfassen anzeigen: Häkchen bei JA, wenn man eine Schaltfläche für diesen bbCode im Beitragseditor anzeigen möchte.
Demo mit 2 Bildern:
http://bild4.bplaced.net/phpbb/viewtopi ... n-f=5&t=73
Man kann selbstverständlich beliebig viele Bilder nebeneinander setzen, die dann mehrzeilig angezeigt werden, sofern sie nicht alle in eine Zeile passen.
LG
Re: Bilder nebeneinander zeigen
Verfasst: 14.11.2014 23:52
von MTT
Hallo HabNurNeFrage,
ja im Beitrag, sonst an keiner anderen Stelle.
Ich habe den bbcode eingebaut, ging gut und war leicht.
Dank deiner Hilfe.
Ich hätte aber noch eine Frage dazu : Was müsste im HTML-Code geändert werden um die vorhanden Bilder ( schon ins Forum geladen) in die lightbox zu bekommen.
Herzlichen dank für deine Hilfe und liebe Grüße,
M.
Re: Bilder nebeneinander zeigen
Verfasst: 15.11.2014 10:51
von HabNurNeFrage
Hi,
kommt drauf an, wie die Bilder eingebunden sind.
Am Einfachsten ist es, wenn immer Du auf einen Beitrag mit anders eingebundenen Bildern - z.B. mit [ url ] oder [img ] - stößt, kurz auf ändern klicken und den bbCode anpassen.
LG
Re: Bilder nebeneinander zeigen
Verfasst: 15.11.2014 12:46
von MTT
Danke HabNurNeFrage,
Du hast mir sehr geholfen, nun hab ich verstanden wie ich die lightbox bedienen soll.
Herzlichen Dank sagt,
M.