Entwicklung & Design

Threesixty-slider: jQuery-Plugin für 360°-Ansichten

360°-Ansichten sehen nicht nur cool aus, sie können im E-Commerce auch zu Kaufentscheidungen beitragen. Mit dem Threesixty-slider können schnell und unkompliziert Produktanimationen in Web-Projekte eingebunden werden. Wir stellen das Plugin vor.


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.

Weiterführende Links

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

7 Kommentare
Jost
Jost

Sehr schöne Überarbeitung eines, bereits vorher großartigen, Plugins.

Antworten
DerFreeman
DerFreeman

Sehr schön zu handeln und sehr schön anzusehen. Top.

Antworten
Tjark
Tjark

Schade das keine Sprites unterstützt werden. Ansonsten ganz nett :)

Antworten
Montviso
Montviso

Ä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.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung