ThreeSixty-Slider

360° Image Slider plugin v2.5.2

0%

Features

Since taking over this plugin, not only have we rewritten large chuncks to make this application quicker and more efficient, but we've also improved the responsive and fullscreen elements. Other features have also been added and we have more in the pipeline. Be sure to keep an eye on our development branch for a taste of things to come.

360 degrees

Provides you with the ability to view something a full 360 degrees.

FullScreen

Fullscreen with aspect-ratio in mind and all in one click.

Responsive

Fully responsive with any size parent and always with correct aspect-ratio.

Touch Enabled

Touch Enabled straight out of the box.

Position

Position your navigation bar in one of the corners or top or bottom center.

Custom Controls

With our really easy to use api you can make your own custom controls.

Default Configuration

The ThreeSixty-Slider is extremely easy to set up. Just insert the HTML snippet below into your page with the correct path to your threesixty css and javaScript files. Change "your-class-name" to the classname you wish to use.

Then add the javaScript example shown to your page just before the closing body tag or to a seperate javaScript file. Replace "your-class-name" with the classname you chose and change "your_variable" to your own choice. You can later use this variable to create custom navigation. Fill in the options according to your needs.

HTML

                                
<head>
<link href="path-to-threesixty.min.css" rel="stylesheet">
<script src="path-to-threesixty.min.js" type="text/javaScript"><script>
</head>

<div class="threesixty your-class-name">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>

JavaScript

                                
$(document).ready(function() {
    var your_variable = $('.your-class-name').ThreeSixty({
        totalFrames: 52, // total Integer of images
        endFrame: 30, // the end frame of auto spin animation, making the next image the one that starts
        currentFrame: 1, // the start frame of autospin
        imgList: '.threesixty_images', // selector for image list
        progress: '.spinner', // selector to show the loading progress
        imagePath:'assets/car/', // path to images
        filePrefix: '', // file prefix if any
        ext: '.png', // image extension
        height: 447,
        width: 1000,
        disableSpin: false, // to disable auto spin animation
        zeroPadding: false, // if your image files are zero padded
        navigation: true, // default navigation bar
        position: 'bottom-center' // positioning for your navigation
    });
});

Extended Configuration

Below is the full list of configuration values that you can pass in when you initialise 360 slider. This includes some of the features mentioned before. The other features are added by default. Beware that some of the features will reduce the browser compatibility of 360 slider. Click on the browser icons in the main menu for information.

#	Config	Default value	Type	Description
1	totalFrames	180	Integer	Set total number of frames used in the 360 rotation
2	currentFrame	1	Integer	Set the starting point of the auto spin on initilise
3	endFrame	180	Integer	Set the frame where you want the auto spin to stop
4	framerate	60	Integer	Framerate for the spin animation
6	filePrefix	''	String	File prefix for your images. If your file's name is foo-bar-001.png then filePrefix will be foo-bar-
7	ext	png	String	File extension of your images
8	height	300	Integer	Height of your images
9	width	300	Integer	Width of your images
10	style	{}	Object	Object container styles for the preloader similar to jQuery.css({})
11	navigation	true	Boolean	Set false if you don't want default navigation controls
12	position	top-right	String	Sets the position of the navigation bar within the slider. Choice of 'top-left', 'top-center,' 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'
13	autoplayDirection	1	Integer	Control the direction of the spin dependent on your images. You can use 1 or -1
14	drag	true	Boolean	Set false if you want to disable mouse and touch events on the slider
15	disableSpin	false	Boolean	Will disable the initial spin on load
16	zeroPadding	false	Boolean	Set true if your numbering is 0 padded to the same character length
17	responsive	false	Boolean	Enables full aspect-ratio responsiveness
18	fullscreen	false	Boolean	Set true to add a fullscreen icon to the navigation bar when clicked will put your slider in fullscreen
19	fSBackgroundColor	white	String	Sets the fullscreen background color
20	onReady	function() {}	Function	Callback triggers once all images are loaded and ready to render on the screen
21	playSpeed	100	Integer	Value to control the speed (in milliseconds) of play button rotation
22	zeroBased	false	Boolean	Zero based for image filenames starting at 0

Custom Controls

To use custom navigation put navigation: false, in your 360 options. You can then use the variable you used in the 360 initialisation to trigger the navigation commands via whichever link or button you choose. Just look at the basic example shown below.

0%

JavaScript

                                
$(document).ready(function() {
    var armani = $('.armani').ThreeSixty({
        totalFrames: 12,
        endFrame: 12,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath:'assets/armani-bag/',
        filePrefix: 'armani-bag-large-01-',
        ext: '.jpg',
        width: 1000,
        height: 1009,
        navigation: false,
        fullscreen: true,
        responsive: true,
        disableSpin: false,
        zeroPadding: true
    });

    $('.custom-play').on('click touch', function() {
        armani.play();
    });

    $('.custom-stop').on('click touch', function() {
        armani.stop();
    });

    $('.custom-next').on('click touch', function() {
        armani.next();
    });

    $('.custom-back').on('click touch', function() {
        armani.previous();
    });

    $('.custom-fullscreen').on('click touch', function() {
        armani.fullscreen();
    });
});

Loading with Ajax

This is quite simple to do and there are various methods in which you can carry this proceess out. I've opted to show the simplest method possible using jQuery.

Put the normal html snippet in a seperate html page with the correct class alongside your threesixty class. Put your javaScript 360 slider initialization in a function with your options set, and then just call the function at the end of your ajax function.

Seperate HTML file

                                
<div class="threesixty snow">
    <div class="spinner"></div>
    <ol class="threesixty_images"></ol>
</div>

JavaScript Function

                                
function threeSixtyCall() {
    var snowfall = $('.snow').ThreeSixty({
        totalFrames: 46,
        endFrame: 46,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.anigif',
        imagePath: 'assets/snow-2017/',
        filePrefix: 'SNOW-2017-',
        ext: '.png',
        width: 3600,
        height: 1800,
        navigation: true,
        position: 'bottom-center',
        fullscreen: true,
        responsive: true,
        disableSpin: false,
        autoplayDirection: -1,
        zeroPadding: true
    });
}

JavaScript Ajax Call

                                
$(document).on('click', 'a.ajaxSnow', function() {
    $.ajax({
        method: 'GET',
        url: 'snow.html',
        dataType: 'html',
        success: function(data) {
            $('.overlay').fadeIn('slow', function() {
                $('.ajaxLoad').html(data);
            });
        },
        complete: function() {
            threeSixtyCall();
        }
    });
});

More Examples

Below are a few examples I've prepared to show what can be done. These are all from Gold Medal runs from the Minneapolis X Games 2017 and were produced using FFMpeg. All of these are loaded via ajax so first is the link to the 360 slider and following that is the link to the video clip it was taken from. Just click on the images to view.

These examples were carried out in a different method as there are multiples of more or less the same process, so a short name was used to identify each item and stored in a data attribute on each image link along with the image amount in another. This identity name was used for the directory name, file prefix and element class making it simple to use as a variable to bring 5 initialization calls and 5 on clicks down to 1 function.