What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

I'm currently working on creating a 360-degree view using the SpriteSpin API. Everything is functioning as expected, but I have an additional request. I need to specify a specific image to be the initial landing image when the page loads. The landing image should be visible first and then the animation should start from that point.

For instance:

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 example above, the 360-degree view starts with image_1.jpg when loaded. However, I want to display the 5th image, image_5.jpg, initially and continue the animation from there onwards.

When swiping right, it should show images in this order: image_5.jpg --> image_6.jpg --> image_7.jpg and so on. When swiping left, it should show images in this order: image_5.jpg --> image_4.jpg --> image_3.jpg and so forth.

I would greatly appreciate any assistance with this matter.

javascriptjqueryhtmlcss

Answer №1

let currentIndex = 4;
$('.container').spritespin({
  source: imageList,
  direction: -1,
  playAnimation: false,
  extensions: ['360', 'drag', 'wheel'],
  circularWrap: isCircular,
  initialFrame : currentIndex
});

The key was adding initialFrame : currentIndex. This current index corresponds to the position of the image we want to display first in the array called imageList.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an error in Discord.js: Undefined properties unable to be read (execute)

Here is the code snippet from my main file: const { Client, IntentsBitField, Collection, intents, SlashCommandBuilder } = require('discord.js') const { TOKEN, PREFIX } = require('./config.json') const fs = require('fs'); const ...

javascriptnode.jsdiscorddiscord.jstypeerror

Is there a way to customize Firefox's default styles similar to Chrome's?

Can you change the default styles of Firefox to match those of Chrome? ...

htmlcssgoogle-chromefirefox

Innovative react route

Currently, I am in the process of learning about dynamic react routes. In the code example I am working on, there are different buttons for each task. The goal is to render the WorkDetails component when a button is clicked. However, it seems to not be fun ...

javascriptreactjsreact-router-dom

Bootstrap column height problem arises when the second column contains added margin, padding, or is wrapped in another element

I am facing an issue with a two-column layout where one column serves as the page heading (left) and the other displays breadcrumbs (right). The problem arises when the first column fails to stretch its height fully due to padding or margin in the second c ...

htmlcssbootstrap-5

"Encountering a null value when trying to pass parameters via jQuery ajax

Today, I decided to try using jQuery ajax for the first time with a jscript ajax call. I attempted to pass two values from one JSP page to another. Here is my approach: JspPage1.jsp $(function(){ var val1="Some value1"; var val2="Some value2"; $.ajax({ur ...

jqueryajax

Angular 8: How to Filter an Array of Objects Using Multiple Conditions

I am faced with the following scenario where I need to filter an array of objects based on lineId, subFamily, and status. My current code successfully filters based on lineId, but now I also need to include a condition for subFamilyId. I have two specifi ...

javascriptangulartypescriptangular8

Store the selected checkbox values in an array when submitting in Ionic

One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...

javascriptangulartypescriptionic-framework

Creating distinctive, unchanging colors for individual ellipses within a collection in p5.js

It's clear that each ellipse is part of a wave object, with the fill color applied on every frame causing a blinking effect. I'm trying to assign a random color to each ellipse when it's drawn, so it maintains that fill color instead of chan ...

javascriptp5.js

The Jquery ajax call encountered an error due to a SyntaxError when trying to parse the JSON data, specifically finding an unexpected character at

I've developed a web application that utilizes just four scripts for dynamic functionality. Overview: Init.php = Database, index.php = webpage, api.php = fetches data from server/posts data to server, drive.js = retrieves information from api.php a ...

javascriptphpjqueryjsonajax

What is the reason behind JavaScript's restriction on using double comparison operators?

What is the reason behind javaScript not supporting double comparison? For example, in 64 < str.charCodeAt(i) && str.charCodeAt(i)<=77, why is it not possible to simplify it to 64 < str.charCodeAt(i)<=77? ...

javascriptcomparison-operators

My global variable keeps getting caught by the addEventListener function

My script does not use jQuery and has an addEventListener on a button click. The issue is that after the first run, I want to change the value of "sendingurl" to something else. However, even though sendingurl is updated with the new id value, it doesn&apo ...

javascriptnativeaddeventlistener

Tips for incorporating component templates into your Nuxt application

I am currently working on creating a dynamic header using Vue within a Nuxt application. However, I have encountered a couple of challenges: 1) I am struggling to populate the template in the original DOM with the content from an external file, which was ...

htmlvue.jsnuxt.js

Managing promises with mongoose - Best practices

I am new to using mongoose and I am trying to figure out how to save and handle promises in Node.js using a mongoose schema. In the example below, I am attempting to save data to a collection and handle any errors that may occur. model.js var mongoose = ...

javascriptnode.jsmongodbmongoose

Anomaly in Date String Comparison within Angular Controller

Having a puzzling issue when attempting to compare two date strings within my Angular Controller. It seems that the comparison is yielding unexpected results. To explain, I first convert today's date to a string ("2/5/2016") and then proceed to use it ...

javascriptangularjs

Using JavaScript regex to eliminate content enclosed in parentheses, brackets, and Cyrillic characters

Is there a way to transform (Test 1 / Test 2) [Test 3] Отдел / Here is title - subtitle (by Author) - 1234 (5678-9999), descriptions (best), more descriptions into Here is title - subtitle (1234) (descriptions) using a combination of JavaScript an ...

javascriptjqueryregex

Inject a value sent from response.render directly into the script tag

Below you will find a pug snippet. I am looking for a way to dynamically insert the user value into the chatConfig object. script. var chatConfig = { user : 'foo', pass : 'bar', } When rendering from my Express applicatio ...

javascriptnode.jsexpresspug

Are background images covering hidden text detrimental to accessibility?

Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...

htmlcssaccessibility

Issue with logging objects in an array within a for loop

I am having an issue with a JavaScript for-in loop. Why does console.log(user) display the number "0" when iterating through users? Is it indicating the index of the user object in the array? I would like to log each object individually... Thank you r ...

javascriptexpress

Would it be a security risk to share the Stripe charge ID and connected account ID with clients on the frontend?

I am currently making an ajax call to my backend and I am unsure whether it is secure to reveal the charge id and the connected account id on the client side. Just to clarify, there are no secret keys or sensitive information stored in the browser. Your ...

javascriptnode.jsajaxstripe-payments

The error message "Unexpected TypeError: useSearchParams either does not exist as a function or is not iterable in its return value

I'm currently facing a problem with my code, which results in the error message: "Uncaught Error: NextRouter was not mounted" appearing in the console. After some investigation, I discovered that with Next.js version 13 onwards, we should ...

javascriptreactjsnext.js