Aktuelle Version: 5.4.25 (Change Log)
Release Datum: November 8th, 2023
Download AJAX-ZOOM Software

AJAX-ZOOM Miniaturansichten Slider Erweiterung - axZmThumbSlider

Gepostet am 2019-02-20
Zuletzt editiert am 2019-02-21

Die AJAX-ZOOM axZmThumbSlider Miniaturansichten- und Content-Slider sind eine Komponente, die die Standardfunktionen des Zoom-Viewers erweitert. Es ist Teil des Download-Pakets. Die manuelle Handhabung ist die gleiche wie bei den meisten jQuery-Plugins. Innerhalb des AJAX-ZOOM-Kerns wird diese Komponente für vertikale, horizontale und Inline-Miniaturansichten verwendet. Der Slider wird auch in anderen AJAX-ZOOM-Erweiterungen verwendet, z.B. in der Hover-Zoom-Erweiterung. In diesem Beitrag können Sie verschiedene Implementierungen des Sliders anschauen, sowie die vollständige Dokumentation der Optionen und der API-Methoden vorfinden.

Ab AJAX-ZOOM Version 5.3.11 wurden die Demo und Dokumentation für die axZmThumbSlider Erweiterung aus dem AJAX-ZOOM-Erweiterungsverzeichnis des Kernpakets auf diese Seite verschoben. Wenn Sie zu dieser Seite weitergeleitet wurden, ist dies beabsichtigt.

Version der Erweiterung: 3.3
Datum der Erweiterung: 2021-01-27

Warum ein weiterer Thumbnails-Slider?

Vor Jahren haben wir das "jCarousel" Skript für die "externe Verwendung" bzw. Implementierungen außerhalb des AJAX-ZOOM-Viewers verwendet. Zu dieser Zeit gab es nichts, was viel besser war. "JCarousel" war jedoch schnell veraltet und das erste responsive Release von "jCarousel" erfüllte unsere Erwartungen nicht. Auch die Alternativen damals nicht.

Verglichen mit dem AJAX-ZOOM-Hauptskript sah ein "Miniaturbild-Slider" nach ein paar Zeilen aus. Daher haben wir uns entschlossen, so ein Plugin von Grund auf zu schreiben, um es zusammen mit AJAX-ZOOM generell zu verwenden, ohne dabei eine freie Codebasis zu verwenden bzw. zu editieren, wenn eine neue Funktion benötigt wird.

Aus der Perspektive eines Template Designers ist der resultierende axZmThumbSlider sehr einfach zu implementieren und leicht über Javascript und CSS zu konfigurieren. Es ist ansprechend und verfügt über alle erforderlichen APIs und Optionen, die ein Designer oder Codierer normalerweise für ein solches interaktives Element benötigen. Sie können es auch als "Content-Scroller" und nicht nur für die Miniaturbilder verwenden.

Heute ist diese Erweiterung für Miniaturansichten im nativen AJAX-ZOOM-Viewer implementiert, und wir verwenden sie auch für mehrere andere AJAX-ZOOM-Erweiterungen. Alle Erweiterungen, die diesen Slider für Miniaturansichten verwenden, verfügen über eine dedizierte Option, um die Optionen des Sliders zu durchzugeben. Sie können die Optionen des Sliders auch für AJAX-ZOOM Core Viewer einstellen. Weitere Informationen zum Einstellen der Optionen für AJAX-ZOOM finden Sie in diesem Beitrag.

In einigen dieser Erweiterungen ist es auch möglich, diesen Slider für Miniaturansichten zu deaktivieren und durch ein anderes Plugin zu ersetzen, welches die ul->li - Struktur verwendet. Eine solche Ersetzung ist jedoch etwas schwieriger und erfordert das Zuordnen der API-Methoden oder das Bearbeiten des Quellcodes der Erweiterungen. Daher ist es möglicherweise einfacher, uns mit der Anforderung einer fehlenden Funktion zu kontaktieren.

