10 jQuery Bildergalerie Plugins

admin — Tue, 24 Aug 2010 19:27:12 +0000

Bildergalerien kommen auf Websites immer wieder vor. Mit jQuery wird die Verwendung bzw. Einbindung immer einfacher.
Im folgenden Artikel möchte ich 10 jQuery Bildergalerie Plugins vorstellen:

Supersized

JQuery Lightbox

Galleria

Galleryview

s3Slider

slideViewer

Galleriffic

Nivo slider

Smooth Div Scroll

Easy Slider

Einstieg in jQuery

admin — Wed, 23 Dec 2009 18:01:31 +0000

Jquery ist ein frei verfügbares Javascript-Framework, welches das Entwickeln von JavaScript Anwendungen erleichtert.
Es gibt zwar noch andere Framworks, doch JQuery ist relativ einfach zu verstehen und bietet eine schlanke Syntax.
Ausserdem gibt es unzählig viele Plugins für verschiedene Ajax-Effekte, Bildergalerien, Navigationen, Slider, Tabs usw.

Hier eine Übersicht der Vorteile:
———————————————–
* schlanker Code im Vergleich zum purem JavaScript
* einfach zu erlernen
* Wiederverwendbarkeit
* viele Plugins / Tutorials etc

So, nun aber genung geredet. Fangen wir am besten mit einem einfachen Tutorial an.
Zuerst müssen wir uns auf die jQuery Seite begeben und die letzte Version downladen.
Jetzt erstellen wir ein leeres HTML Dokument und binden die “jquery.min.js” ein:


<html>
  <head>
    <title>jQuery Tutorial</title>
    <script src="jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h4><a href="#" id="toggle_link">Zeige mehr...</a></h4>
    <div id="show_more" style="display: none;">Lorem ipsum dolor 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </body>
</html>

Ich habe dem Dokument noch einen Link mit der ID “toggle_link” und einwenig Text in einem Div-Element mit der ID “show_more” hinzugefügt um diesen später per jQuery ansprechen zu können. Ausserdem würde mit dem inline Style “display:none;” das Div ausgeblendet.
Um mit der DOM Manipulaion beginnen zu können müssen wir zuerst jQuery aufrufen:

$(document).ready(function(){
  // jQuery-Code
});

Dieses bewirkt dass alle Funktionen innerhalb des jQuery Codes ausgeführt werden, sobald das komplette HTML Dokument (DOM) geladen würde. Für alle die es ein wenig schlanker haben möchten, können es wie folgt abkürzen:

$(function(){
  // jQuery-Code
});

Jetzt bauen wir einen einfachen “Toggle-Effekt” welcher den Text in dem Div ein- und ausblenden lässt.
Um die von uns gewollten DOM-Elemente anzusprechen, benutzen wir das Dollarzeichen ($) als ein Selektor.
Ein paar Beispiele dafür wären:

$("#id")
$(".klasse")
$("div, p, a, span, li")

Im Einsatz sieht es dann so aus:

<script type="text/javascript">
  $(function(){
    $("a#toggle_link").click(function(){
      $("div#show_more").toggle();
     });
  });
</script>

Wenn man jetzt auf den Link mit der ID “toggle_link” klickt, ruft man die Funktion “toggle” auf welche wieder das Div-Element mit der ID “show_more” manipuliert. Der “toggle” Befehl von jQuery sorgt dafür dass der Text ein- und ausgeblendet wird.

Hier das fertige Ergebniss (Link anklicken):

Zeige mehr…

CSSGURU.DE » jQuery

10 jQuery Bildergalerie Plugins

Einstieg in jQuery