ThickBox 2.1 - bearbeitet zur Verwendung in Sefrengo
Version 1.0.1 erstellt 08.12.2006
Zur Verwendung des JQuery Plugins
ThickBox im Sefrengo-Dateimanager sind einige
Anpassungen nötig geworden. Dies hier ist meine Test- und
Demoseite.
Wie es ausschaut wird das in Sefrengo nicht übernommen, man zieht echte
PopUps vor, schade. Aber egal, es kann genausogut auf jeder anderen
Webseite eingesetzt werden. Wie, steht weiter unten.
Es folgt eine Liste mit Links die auf verschiedene Dateitypen verweisen. Klickt sie der Reihe nach an um die Wirkung sehen zu können.
-
Media
- country.swf - SWF-Datei - Flash-Video
- diables.mov - MOV-Datei - Apple-QuickTime
- history.wmv - WMV-Datei - Windows-Media
- 43.AVI - AVI-Datei - Windows-Media
-
Einzelbild
- Einzelbild
-
AJAX - Seiten intern
- index1.html - HTML-Datei
- sitemap.xml - XML-Datei
-
PDF-Dateien - echtes PopUp (window.open)
- test.pdf - PDF-Datei
-
Alle Anderen
- text.xls - Excel-Datei
- fileman_1.0.1.zip - ZIP-Archiv
Bisher implementiert
.swf .mov .wmv .avi öffnet sich im simuliertem
PopUp
.jpg .jpeg .png .gif .bmp öffnet sich im simuliertem
PopUp
.htm .html .xml öffnet sich per AJAX im simuliertem
PopUp
.css .txt .php öffnet sich in einem IFrame
.pdf öffnet sich im echtem PopUp welches per
window.open() erzeugt wird
Alle anderen, Standardaktion des Browsers
-
Anwendung
- Letzte Version von JQuery besorgen.
- Von hier das Script ziehen. Inhalt jquery_box.js, index.html, index.css, ie7.css und loadingAnimation.gif
- Beide Javascripts in den Head einbinden, erst die jquery.js danach die jquery_box.js
- Inhalt von index.css in deine CSS übernehmen. Eventuell IE-Hacks per Conditional Comments auslagern. Der Einfacheithalber hier nicht geschehen. ie7.css nicht vergessen!
- loadingAnimation.gif im gleichen Verzeichnis wie die CSS ablegen. Oder den Pfad in index.css den Gegebenheiten anpassen.
- Links bei welchem das Script angewendet werden soll mit class="thickbox" versehen. Hat der Link schon eine Klasse, es müsste auch so klappen, class="alteklasse thickbox". Ungetestet, aber laut Beschreibung möglich
- Du kannst dem Link auch noch zusätzlich einen Title geben, der wird in der Thickbox als Text mit ausgegeben.
- Es schadet nicht Links die nicht unterstützt werden auch mit der Klasse zu versehen, sie werden wie normale Links behandelt.
- Achtung!!! Der QuickTimePlayer macht im IE Probleme, das Video wird in der linken oberen Fensterecke angezeigt, also außerhalb der Box.
- Zum aktivieren der Galerieansicht (Bilder), die Links die zu einer Galerie gehören sollen mit rel="irgendwas" versehen. Soll auf der gleichen Seite eine weitere Galerie verwendet werden einfach rel="anderes" angeben.
- fertig
-
Änderungen im Vergleich zum Original
- keine Parameter bei Aufruf der URL, Unterscheidung nach Suffix (*.suffix)
- maximale PopUp-Größe wird im Script angegeben
- bei kleinerem Fenster als max. PopUp-Größe wird letzteres angepasst
- Tastaturbedienung, ESC schließt PopUp, bei Galerieansicht Sprung zum nächstem (Pfeil rechts) vorigem (Pfeil links)
- bei Fenstervergrößerung mit PopUp dehnt sich der transparente Hintergrund aus
- weiß nicht mehr, hab bestimmt was vergessen
Was fehlt noch? Welche Dateien gehören noch aufgenommen?
Wie könnten sie aufgerufen werden? Hast du Anregungen, Fragen zum Script?
kontakt.php
Natürlich auch in einer Thickbox.
-
Veränderungen - ChangeLog
- Version 1.0.2 vom 03.12.2009
-
Bugfix: TB_TempArray = $("a[@rel="+imageGroup+"]").get(); in jquery_box.js
geändert zu TB_TempArray = $("a[rel="+imageGroup+"]").get();
Anpassung nötig wegen Selectoränderung in JQuery. - Version 1.0.1 vom 08.12.2006
- case sensitive berücksichtigt (.JPG vs. .jpg)
- Filetyp .avi wird im Player geöffnet
- kleinere CSS-Optimierungen
- PHP-Dateien werden im IFrame geöffnet
- Download aktualisiert
- JQuery Version 1.0.3 (Rev. 501) wird verwendet
- IE7 musste eine Extra-CSS verpasst bekommen, siehe ie7.css
zurück zur HP
Copyright © 2006 Olaf Bosch Lizenz: MIT http://www.opensource.org/licenses/mit-license.php
+ GPL http://www.opensource.org/licenses/gpl-license.php