Lightbox und Hoverbox

Der Artikel ist schon vor einiger Zeit entsanden und stellt wahrscheinlich nciht mehr den aktuellen Stand dar.

Lightbox

Die Einbindung ist unter http://www.lokeshdhakar.com/projects/lightbox2/ beschrieben.

Ausser den genannten Java-Scripts prototype.js, scriptaculous.js und lightbox.js müssen die anderen ins gleiche Verzeichnis kopiert werden.

Hoverbox

Im Gegensatz zur Lightbox ist Hoverbox http://sonspring.com/journal/hoverbox-image-gallery mit wenigen Klicks in Etomite eingebunden.

Die Standard-HTML-Formatierungen müssen noch aus der hover.css herausgelöscht werden. Ausserdem habe ich ein zweites Template erstellt, dass nur für die Hoverbox-Seiten das Stylesheet zusätzlich lädt.

Nachteil: Thumbnail und Preview sind die gleiche Image-Datei, daher sollte keine zu grossen Bilder verwendet werden. Durch das feste Seitenverhältnis kommt es vielleicht zu JPEG-Artefakten (bisher noch nicht aufgetreten).

Zunächst funktionierte das ganze im IE nicht sauber, das vergrösserte Bild wird nicht sauber in den Vordergrund geschrieben.

Die Erklärung hierfür ist unter http://www.ohne-css.gehts-gar.net/0023.php zu finden:

„Soweit die ‚Theorie‘. Der Internet Explorer hält sich daran leider nicht, weshalb wir für ihn den CSS-Code etwas tunen müssen: Anstelle der relativen Positionierung von li benötigt er diese Angabe bei a.
Und ohne die Angabe #galerie a:hover { z-index: 1;} würde er das Hover-Bild nicht komplett in den Vordergrund stellen.“

Die Hoverbox hat für den IE ein zusätzliches CSS definiert, was aber wohl nicht sauber eingebunden wird. Nachdem die Zusätze des IE-CSS ie_fixes.css in das normale hoverbox.css kopiert worden, hat es auch im IE funktoniert.

Lightbox und Hoverbox

Für eine meiner Websites habe ich Lightbox und Hoverbox kombiniert.

Dazu habe ich alle Bilder auf 800 x 600 reduziert (bzw. 600 x 800 bei Hochformat) komprimert. Zusätzlich habe ich eine weitere Version als Thumbnail 200 x 150 (immer Querformat) erzeugt.

Die Standard-Bilder kommen in einen Ordner. Die Thumbnails kommen in den Unterordner thumbnails.

Folgendes steht im Header (eingesteuert mit einer speziellen Etomite-Vorlage):

<link rel="stylesheet" type="text/css" href="./templates/default/main.css" />
<link rel="stylesheet" type="text/css" href="./templates/default/gallery.css" />
<link rel="shortcut icon" href="./favicon.ico" />
<script type="text/javascript" src="http://www.schlageter.ch/lightbox/prototype.js"></script>
<script type="text/javascript" src="http://www.schlageter.ch/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.schlageter.ch/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="http://www.schlageter.ch/lightbox/lightbox.css" type="text/css" media="screen" />

 

Die Gallerie wird z.B. mittels

<ul class="gallery">
<li><a rel="lightbox[roadtrip]" href="images/gallerie/schottland1/DSC05915.JPG" title="Glen Affric"><img src="https://www.it-zeugs.de/images/gallerie/schottland1/thumbs/DSC05915.JPG" alt="" /></a></li>
:
: </ul>
<p></p>
<p></p>
<p></p>

erzeugt.

Achtung!

Dieser Artikel wurde automatisiert vom alten CMS übernommen. Dort war er zuletzt am 08.07.2017 geändert worden. Bei der Konvertierung können sich Fehler eingeschlichen haben, wie zum Beispiel falsche Zeilenumbrüche, fehlende Bilder oder fehlende Zeichen. Wenn du einen solchen Fehler entdeckst, dann schreibe doch bitte einen Kommentar, damit ich das beheben kann.

Vielen Dank für deine Mühe.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.