Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

4 Reaktionen
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.

Tjark

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

DerFreeman

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

Jost

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

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst