Haumis wbb hilfe | Codeschnipsel | Ansicht der Dateianhänge

Haumis wbb hilfe » Veränderungen » Codeschnipsel » Ansicht der Dateianhänge

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen

Ansicht der Dateianhänge

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

ersatzspieler
unregistriert

Ansicht der Dateianhänge

Beitrag Nr.: 1

Zitatantwort auf diesen Beitrag erstellen

Ich habe mal wieder eine neue Kleinigkeit die vielleicht auch noch andere wbb2 Besitzer Gebrauchen können.

Es handelt sich um eine sogenannte Lightbox.

Wenn man die Grafik des Dateianhanges anklickt geht nicht wie normal eine neues Fenster auf wo dann das Bild zu sehen ist sondern das aktuelle Fenster verdunkelt sich und zeigt nur noch das Bild klar.

Es werden sämtliche Dateianhänge geladen die sich auf der Seite des jeweiligen Themas befinden, wenn man dann ein wenig mit der Maus über das geladene Bild geht tauchen an den Seiten des Bildes dann Links auf wo man zwischen den einzelnen Bildern wechseln kann.

Der Einbau
Backup machen!!!

Als erstes muss sich die .zip Datei vom programmierer geholt werden, klicke auf den folgenden Link. Ein wenig runter scrollen und dann auf Download.

Lightbox v2.04

http://www.huddletogether.com

Datei entpacken und die Ordner auf deinen Webspace laden, natürlich in den selben Ordner wo auch dein Forum liegt.
Die index.html NICHT mit hochladen!

Nun gehe in dein ACP --> Templates bearbeiten --> headinclude

SUCHE :

code:
1:	$css

Füge DARÜBER: EDIT: In der Lightbox v2.04 gilt ein neuer Code, habe ihn hier angepasst.

code:

1:
2:
3:
4:
5:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Speichern.

Bei folgenden Template gehe ich von einem nicht bearbeitet template aus, solltet ihr das Template schon bearbeitet haben müsst ihr es dementsprechend anpassen. Es muss nur etwas im a TAG geändert werden.

Öffne nun das thread_attachmentbit_show_thumbnail template und ersetze den Inhalt mit folgendem:

code:

1:

<a href="attachment.php?attachmentid=$attachment[attachmentid]{$SID_ARG_2ND}" rel="lightbox[roadtrip]"><img style="padding-bottom: 3px;" src="attachment.php?attachmentid=$attachment[attachmentid]&amp;thumbnail=1{$SID_ARG_2ND}" border="0" /></a> <if($thumbnailNewline)><then><br /></then></if>

Speichern.

Solltet ihr mehr als einen Style haben und in den anderen Styles sind die oben genannten Templates vorhanden müssen auch diese angepasst werden.
Fertig.

Freuen.

Viel Spass mit !!!

23.08.2009 23:57

ersatzspieler
unregistriert

Beitrag Nr.: 2

mal probiert zu übersetzen hoffe das Hilft Usern die nicht so mit Englich am Hut haben !

So verwenden Sie:
Teil 1 - Setup

1. Lightbox v2.0 nutzt das Prototype Framework und Scriptaculous Effects Library. Sie benötigen, um diese drei Javascript-Dateien in Ihrem Kopf.

<script type="text/javascript" src="js/prototype.js"> </ script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"> </ script>
<script type="text/javascript" src="js/lightbox.js"> </ script>

2. Fügen Sie die Lightbox CSS-Datei (oder fügen Sie Ihre aktive Stylesheet mit der Lightbox styles).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" /> media="screen"

3. Überprüfen Sie die CSS und stellen Sie sicher, dass die betroffene prevlabel.gif und nextlabel.gif Dateien werden in die richtige Lage. Also, stellen Sie sicher, dass die loading.gif und closelabel.gif Dateien als in der Nähe, auf der Spitze des lightbox.js Datei in die richtige Lage.

Teil 2 - Aktivieren

1. Add a rel = "lightbox" Attribut zu jedem Link-Tag, um die Lightbox. Zum Beispiel:

<a href="images/image-1.jpg" rel="lightbox" title="my caption"> Bild # 1 </ a>

Optional: Mit dem Titel-Attribut, wenn Sie wollen zeigen, eine Beschriftung.
2. Wenn Sie eine Reihe von Bildern, die Sie möchten Gruppe, folgen Schritt, aber zusätzlich auch eine Gruppe Name in eckigen Klammern in den Attribut rel. Zum Beispiel:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]"> Bild # 1 </ a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]"> Bild # 2 </ a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]"> Bild # 3 </ a>

Keine Grenzen für die Anzahl der Bilder pro Seite legt, oder wie viele Bilder sind in jedem Satz. Go Nüsse!

24.08.2009 00:05

Baumstruktur | Brettstruktur

Gehe zu:

Haumis wbb hilfe » Veränderungen » Codeschnipsel » Ansicht der Dateianhänge

Views heute: 9.950 | Views gestern: 43.975 | Views gesamt: 71.457.815

Boardregeln Impressum & Haftungsauschluss Datenschutzerklärung

Top

Top