CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JovanIvanoski
JovanIvanoski

Reputation: 47

Image galleries with <img> tag?

I am building a website, and I need to 'implement' a gallery on a group of photos. Since I'm using Spring MVC, my images are with 'img src..' tag and regular js and jquery addons don't work. Is there any plugin/library that can help me do this? If not, suggestions for making my way around it are also welcome. Here is the html, if it can somehow help.

<div id="img-slider">

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

</div>

Thank you !

Upvotes: 1

Views: 83

Answers (1)

Will
Will

Reputation: 3241

You can hide all of the images with CSS:

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

Get handlers to the images:

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

Set an index to 0:

var index = 0;

Then show the first image:

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

Add a button to your HTML:

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

Get it with script and add a click handler:

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 handler loops through the images and hides them, increases the index, checks to make sure the index didn't go over the number of images (reset it to 0 if it does), then shows the next image.

Putting it all together:

https://jsfiddle.net/subterrane/osszqoLe/

Upvotes: 1

Related Questions