Responsive Lightbox Slider For The Net – jQuery imagesSlider

picturesSlider is a light-weight jQuery plugin that transforms your photograph gallery right into a responsive lightbox slider.

It capabilities like a gallery lightbox. Clicking on a picture within the gallery will show all pictures in a lightbox popup, the place customers can navigate between them utilizing subsequent/earlier buttons, similar to in a standard slider.

imagesSlider makes use of CSS flexbox mannequin to make sure that the lightbox slider totally responsive and look nice on any machine, from desktop displays to cellphones. Moreover, it makes use of jQuery’s fade() capabilities to create clean transitions if you change between pictures.

The best way to use it:

1. Add your pictures right into a DIV container with the CSS class of ‘useSliderPlugin’.

<part class="useSliderPlugin">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  ...
</part>

2. Obtain the plugin and place the imagesSlider.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/imagesSlider.js"></script>

3. The required CSS kinds for the lightbox slider.

.imagesSec{
  width: fit-content;
  margin: auto;
  border: 5px strong #eee;
  border-radius: 10px;
  padding: 40px;
}

.imagesSec img{
  width: 200px;
  peak: 300px;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0px 0px 10px 5px #ccc;
}

.imagesSec img:hover{
  remodel: scale(1.2,1.2);
  cursor: pointer;
}

.fullScreen{
  width: 100%;
  peak: 100%;
  place: fastened;
  background-color: rgb(0 , 0 , 0 ,.8);
  box-sizing: border-box;
  padding: 0 100px;
}

#maximizedImg{
  margin: auto;
  width: 200px;
  peak: 300px;
  remodel: scale(1.8,1.8);
  border-radius: 10px;
}

#nextIcon{
  peak: fit-content;
  font-size: 100px;
  margin: auto 0;
  z-index: 1; 
}

#prevIcon{
  peak: fit-content;
  font-size: 100px;
  margin: auto 0;
  z-index: 1; 
}

#cancelIcon{
  place: absolute;
  proper: 20px;
  prime: 20px;
}

.fullScreen i{
  shade: #979797;
}

.fullScreen i:hover{
  shade: white;
  cursor: pointer;
}

This superior jQuery plugin is developed by AzzaMohamedd. For extra Superior Usages, please test the demo web page or go to the official web site.