Bilder nebeneinander zeigen

[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.

[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 geeigneter bbCode könnte wie folgt 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

[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.

[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

[MTT]

Danke HabNurNeFrage,

Du hast mir sehr geholfen, nun hab ich verstanden wie ich die lightbox bedienen soll.

Herzlichen Dank sagt,
M.