Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Least: Responsive HTML5-Galerie für deine Webseite

Least ist eine HTML5- und CSS3-Galerie, die voll responsive ist. Anders als vergleichbare Galerien liefert Least die Bilder nicht in einem Overlay aus, sondern positioniert sie in einem Bereich überhalb der Thumbnails.

Least ist eine HTML5- und CSS3-basierte Galerie für euere Webseite. Die Vorschaubilder werden in einer Kachel-Ansicht dargestellt und können durch einen Klick geöffnet werden. Das angeklickte Bild öffnet sich dann, anders als bei anderen Galerien, wie Photobox oder Fresco, nicht in einem Overlay sondern im oberen Bereich der Webseite und zeigt das jeweilige Bild in voller Größe.

Unter dem Bild kann eine Beschreibung eingefügt werden. Auf Desktop-Geräten wird beim Hovern außerdem ein Teaser-Text angezeigt.

least_galerie
Die Least-Galerie in Aktion.

Das Einbinden des Skriptes ist in wenigen Schritten erledigt. Nach dem Download der zum Projekt gehörenden Dateien, wird die least.js und die least.css in den Header Bereich der Webseite, nach einer aktuellen Version von jQuery eingebaut. Optional kann das Lazyload-Plugin von jQuery hinzugefügt werden, um Bilder erst zu laden, wenn sie im Viewport sichtbar sind.

<!-- least.js CSS-file -->
<link href="css/least.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!-- least.js JS-file -->
<script src="js/least.js" defer="defer"></script>
<!-- Lazyload JS-file -->
<script src="js/jquery.lazyload.js" defer="defer"></script>

Alles, was das Script dann noch benötigt um eine schicke, responsive und flexibel anpassbare Galerie zu erstellen, ist eine unsortierte Liste mit den Bildern und Beschreibungstexten.

<ul id="gallery">
<li id="fullPreview"></li>
<li>
<a href="img/full/full_1.jpg"></a>
<img data-original="img/thumb/thumb_1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Ocean" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li>
<h2>Ocean</h2>
</li>
<li><p>View Picture</p>
</li>
</ul>
</div>
<div class="projectInfo">
<strong>
Monday, 14th April 2093:
</strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</li>
</ul>

Auf der Projektseite von Least könnt ihr das Skript in Aktion sehen und für euere Webseite downloaden.

Weiterführende Links

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Timo Schneider

Also wenn ich mir die Seite so mal auf dem N4 angucke muss ich sagen sind _alle_ Galerien mit overlay besser bzw. aus responsiver Sicht besser gestaltet.

Hier scrollt die Website immer wieder nach oben, zeigt das Bild, dann schliesst man das Bild und muss wieder nach unten scrollen um zurück zu kommen wo man war.

Sehr unpraktisch wie ich finde

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.