Responsive Fullscreen Image Viewer With jQuery And CSS3

This is a responsive, jQuery & CSS3 based image viewer where you're able to fade through a set of images in fullscreen mode just like a slider. Responsiveness based on CSS3 flexbox model.

How to use it:

1. Add image together with next/prev navigation and fullscreen toggle into the image viewer.

<div id="slider">
  <div id="images">
    <img src="1.jpg" id="1"/>
    <img src="2.jpg" id="2"/>
    <img src="3.jpg" id="3"/>
  </div>
  <div id="controls">
    <div>
      <button id="previous">&lt;</button>
      <button id="next">&gt;</button>
    </div>
    <button id="toggle-fullscreen">
      F
    </button>
  </div>
</div>

2. The core CSS to style the image viewer.

#slider {
  width: 50%;
  height: 350px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

#slider.full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#slider.full #images img {
  height: 100%;
  width: auto;
  vertical-align: center;
}
@media (max-width: 840px) {

#slider.full #images img {
  width: 100%;
  height: auto;
}
}

#slider #images {
  height: 90%;
  text-align: center;
  background: #292929;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

#slider #images img { height: 100%; }

@media (max-width: 840px) {

#slider #images img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}
}

3. The required CSS styles for the controls.

#slider #controls {
  height: 10%;
  background: #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#slider #controls div {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

#slider #controls div button { height: 100%; }

#slider #controls div #next { border-right: 2px solid white; }

#slider #controls button {
  padding: 10px;
  background: transparent;
  border: none;
  outline: none;
  color: #292929;
  border-left: 2px solid white;
  width: 50px;
}

#slider #controls button:first-of-type { border-left: none; }

#slider #controls button:active, #slider #controls button:hover, #slider #controls button:focus { outline: none; }

#slider #controls button:hover {
  color: #4f4f4f;
  background: #cacaca;
}

#slider #controls #toggle-fullscreen { border-left: 2px solid white; }

4. Don't forget to load the necessary jQuery library at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script> 

5. The JavaScript to active the image viewer.

$(document).ready(function() {
  
  var $last = $("#previous"); //previous button
  var $next = $("#next"); //next button
  var $full = $("#toggle-fullscreen"); //full screen toggle button
  var $car = $("#slider"); //the whole slider
  var $count = 1; //the current image
  var $total = 3; //the amount of images

  $("#images img").hide(); //hide all images
  $("#" + $count).show(); //except the index image

  $last.click(function() {
    //when the 'last' button is clicked
    $("#" + $count).fadeOut(300, function() {
      //fade out the currently shown image
      
      //if the count is > 1
      if ($count > 1) {
        //decrement count
        $count--;
      } else {
        //else, loop back around so that the last image is shown
        $count = $total;
      }

      //find the next image
      $item = $("#" + $count);
      
      //fade in the next image
      $item.fadeIn(300);
    });
  })

  $next.click(function() {
    //when the 'next' button is clicked
    $("#" + $count).fadeOut(300, function() {
      //fade out the currently shown image
      
      //if the count is less than the total amount of image
      if ($count < $total) {
        //increment the count
        $count++;
      } else {
        //else, loop back around so that the first image is shown
        $count = 1;
      }

      //find the next image
      $item = $("#" + $count);
      
      //fade in the next image
      $item.fadeIn(300);
    });
  })

  $full.click(function() {
    //when the fullscreen toggle is clicked
    
    //if the slider is already full screen
    if ($car.hasClass('full')) {
      //remove the fullscreen class
      $car.removeClass('full');
      
      //change the button icon to the 'F'
      $full.html('F');
    } else {
      //else, add the fullscreen class
      $car.addClass('full');
      
      //change the button text to the 'F'
      $full.html('F');
    }
  })
})

---

This awesome jQuery plugin is developed by the_Northway. For more Advanced Usages, please check the demo page or visit the official website.