jQuery Fullscreen Image Slider with Lightbox Support

Fuzzy Ironman is a jQuery plugin for creating a tiled photo gallery which allows you to display large photos in a responsive, fullscreen lightbox slider.

Basic Usage:

1. Include jQuery library and the jQuery Fuzzy Ironman plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/gallery.js"></script>

2. Include the required Font Awesome 4 for navigation icons.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

3. Create the markup for a tiled photo gallery. Use data-title and data-caption attributes to set the titles and captions for your photos.

<article>
  <div data-title="Title 1" data-caption="Image Caption 1" class="image image1"></div>
  <div data-title="Title 2" data-caption="Image Caption 2" class="image image2"></div>
  <div data-title="Title 3" data-caption="Image Caption 3" class="image image3"></div>
  ...
</article>

4. Create the markup for the lightbox slider with controls.

<div class="imagePanel">
  <div class="closeButton button"><i class="fa fa-times fa-2x"></i></div>
  <div class="backButton button"><i class="fa fa-chevron-left fa-4x"></i></div>
  <div class="nextButton button"><i class="fa fa-chevron-right fa-4x"></i></div>
  <div class="bottomContainer button">
    <div class="toggleCaption"><i class="fa fa-plus"></i></div>
  </div>
  <div class="container">
    <figcaption>
      <div id="caption">
        <p id="captionTitle"></p>
        <p id="captionBody"></p>
      </div>
    </figcaption>
  </div>
</div>

5. Add photos into the gallery using CSS background property.

.image1 {
  background: url(1.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover;
}

.image1:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.image2 {
  background: url(2.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover;
}

.image2:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.image3 {
  background: url(3.jpg);
  width: 33.33%;
  float: left;
  position: relative;
  cursor: pointer;
  background-position: center;
  background-size: cover;
}

.image3:before {
  content: '';
  display: block;
  padding-top: 100%;
}

...

6. The required CSS to style the gallery and the lightbox slider.

.imagePanel {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  display: none;
  background: url("1.jpg") center;
  background-size: cover;
}

.imagePanel.animated {
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.imagePanel.full {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

.button {
  opacity: 0;
  position: absolute;
  width: 15%;
  height: 400px;
  z-index: 200;
  color: white;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.button.delay {
  display: block !important;
  opacity: 1 !important;
}

.fa { text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); }

.closeButton {
  opacity: 0;
  width: 75px;
  height: 75px;
  z-index: 20;
  top: 20px;
  right: 0;
  cursor: pointer;
  text-align: center;
}

.closeButton .fa {
  position: relative;
  top: -webkit-calc(50% - 16px);
  top: calc(50% - 16px);
}

.backButton {
  top: 30%;
  left: 0;
  text-align: center;
  cursor: pointer;
  padding-top: 10%;
}

.backButton .fa { padding-right: 20%; }

.nextButton {
  top: 30%;
  right: 0;
  text-align: center;
  cursor: pointer;
  padding-top: 10%;
}

.nextButton .fa { padding-left: 20%; }

.bottomContainer {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 120px;
  z-index: 20;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  padding-top: 10px;
}

.toggleCaption {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  cursor: pointer;
  background-color: #222;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.toggleCaption .fa {
  font-size: 24px;
  position: relative;
  top: -webkit-calc(50% - 12px);
  top: calc(50% - 12px);
  left: -webkit-calc(50% - 10px);
  left: calc(50% - 10px);
}

.container {
  width: 100%;
  padding: 0 33.3%;
}

figcaption {
  position: absolute;
  width: 33%;
  z-index: 300;
  bottom: 120px;
  background-color: #222;
}

figcaption #caption {
  display: none;
  padding: 2% 5%;
}

figcaption #caption #captionTitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5em;
  text-decoration: none;
  color: white;
  margin-bottom: 5px;
}

figcaption #caption #captionBody {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5em;
  text-decoration: none;
  color: white;
  margin-top: 5px;
  margin-bottom: 16px;
}

---

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