Rotating Photo gallery on web page with Ajax & Express

Create a static page called gallery.html in the public folder. JavaScript inside sends an AJAX request when the the page is loaded, and every 2s after, to the route for the path /images.json. When the AJAX response is received, use the response data to

display an image on the page whose src is the URI field of the response object, and whose alt-text is the description field.
display a paragraph underneath the image whose contents is the description field of the response object.

<!-- gallery.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
  <img id="gallery-image" src="" alt="">
  <p id="image-description"></p>

  <script>
    $(document).ready(function() {
      // Function to update the image and description
      const updateImage = () => {
        $.ajax({
          url: '/images.json',
          type: 'GET',
          dataType: 'json',
          success: function(data) {
            const imageElement = $('#gallery-image');
            const descriptionElement = $('#image-description');

            imageElement.attr('src', data.uri);
            imageElement.attr('alt', data.description);
            descriptionElement.text(data.description);
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', textStatus, errorThrown);
          }
        });
      };

      // Initial request
      updateImage();

      // Request every 2 seconds
      setInterval(updateImage, 2000);
    });
  </script>
</body>
</html>

Content of the server6.js

const express = require('express');
const app = express();
const port = 3000;

// Array of image objects
const images = [
  {
    "uri": "images/strawberry.jpg",
    "description": "Strawberry"
  },
  {
    "uri": "images/orange.jpg",
    "description": "Orange"
  }, 
  {
    "uri": "images/banana.jpg",
    "description": "Banana"
  }, 
  {
    "uri": "images/pineapple.jpg",
    "description": "Pineapple"
  },   
  {
    "uri": "images/cherry.jpg",
    "description": "Cherry"
  }
];

let currentIndex = 0; // Keep track of the current index

// Route handler for /images.json
app.get('/images.json', (req, res) => {
  const image = images[currentIndex];
  currentIndex = (currentIndex + 1) % images.length; // Cycle through the array

  res.json(image);
});

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

The appropriate file structure should resemble the following:

- public
  - gallery.html
  - images
    - strawberry.jpg,orange.jpg, banana.jpg, pineapple.jpg, cherry.jpg
  - js
    - jquery-3.7.1.min.js
- server6.js

Run the Express application by executing the following command in the Ubuntu terminal:

node server6.js

Make sure both Orange Pi and PC have the same subnet and connect to the same router or network switch. On the PC’s web browser, enter the following URL where 192.168.21.26 is the IP address of the Orange Pi.

http://192.168.21.26:3000/gallery.html

Rotating Photo gallery on web page with Ajax & Express

Related posts: