0%

    Full page scrolling

    This is a very basic demo for full page scrolling. I will be creating another standalone page to showcase the demo.

    HTML Snippet

    <div class="threesixty car">
        <div class="spinner">
            <span>0%</span>
        </div>
        <ol class="threesixty_images"></ol>
    </div>
    

    Javascript

    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: false,
    
      });
    }
    
    $(window).scroll(function(event) {
      var page_percentage, frame_value, page_offset;
      page_offset = $(window)[0].pageYOffset;
      if(page_offset) {
        if(page_offset > 700) {
          page_offset = 700;
        }
        page_percentage = page_offset / 700 * 100;
        frame_value = Math.abs(Math.floor(40 / 100 * page_percentage));
        slider.gotoAndPlay(frame_value);
      }
    });
    
    // Calculate the frame with window scroll
    
    //slider.gotoAndPlay(frame_value);
    
    View on Github Download v1.0.7

    This is a jQuery plugin to create 360 degree product image slider. The plugin is full customizable with number of options provided. The plugin have the power to display images in any angle 360 degrees. This feature can be used successfully in many use cases e.g. on an e-commerce site to help customers look products in detail, from any angle they desire.

    For support and question please contact at gaurav@jassal.me


    This plugin is supported in all browsers including our beloved IE 6

    Firebox Safari Chrome IE Opera