Are image collections featuring the <img> tag available?

Question

Are image collections featuring the <img> tag available?

I am working on a website project and I'm looking for a way to create a gallery with a group of photos. The challenge is that I am using Spring MVC, which means regular js and jquery plugins may not work with my 'img src..' tags. Are there any specific plugins or libraries that are compatible with this setup? If not, I would appreciate any suggestions or alternative solutions. Here is the html code for reference:

<div id="img-slider">

                <img class="slider-img" src="/LBProperties/img/bisc.jpg"/>
                <img class="slider-img" src="/LBProperties/img/bisc1.jpg"/>

</div>

Any help would be greatly appreciated! Thank you!

javascript jquery html css

Answer 1

Answer №1

To achieve the effect of hiding all images with CSS, use the following code:

img {
  width: 100px;
  height: 100px;
  display: none;
}

Access the image elements using handlers:

var slider = document.querySelector('#img-slider');
var images = slider.getElementsByTagName('img');

Initialize the index variable to 0:

var index = 0;

Show the first image by setting its "display" property to 'block':

images[index].style.display = 'block';

Include a button in your HTML structure:

<div>
<button id="next">Next</button>
</div>

Retrieve the button element using script and attach a click event handler to it:

var button = document.querySelector('#next');

button.addEventListener('click', function() {
  for (var ix = 0; ix < images.length; ix++) {
    images[ix].style.display = 'none';
  }

  index++;
  if (index >= images.length) index = 0;
  images[index].style.display = 'block';
});

The click event handler cycles through the images, hides them, increments the index value, ensures that the index does not exceed the number of images (resetting it to 0 if necessary), and then displays the next image.

Here is the link to see all the code put together: https://jsfiddle.net/subterrane/osszqoLe/

Answer 2

To achieve the effect of hiding all images with CSS, use the following code:

img {
  width: 100px;
  height: 100px;
  display: none;
}

Access the image elements using handlers:

var slider = document.querySelector('#img-slider');
var images = slider.getElementsByTagName('img');

Initialize the index variable to 0:

var index = 0;

Show the first image by setting its "display" property to 'block':

images[index].style.display = 'block';

Include a button in your HTML structure:

<div>
<button id="next">Next</button>
</div>

Retrieve the button element using script and attach a click event handler to it:

var button = document.querySelector('#next');

button.addEventListener('click', function() {
  for (var ix = 0; ix < images.length; ix++) {
    images[ix].style.display = 'none';
  }

  index++;
  if (index >= images.length) index = 0;
  images[index].style.display = 'block';
});

The click event handler cycles through the images, hides them, increments the index value, ensures that the index does not exceed the number of images (resetting it to 0 if necessary), and then displays the next image.

Here is the link to see all the code put together: https://jsfiddle.net/subterrane/osszqoLe/

Are image collections featuring the <img> tag available?

Answer №1

Similar questions

Sending information from an AngularJS selected item to an edit form

Adjust the color of the text in the Stepper component using React Material UI

Automatically Refresh a Div Element Every 5 Seconds Using jQuery's setInterval() Function

Activate trust proxy in Next.js

Submit Button Not Responding on Mobile Device

IE11 is throwing an error due to an unexpected quantifier in the regular expression

Utilizing JavaScript for validation on an ASPX page within Visual Studio

Prevent Float Filtering in AngularJS

Managing large datasets effectively in NestJS using fast-csv

Validate the Vuetify data table by retrieving data with a fetch request

AngularJS: iterating through POST requests and passing each index into its corresponding response

Tips for retrieving multiple values or an array from an AJAX request?

Bootstrap table exceeds the boundaries of the smartphone screen

Real-time data updates not working in jQuery data table

Tips for ensuring all data is downloaded in Firebase (Firestore) Storage before proceeding?

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

Tips on halting the current animation and modifying styles upon hovering

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Why do static files in Node.js + Express.js on Windows take up to two minutes to load?

While executing a for loop, the variable $.ajax is found to be null in Javascript