Vanilla Javascript image thumbnail gallery

[gisesonia]

I was trying to create a code of image gallery with just Javascript without plugin, but I didn’t find a tutorial that have thumbnails and when click substitute large image.

I tried with jquery, how can I change to javascript?

$('.thumb').click(function(event) {
            event.preventDefault();
            currentIndex = $(this).attr('data-indx');
        console.log($(this).attr('data-indx'));
            $('#tela img').remove();
            $('<img />')
            .attr('src', $(this).parent().attr('href'))
            .attr('alt', $(this).attr('alt'))
            .css('opacity', '0.3')
            .appendTo('#tela')
            .animate({opacity: 1 }, 2000);
    });

 function mostraImagem() {
  var item = $(items).eq(currentIndex);
     console.log(item)
  $('#tela img')
  .attr('src', $(item).parent().attr('href'))
  .attr('alt', $(this).attr('alt'))
  .css('opacity', '0.3')
  .animate({opacity: 1 }, 2000);
}

 $('.next').click(function() {
      currentIndex ++;
      if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
      }
     mostraImagem();
  });

$('.prev').click(function() {
  currentIndex -= 1;
  if (currentIndex < 0) {
    currentIndex = itemAmt - 1;
  }
    mostraImagem();
 });


  function cycleItems() {
  var item = $('div .thumb').attr('data', currentIndex);
      console.log(currentIndex);
  //items.hide();
  //item.css('display','inline-block');
}

    cycleItems();

/*var autoSlide = setInterval(function() {
  currentIndex += 1;
  if (currentIndex > itemAmt - 1) {
    currentIndex = 0;
  }
  cycleItems();
}, 3000);

[Atelierbram]

Could you use something like baguetteBox ?

[gisesonia]

No I need to create without plugins.

[Atelierbram]

The next best thing, when you can’t find a tutorial, is to look for a simple example, like PhotoViewerJS, and study the source code. Someone like Chris Ferdinandi is making tutorials nowadays, like Christian Heilmann also used to do. Others as well anyone? Maybe follow geeks like these on Github and social-media to see what they are up to.

[damcel]

I have one in plain Javascript, it is even slightly animated:-)

http://codepen.io/damianocel/pen/YyvqVJ

I am adding comments to the JS, to make it understandable.

[gisesonia]

Thank you both for the examples. I am learning and trying to create my own code.

I will study the examples.

I found example that looks like very simple but some details maybe are outdated:

http://www.web-development-institute.com/how-create-simple-image-gallery-javascript

Some tutorial use the sintaxe new image, why? Sometimes I Just need to understand what mean some lines of code do to make sense.

[Atelierbram]

There’s also this tutorial by Jeremy Keith, also quite old, but it will still work. I believe in his book “Dom Scripting” there is a more elaborate example of this.

[Shikkediel]

Some tutorial use the sintaxe new image, why?

This can be handy if you have a lot of images, you can then create them on the fly. Not necessary if you have put them in the HTML markup already.

Note that document.images in your example will select all images on the entire page…

Maybe you could create a demo on Codepen when you’ve decided on a script. It’ll be easier for us to help out. The code you initially posted will need quite a few changes to make it vanilla JS, especially the first part.

[gisesonia]

Thanks, I will look for the book and post a codepen link.

One last question:

Almost alI tutorials about image gallery the function onclick is equal the function “name (number or path file)”.

If i don’t know the number or the path, how can pass the code if it’s dynamic?

[Shikkediel]

Could you post an example of the actual code? It looks like you’re describing inline script, which is better not used. Any dynamic input should be easily converted in an external script, the last line you wrote is therefore somewhat confusing.

[gisesonia]

Hi, after a lot of research I could create a thumbnail gallery with slider, unfortunally I didn’t get the job, but I learn something:

https://codepen.io/Gisesonia/pen/GyLGeL

What I don’t understand it’s that code:

 counter = (n + imgs.length) % imgs.length;

This week a youtube channel that I follow publish a solution much better, but doesn’t have the slider that was a requirement. If someone needed:

https://www.youtube.com/watch?v=afoxd5b0bJo

The book “Dom Scripting” is good but it’s outdated.

[Shikkediel]

The line you posted uses the modulo operator %. It’s handy to reduce a number to a remainder, after subtracting a multitude of the number that follows. So for example:

17 % 3 = 2

Because the maximum multitude of 3 that can be subtracted is 3 x 5 = 15, the remainder then is 2. In the script, it keeps the number that will be matched with an image between zero and the amount of images available (minus one because they are zero indexed).

Not sure that helps. Hard to explain.

[gisesonia]

Thank you, I asked because I tried with imgs.length -1 and I was getting the error, because was calculating wrong and this calculation solve all.

[Author]

Posts