AJAX-ZOOM Miniaturansichten Slider Erweiterung - axZmThumbSlider
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.
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
|
Externe Bedienelemente |
|
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 textText 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
- demo demo text text, text demo text text.
- 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.
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
Comments (0)
Leave a 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!