Also, fangen wir mal an.
Ich gehe jetzt mal von der thickbox aus.
1. jQuery downloaden
Die Thickbox benötigt die JavaScript-Bibliothek jQuery.
Rechtsklick -> Ziel speichern unter...
jquery.com/src/jquery-latest.pack.js
Dann die runtergeladene Datei dann in deinen Design-Ordner einfügen.
2. Thickbox downloaden
Rechtsklick -> Ziel speichern unter...
jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js
jquery.com/demo/thickbox/thickbox-code/thickbox.css
jquery.com/demo/thickbox/images/loadingAnimation.gif
jquery.com/demo/thickbox/images/macFFBgHack.png
Diese Dateien dann ebenfalls in deinen Design-Ordner kopieren (dort, wo auch die index.htm ist)
3. Einbinden der Skripte und des Stylesheets
Öffne deine index.htm und füge folgendes über </head> ein:
<script type="text/javascript" src="include/designs/DESIGNNAME/jquery-latest.pack.js"></script>
<script type="text/javascript" src="include/designs/DESIGNNAME/thickbox-compressed.js"></script>
<link rel="stylesheet" href="include/designs/DESIGNNAME/thickbox.css" type="text/css" media="screen" />
Aber Achtung, du musst hier noch DESIGNNAME mit dem Namen des Ordners deines Designs ersetzen.
4. Änderungen an der wars.php
Die Thickbox sollte jetzt, sofern man Bildern die Klasse "thickbox" zuweist, auf der ganzen Seite funktionieren. Also ändern wir jetzt die wars.php bzw. die Ausgabe der Screenshots.
Hierfür öffnen wir die include/contents/wars.php und führen folgende Änderungen durch:
$row['mappics1'] = '<a href="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" target="_blank" style="padding:2px;"><img src="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" alt="Plant '.$row['mnr'].'" width="100" height="80" border="0" /></a>';
zu
$row['mappics1'] = '<a class="thickbox" href="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" rel="screenshots" style="padding:2px;"><img src="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" alt="Plant '.$row['mnr'].'" width="100" height="80" border="0" /></a>';
und
$row['mappics2'] = '<a href="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" target="_blank" style="padding:2px;"><img src="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" alt="Plant '.$row['mnr'].'" width="100" height="80" border="0" /></a>';
zu
$row['mappics2'] = '<a class="thickbox" href="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" rel="screenshots" style="padding:2px;"><img src="include/images/wars/'.$wid.'_'.$row['mnr'].'.'.$v.'" alt="Plant '.$row['mnr'].'" width="100" height="80" border="0" /></a>';
Das sollte denke ich alles sein, hoffe ich habe nichts vergessen.
