How to make 'SpriteSpin' load a specific image as the first image on load?

Question

I am trying to create a 360 degree view with the help of a basic SpriteSpin API. It works fine but I have an additional requirement that I need to load a particular image as the first image/ landing image. By Landing image I mean that, when the page loads this image should be visible and after that, the animation should continue from that image.

For example:

var imageSrcList = [
  "folder/image_1.jpg",
  "folder/image_2.jpg",
  "folder/image_3.jpg",
  "folder/image_4.jpg",
  "folder/image_5.jpg",
  "folder/image_6.jpg",
  "folder/image_7.jpg",
  "folder/image_8.jpg",
  "folder/image_9.jpg"
];

$('.container').spritespin({
  source: imageSrcList,
  sense: -1,
  animate: false,
  plugins: ['360', 'drag', 'wheel'],
  wrap: isWrap
});

In the above example, on load, the 360 degree view starts from the first image ie image_1.jpg . I want the 5th image, image_5.jpg , to be seen on page load and continue the animation from there on.

On right swipe i get image_5.jpg --> image_6.jpg --> image_7.jpg and so on. On left swipe i get image_5.jpg --> image_4.jpg --> image_3.jpg and so on.

Please help me in this regard.

Answer 1

var index = 4; $('.container').spritespin({ source: imageSrcList, sense: -1, animate: false, plugins: ['360', 'drag', 'wheel'], wrap: isWrap, frame : index });

Adding frame : index did the trick. This index is the index of the image (which we want to load first) in the array imageSrcList