MyBB.de Forum

Normale Version: Lightbox 2-Einbau
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2 3 4

  1. Download: http://www.huddletogether.com/projects/lightbox2/
  2. Lade den Inhalt des Ordners images in den Ordner images des Forums.
  3. Lade die js/lightbox.js in den Ordner jscripts des Forums
  4. Erstelle ein Stylesheet in deinem Theme, das an die showthread.php und an die portal.php angeheftet wird und nenne es "lighbox.css".
    Inhalt:
    Code:
    #lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

    #imageData{    padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
    #imageData #caption{ font-weight: bold;    }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
  5. Template "showthread":
    Füge nach:
    Code:
    <script type="text/javascript" src="jscripts/thread.js?ver=1400"></script>
    das ein:
    Code:
    <script type="text/javascript" src="jscripts/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="jscripts/lightbox.js?ver=1400"></script>
  6. Template "portal":
    Füge nach:
    Code:
    {$header}
    das ein:
    Code:
    <script type="text/javascript" src="jscripts/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="jscripts/lightbox.js?ver=1400"></script>
  7. Template "postbit_attachments_thumbnails_thumbnail"
    Ersetze durch:
    Code:
    <a href="attachment.php?aid={$attachment['aid']}" target="_blank" rel="lightbox[post_{$post['pid']}]"><img src="attachment.php?thumbnail={$attachment['aid']}" class="attachment" alt="" /></a>&nbsp;&nbsp;&nbsp;
danke, hab dich in meinem updatethreat honoriert und verlinkt Smile
Super !!!
Vielen Dank Dragon Wink

Hätte da gleich noch eine Frage, denke es passt hier her.
Wenn jemand ein Bild mittels: [img]BILD[/img] Tag einfügt.
Ist es möglich das nur ein Thumbnail angezeigt wird und bei klick auf das dieses, wird es ebenfalls in der "Lightbox" geöffnet ?

Ich weiss nur es gab mal ein sehr gutes Plugin mit namen "ImageResizer", dieses hatte aber keine "Lightbox" unterstützung !
Dieses sehr gute Plugin funktioniert leider schon lange nicht mehr (nicht weiter entwickelt). Sad

Wäre echt Nice wenn jemand sowas zur hand hätte oder mir sagen könnte wo ich sowas ähnliches finde.

MFG DaStaFlexX
Dazu müsste man Dateien verändern, weshalb ich darauf verzichtet habe.
Super Anleitung - Danke!

Nur eine Frage, normalerweise verfärbt sich der Hintergrund schwarz, bei mir nicht. Wie kann man dieses einstellen
(15.09.2008, 16:28)DaStaFlexX schrieb: [ -> ]... Dieses sehr gute Plugin funktioniert leider schon lange nicht mehr (nicht weiter entwickelt) ...

http://mods.mybboard.net/view/image-resizer-&-optimizer
(15.09.2008, 20:10)En-Gedi schrieb: [ -> ]
(15.09.2008, 16:28)DaStaFlexX schrieb: [ -> ]... Dieses sehr gute Plugin funktioniert leider schon lange nicht mehr (nicht weiter entwickelt) ...

http://mods.mybboard.net/view/image-resizer-&-optimizer
Guten Abend Smile

Danke En-Gedi für die schnelle Antwort.
Ich werde mir das mal angucken !

Aber eigentlich habe ich folgendes Plugin von Cipher gemeint: http://mods.mybboard.net/archive/view/image-resizer
Das funktionierte leider nur noch mit den Anfangs Versionen von MyBB 1.2.x !
Last Updated: 24th September 2006 :undecided:
(lol... ist 2 jahre her)

Lightbulb Was natürlich der absolute Hit wäre, wenn das jemand wieder flott machen könnte !

Da würd ich wohl in die Luft gehen vor Freude !
...Ne jetzt mal ohne Flax und Krümel Big Grin

Der Autor hat wohl eh keine intresse mehr daran (leider).

Ist es möglich das alte Plugin für MyBB 1.4.1 wieder auf die Beine zu stellen ?

MFG DaStaFlexX
Das von mir verlinkte Plugin IST die Weiterentwicklung für MyBB 1.4 von Ciphers 1.2er Version!

Siehe dazu auch: https://www.mybb.de/forum/thread-20632.html
Oh, das sind ja gute Neuigkeiten Big Grin
Wunderbar, muss ich direkt ma testen !

Vielen Dank En-Gedi für deine Mühe Wink

grüsse DaStaFlexX

*EDIT*
Klappt wunderbar !

Nur etwas stört mich ein wenig, warum werden die Bilder in der Shoutbox nicht verkleinert ?
Ist ja auch ein [img]BILD[/img] Tag !

Kann man das vielleicht noch optimieren ?
Kann man bestimmt auch optimieren. Ich vermute, dass da irgendwo was in einer Datei der Shoutbox geändert werden muss. Aber da muss jemand anderes ran ... mit dem Thema "Shoutbox" habe ich mich noch nie beschäftigt.
Seiten: 1 2 3 4