Der Slider verwendet CSS3-Transformationen und greift bei Browsern, die die Transformationen nicht unterstützen oder nicht gut funktionieren, auf standard Animationen zurück. CSS-Übergänge werden nicht zum Animieren des Schiebereglers verwendet. Es funktioniert auf Desktops und mobilen Touch-Geräten gleichermaßen gut. Außerdem läuft es schnell in den Leerlauf und geht daher sparsam mit Prozessor- oder GPU-Ressourcen um.

Slider Beispiele

Slider mit externen Bedienelementen / Demo einiger API Methoden

  • Some thumb description 1
  • Some thumb description 2
Externe
Bedienelemente
(interne Tasten replizieren)
scrollTo thumb [first] [4] [8 last] [8 middle] [8 first] [12] [last] [random]
scrollTo % [20%] [50% last] [50% middle] [50% first] [80%]
scrollTo px [200px first] [800px last] [800px middle] [800px first] [1400px]
scrollBy thumbs [-1] [1]
scrollBy % [20%] [-20%] [100%] [-100%]
scrollBy px [200px] [-200px] [500px] [-500px]
Handhabung der
Miniaturansichten
prependThumb appendThumb removeThumb (last) removeThumb (first) insertThumbAfter (1) insertThumbBefore (3) removeAllThumbs
Alle API-Methoden finden Sie unten auf dieser Seite.

Horizontaler Slider mit nur weniger Miniaturen, centerNoScroll Option eingeschaltet

Wenn die Höhe des Elements fehlt, versucht das Plugin es automatisch zu ermitteln und beschwert sich darüber in der Browserkonsole, falls verfügbar.

Horizontaler Slider ohne Schaltflächen, benutzerdefinierte Bildlaufleiste, von einem anderen Designelement umrahmt

Obwohl die Bildlaufleiste der nativen eines Browsers ähnelt, besteht sie aus reinem HTML und CSS. Daher können Sie es ohne Einschränkungen gestalten.

Slider für Miniaturansichten mit deaktivierter mouseWheelScrollBy Option und scrollBy: 2 über Schaltflächen

Mit der ausgeschalteten mouseWheelScrollBy bleibt der Seitenlauf nicht am Slider hängen. Diese Einstellung wirkt sich nicht auf Touch-Geräte aus.

Slider ohne Steuerelemente und aktivierter mouseFlowMode Option

Mit der eingeschalteten mouseFlowMode option, hängt die Bildlaufposition des Sliders von der Position des Mauszeigers über dem Slider ab. Diese Einstellung wirkt sich nicht auf Touch-Geräte aus.

Responsiver horizontaler Slider, schnelles pressScrollSpeed (20), mouseDrag Option ausgeschaltet

Wenn die mouseDrag Option deaktiviert ist, können Benutzer die Position im Slider nicht mit per "Drag & Drop" mit der Maus verändern. Diese Einstellung wirkt sich jedoch nicht auf Touch-Geräte aus. Bei berührungsfähigen Geräten ist die Wischgeste immer aktiviert!

Auf macOS Safari funktioniert die mouseDrag-Funktion erst, wenn Apple die Unterstützung von "PointerEvent" nicht als experimentelles Flag behandelt. Alle anderen großen Browser haben "PointerEvent" bereits implementiert. Wie Sie sehen, ist dies jedoch keine entscheidende Funktion.

Vertikaler Slider mit festen oder responsiven Höhe, Laufleiste links oder rechts

Vertikale Slider mit festen oder responsiven Höhe und Schaltfächen fürs Scrollen

Option contentMode - Beispiel für einen vertikalen Slider ohne Miniaturansichten und verschachtelten Miniaturansichten Slider darin

HTML Text Presents

Text text text text demo text text text demo text text demo text text demo text text text

Text demo text text text text text text text text text text text demo text text text demo text text text text text . Text text text demo text text text demo text text text text text text text text text text. Text text text text text text text text text text. Text text text demo text text text text text. Text text text text text text text text text. Demo text text text, text text texttext demo text text, text text text text demo text, demo text text text text text demo text text text, text. Text text text text text text. Ut felis.

Voilà - nested slider

