What steps can I take to transform these two fixed images into an array of multiple images?

Question

What steps can I take to transform these two fixed images into an array of multiple images?

After coming across this Pen a while ago, I had it on my to-do list and finally decided to work on it. However, my coding knowledge is not as sharp as it used to be, and I'm currently struggling with transforming it from two hardcoded images to a dynamic array of images.

If you're interested, here is the Pen

I attempted to add:

var slide3 = new Slide(width, height, 'middle');
    var l3 = new THREE.ImageLoader();
    l3.setCrossOrigin('Anonymous');
    l3.load('/assets/ScreenSaver/space3.jpg', function(img) {
        slide3.setImage(img);
    })
        
    root.scene.add(slide3);

However, it seems that just adding this code snippet is not enough; it appears that I need to include an additional control variable.

I would appreciate any tips or advice on how to proceed with this.

javascript canvas three.js gsap

Answer 1

Answer №1

By utilizing this method, an individual was able to accomplish the task in React, and fortunately for me, I also have the same goal.

Check out the solution here

loadNextImages (images, index) {
let first = index
let second
const tmp = (first + 1) % (images.length)
if (index % 2 === 0) {
  second = tmp
} else {
  second = first
  first = tmp
}
this.slide0.setImage(images[first])
this.slide1.setImage(images[second])
return tmp

Answer 2

By utilizing this method, an individual was able to accomplish the task in React, and fortunately for me, I also have the same goal.

Check out the solution here

loadNextImages (images, index) {
let first = index
let second
const tmp = (first + 1) % (images.length)
if (index % 2 === 0) {
  second = tmp
} else {
  second = first
  first = tmp
}
this.slide0.setImage(images[first])
this.slide1.setImage(images[second])
return tmp

Answer 3

Answer №2

If you want to include another slide, follow these steps:

      var slide3 = new Slide(width, height, 'in');
  var l3 = new THREE.ImageLoader();
    l3.setCrossOrigin('Anonymous');
    l3.load('https://example.com/another-image.jpg', function(img) {
        slide3.setImage(img);
    })

root.scene.add(slide3);
  tl.add(slide3.transition(), 0);

Don't forget the last line. Test it out with an additional image by clicking this link:

https://example.com/codepen-link

Answer 4

If you want to include another slide, follow these steps:

      var slide3 = new Slide(width, height, 'in');
  var l3 = new THREE.ImageLoader();
    l3.setCrossOrigin('Anonymous');
    l3.load('https://example.com/another-image.jpg', function(img) {
        slide3.setImage(img);
    })

root.scene.add(slide3);
  tl.add(slide3.transition(), 0);

Don't forget the last line. Test it out with an additional image by clicking this link:

https://example.com/codepen-link

Answer 5

Answer №3

An efficient technique to handle this situation is by creating an array variable where each element represents the image source and then loading them dynamically. This approach eliminates the need to repeatedly write the chunk of code. By updating the image array, you can easily add new images, remove existing ones, or modify their order.

var images = ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/winter.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/spring.jpg'];
  
for (let x = 0; x < images.length; x++) {
  var slide[x] = new Slide(width, height, 'out');
  var l[x] = new THREE.ImageLoader();
  l[x].setCrossOrigin('Anonymous');
  l[x].load(images[x], function(img) {
    slide.setImage(img);
  })
  root.scene.add(slide);

  tl.add(slide[x].transition(), 0);
};

Answer 6

An efficient technique to handle this situation is by creating an array variable where each element represents the image source and then loading them dynamically. This approach eliminates the need to repeatedly write the chunk of code. By updating the image array, you can easily add new images, remove existing ones, or modify their order.

var images = ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/winter.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/spring.jpg'];
  
for (let x = 0; x < images.length; x++) {
  var slide[x] = new Slide(width, height, 'out');
  var l[x] = new THREE.ImageLoader();
  l[x].setCrossOrigin('Anonymous');
  l[x].load(images[x], function(img) {
    slide.setImage(img);
  })
  root.scene.add(slide);

  tl.add(slide[x].transition(), 0);
};

What steps can I take to transform these two fixed images into an array of multiple images?

Answer №1

Answer №2

Answer №3

Similar questions

Navigational link behavior in the React component with the <tr> element

What is the best way to navigate to the top of a form panel?

The mobile devices are not showing my HTML website

What is the best way to incorporate multiple versions of jQuery on one webpage?

Creating a custom route that is specific to a single ejs file

Assigning an array of objects within an AJAX request

Vue's dynamic component list now accurately removes incorrect HTML nodes

Comparing boolean values in React JS

How can I submit a form using Ajax and save the response data?

Add MySQL JSON data to an array

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

Steps for uploading an item to an API using an Excel document

Exploring the possibilities of combining AngularJS with a Bootstrap modal for a

Unable to receive acknowledgment from child component within Redux

What is the best way to ensure a function waits for a stable database connection before proceeding?

What causes the namespace to shift when utilizing npm for installing a library?

Reactjs - There was an error: $node.attr(...).tooltip is not defined

Tips for integrating AudioControl with Phonegap

Running intricate javascript/jquery/json code using an html checkbox

What is the best way to display a header element in front of an article element?