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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Timo Schneider
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.