Threesixty-slider: jQuery-Plugin für 360°-Ansichten
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.