javascripthtmlcssphoto-gallerybootstrap-image-gallery

Choosing a gallery

Could you recommend me a gallery for a web project of mine? In the project used are:

  1. jQuery
  2. Bootstrap

That a gallery based on jQuery is Ok.

Requirements and wishes:

  1. Small sizes of CSS and JavaScript files.
  2. Picture tag used.
  3. Thumbnails are thumbnails, but a big picture is a big one.
  4. Correct work on mobile devices.
  5. Lazy loading (I'm not sure if such galleries exist).

I'd like something like Fotorama: Надо что-то типа фоторамы.

https://fotorama.io/#8e1e4402-84f0-4d78-b7d8-c48ec437b5af

But unsatisfactory are clauses 2 and 3.

Fotorama is used like this:

<div class="fotorama"
     data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>
</div>

I'm not sure that this gallery may use a picture tag in this case.

This is its documentation https://fotorama.io/docs/4/thumbnails/

Maybe Fotorama is not appropriate. But I'd like to have something of the like but according to my requirements stipulated above.

Any suggestion is highly appreciated.

Solution

  • You mean gallery image slide in that case bootstrap carousel is good for lazy loading there are libraries available in cdn library https://getbootstrap.com/docs/4.0/components/carousel/