Der Threesixty-slider ist ein Plugin für jQuery, mit dem man 360° Produkt-Slider und Animationen erzeugen kann.
Nach dem Einbinden von jQuery und der Plugin-Datei muss das Skript lediglich initialisiert und mit individuellen Einstellungen angepasst werden.
window.onload = init;
var car;
function init(){
car = $('.car').ThreeSixty({
totalFrames: 52, // Total no. of image you have for 360 slider
endFrame: 52, // end frame for the auto spin animation
currentFrame: 1, // This the start frame for auto spin
imgList: '.threesixty_images', // selector for image list
progress: '.spinner', // selector to show the loading progress
imagePath:'assets/car/', // path of the image assets
filePrefix: '', // file prefix if any
ext: '.png', // extention for the assets
height: 1000,
width: 447,
navigation: true
});
}<div class="threesixty car">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images"></ol>
</div>Das Plugiun erwartet die gesamte Anzahl der Frames, das End- und das Anfangs-Frame sowie den Pfad zu dem Ordner mit den für die Animation benötigten Bildern. Es können außerdem das Datei-Format und ein Präfix festgelegt werden. Um die Ausgabe des Plugins zu steuern, werden beim Aufruf die Elemente, in denen das Plugin die Ladestandsanzeige und die Ausgabe selbst einbinden soll, definiert.
Es können mehrere Slider auf einer Seite betrieben und eigene Kontroll-Elemente erzeugt werden. Auch das automatische Abspielen der 360°-Darstellung wird unterstützt. Threesixty-slider funktioniert außerdem auch auf mobilen Geräten (getestet mit iOS).
Erste Erfahrungen mit dem Threesixty-slider Plugin könnt ihr auf der Projekteseite von Threesixty-slider, bei GitHub oder im Hauseigenen Live Editor machen.
Bitte beachte unsere Community-Richtlinien
Ähm...blöde Frage:
AntwortenWo findet man eine Anleitung, wie die Fotos aufgenommen und bearbeitet werden müssen?
Ich finde nur die Anleitungen für Einrichtung des Scripts.
Schade das keine Sprites unterstützt werden. Ansonsten ganz nett :)
AntwortenSehr schön zu handeln und sehr schön anzusehen. Top.
AntwortenSehr schöne Überarbeitung eines, bereits vorher großartigen, Plugins.
Antworten