Header Level 2

  1. demo demo text text, text demo text text.
  2. text text demo text demo text demo text text demo text text.
  • Demo text text text demo text text demo text text text demo text demo text text demo text
  • Text demo text text text text text demo text text. Demo text text demo text demo text text. Text text text demo demo text text text demo text text demo text text text demo text text text .
  • Text text demo text demo text text demo text text demo text text text demo text text text. Text text text demo text text demo text text text demo text text text text text text text. Text text demo text text demo text text text text demo text text text text text text text.
  • Text text text demo text text text demo demo text text text text demo text demo text text.

Demo text text demo text text text text text text text text text text text text. Text text demo text text demo text text text demo text text text demo text text text demo text text. Text demo text text demo text demo text demo text demo text text demo text text text text text text demo text text demo. Text text text demo text text demo text demo text text demo text text text text.

Text text demo text text demo text text demo text demo text text demo text demo text text. Text text text demo text text demo text text text. Text text text demo text text text text text. Text text demo text demo text demo text text. Text text text demo text demo text demo text text text text text text text text text text. Text text text text demo text text demo text text. Text text text text demo text text text text. Text text text text text demo text text text. Text text text text text text text text text text text text text text text text text text. Text demo text demo text demo text demo text text. Text demo text text demo text text text text. Text text demo text text text demo text text.

  • Text demo text demo text text demo text text text demo text demo text text demo text text
  • Text text demo text demo text demo text demo text demo text text text text text text demo. Text text text text text text text text text text demo text text text text text text text .
  • Text text text text demo text text text text text text text text text demo text demo text. Text demo text text text text demo text demo text demo text text demo text text text demo. Text text text text demo text text demo text text demo text text text text text demo text.
  • Text text demo text text text text demo text demo text demo text demo text demo text text.
Text demo text demo text text demo text demo text. Demo text demo text text text demo text demo. Text text text demo text text text text text. Demo text text text demo text text text text text text text text demo text text demo text. Demo text text text demo text text text text text. Text demo text text text text text text text. Demo text demo text text demo text demo text. Text text text text demo text text demo text text demo text text demo text text demo text. Text text demo text text text demo text text text. Text demo text text demo text text text text. Demo text text text demo text text demo text.

Wenn Sie dem Slider Inhalte hinzufügen oder daraus entfernen, werden die Bildlaufleiste und andere Funktionen sofort angepasst. Verschachtelte Slider werden unterstützt. Sie können die Bildlaufschaltflächen auch deaktivieren: die btn Option auf false stellen.

Vertikaler Slider mit mehreren Spalten (aktivierter multicolumn Option), Breite und Höhe responsiv

Todo: implement responsive grid system.

HTML Markup


			<div id="slider1" style="position: relative;">
				<ul>
					<li onClick="consoleLog('thumb 1')"><img src="/path_to/image_1.jpg"></li>
					<li onClick="consoleLog('thumb 2')"><img src="/path_to/image_2.jpg"></li>
					<li onClick="consoleLog('thumb 3')"><img src="/path_to/image_3.jpg"></li>
				</ul>
			</div>
		

Optionen

Die Optionen werden als JavaScript-Objekt an die jQuery.fn.axZmThumbSlider AJAX-ZOOM-Erweiterung übergeben, z.B.:


		jQuery('#slider1').axZmThumbSlider({
			thumbLiStyle: {
				width: 90,
				height: 120,
				marginBottom: 7
			},
			wrapStyle: {backgroundColor: '#FFFFFF'},
			scrollbar: true,
			firstThumb: 1,
			firstThumbPos: 'middle',
			firstThumbTriggerClick: false,
			firstThumbHighlight: true
		});
		

AJAX-ZOOM Beispiele

Einige der vielen AJAX-ZOOM-Beispiele, wo axZmThumbSlider Slider eingesetzt wird

example32
example25
example29_responsive_easy
example4

Comments (0)

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.

Um Live-Support-Chat nutzen zu können wird Skype vorausgesetzt.

Sollte Live-Support-Chat über Skype nicht sofort zu erreichen sein, dann hinterlassen Sie bitte im Skype eine Nachricht oder schreiben Sie uns eine Email über die Kontakt Seite.

Jede Anfrage wird beantwortet!

Live-Support-Chat