Home » Web » Lightbox und Hoverbox
- Anzeige -
Software Asset Management beim Fachmann

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="images/gallerie/schottland1/thumbs/DSC05915.JPG" alt="" /></a></li>
:
: </ul>
<p></p>
<p></p>
<p></p>

erzeugt.



War der Artikel hilfreich? Ich freue mich sehr über Likes, Shares oder Links von Deiner Website darauf. Danke Dir.

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.