Bilder nebeneinander zeigen

Fragen rund um die Installation, Administration und Benutzung von phpBB 3.1.x und höher und die Konvertierung zu phpBB 3.2.x.
Forumsregeln
Bitte im Thementitel den Präfix deiner phpBB-Version [3.1.x] oder [3.2.x] angeben.
MTT
Mitglied
Beiträge: 87
Registriert: 28.09.2014 14:47

Bilder nebeneinander zeigen

Beitragvon MTT » 14.11.2014 20:03

Hallo zusammen,

ich komme mit der nächsten Frage :oops:

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.
Noli umquam desinere!

Benutzeravatar
HabNurNeFrage
Ehemaliger
Beiträge: 1627
Registriert: 17.01.2010 20:22
Wohnort: An der Ostsee
Kontaktdaten:

Re: Bilder nebeneinander zeigen

Beitragvon HabNurNeFrage » 14.11.2014 21:06

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/viewtopic.php?-simple-jquery-lightbox-bbcode-ohne-datei-aenderungen-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
| HomeStory.org - the friendly Community | Forum für alle Lebenslagen | <"}))}~ | Nicht nachmachen: Meine phpBB Spielereien |
var shoppen = geld.replace (/geld/g, 'bloedsinn'); if (geld < 1) { return home; };

MTT
Mitglied
Beiträge: 87
Registriert: 28.09.2014 14:47

Re: Bilder nebeneinander zeigen

Beitragvon MTT » 14.11.2014 23:52

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.
Noli umquam desinere!

Benutzeravatar
HabNurNeFrage
Ehemaliger
Beiträge: 1627
Registriert: 17.01.2010 20:22
Wohnort: An der Ostsee
Kontaktdaten:

Re: Bilder nebeneinander zeigen

Beitragvon HabNurNeFrage » 15.11.2014 10:51

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
| HomeStory.org - the friendly Community | Forum für alle Lebenslagen | <"}))}~ | Nicht nachmachen: Meine phpBB Spielereien |
var shoppen = geld.replace (/geld/g, 'bloedsinn'); if (geld < 1) { return home; };

MTT
Mitglied
Beiträge: 87
Registriert: 28.09.2014 14:47

Re: Bilder nebeneinander zeigen

Beitragvon MTT » 15.11.2014 12:46

Danke HabNurNeFrage,

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

Herzlichen Dank sagt,
M.
Noli umquam desinere!


Zurück zu „Support-Forum“