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

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? Bitte liken und sharen. Danke!

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.