jQuery jCarousel-Skript

• April 26, 2024

jQuery hat das Hinzufügen von Bildern zu Websites zu einer einfachen Aufgabe gemacht. Es gibt viele jQuery-Skripte, die unter den MIT- und / oder GPL-Lizenzen veröffentlicht wurden. Bei den meisten handelt es sich um Plug-and-Play-Skripte (Plug-In-Skripte), für deren Verwendung oder Installation auf Ihrer Website keine Programmierkenntnisse erforderlich sind. Möglicherweise möchten Sie Ihren Design-Services jQuery-Skripte hinzufügen.

Ein solches jQuery-Skript von Jan Sorgalla ist jCarousel. Dieses Plug-In kann viele Anwendungen für Grafiken und Text enthalten. Die Hauptfunktion des Skripts besteht darin, Inhalte horizontal oder vertikal zu scrollen. Der Inhalt kann statisch sein oder dynamisch über Ajax, JavaScript, PHP oder Flickr geladen werden. Natürlich erfordert diese zweite Option die Kenntnis dieser Sprachen. jCarousel funktioniert auch mit Thickbox 3, sodass ein großes Bild in Thickbox geöffnet wird, wenn auf das Miniaturbild im Karussell geklickt wird.

Der größte Teil des Codes für das Skript wird im Abschnitt "Kopf" der Webseite referenziert. Sie benötigen die jQuery-Bibliothek sowie die jCarousel-Quellcode- und Stylesheet-Dateien. Das Schöne an diesem Plug-In ist, dass es von CSS "gehäutet" werden kann, um viele Looks zu erhalten. Der vom Skript zu scrollende Inhalt wird im Hauptteil der Webseite in einer grundlegenden UL-Liste platziert.

Sie haben verschiedene Möglichkeiten, das Skript zu konfigurieren, einschließlich des Hinzufügens einer benutzerdefinierten Animation und des Beschleunigens. Es kann mit Auto-Scrolling- oder Navigationsschaltflächen funktionieren. Ein weiteres nettes Feature ist, dass die Breite des Karussells automatisch an das Browserfenster angepasst wird. Es kann so konfiguriert werden, dass je nach Browsergröße mehr oder weniger Bilder angezeigt werden, oder es kann so konfiguriert werden, dass bei Bedarf eine festgelegte Anzahl von Bildern mit flexiblem Abstand zwischen den Bildern angezeigt wird. Sie können mehr als ein Karussell auf einer Seite haben und jedem eine andere Haut geben.

Die Integration mit dem Flickr-Fotostream und der Flickr-API ist eine nette Funktion, die in den meisten Skripten nicht zu finden ist. Es wurde getestet, um in mehreren Browsern zu funktionieren, einschließlich dem berüchtigten Internet Explorer 6.

Möglicherweise fragen Sie sich, warum Sie dies anstelle einer einfachen GIF-Animation verwenden, die Sie in Photoshop erstellen können. Der Hauptgrund ist die einfache Aktualisierung des Karussells nach der Installation. Es ist einfacher, den Inhalt in der UL-Liste zu wechseln, als jedes Mal ein neues GIF zu erstellen, wenn Sie einen anderen Satz von Bildern verwenden müssen.

//sorgalla.com/projects/jcarousel/

Video-Anleitungen: Typed.js - How to create a typing animation like a type writter with - HTML, CSS, Jquery || 2018 (April 2024).