Threesixty-slider: jQuery-Plugin für 360°-Ansichten
• Lesezeit: 1 Min. Gerade keine Zeit? Jetzt speichern und später lesen
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
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
Sehr schöne Überarbeitung eines, bereits vorher großartigen, Plugins.
Sehr schön zu handeln und sehr schön anzusehen. Top.
Schade das keine Sprites unterstützt werden. Ansonsten ganz nett :)
Ähm…blöde Frage:
Wo findet man eine Anleitung, wie die Fotos aufgenommen und bearbeitet werden müssen?
Ich finde nur die Anleitungen für Einrichtung des Scripts.