Simple Auto-fading Image Gallery with jQuery and CSS3

A simple & fast jQuery plugin to create an animated, auto-fading image gallery/slideshow with a dots pagination.

Features:

• CSS3 powered transitions.
• Auto reszie and centralize images to fit the gallery container.
• Multiple instances on one page.
• Super tiny and easy to implement.

How to use it:

1. Insert your images into a DIV container with class of 'gallery'.

<div class="gallery">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  ...
</div>

2. The core CSS styles for the gallery.

.gallery {
  position: relative;
  /* custom width */
  width: 700px;
  /* custom height */
  height: 394px;
  overflow: hidden;
}

.gallery:nth-of-type(2) {
  height: 700px;
}

.gallery img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.gallery img.active, .gallery img:first-of-type {
  opacity: 1;
}

3. The CSS to custom the dots navigation/pagination.

.gallery .gallery-buttons {
  position: absolute;
  height: 20px;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.gallery .gallery-buttons .gallery-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

.gallery .gallery-buttons .gallery-btn + .gallery-btn { margin-left: 10px; }

.gallery .gallery-buttons .gallery-btn:hover,
.gallery .gallery-buttons .gallery-btn.active { background-color: #3498db; }

.gallery .gallery-buttons .gallery-btn.active { cursor: default; }

4. Include the jQuery JavaScript library at the bottom of the document.

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

5. The Javascript to enable the image gallery.

(function() {
  $(document).ready(function() {
    return $(".gallery").gallery();
  });

  $.fn.gallery = function(options) {
    var galleries;
    galleries = Array();
    return this.each(function(key) {
      var animate, b, btn, buttons, buttons_width, current;
      current = key;
      galleries[current] = $.extend({
        speed: 5000,
        object: this,
        width: $(this).width(),
        height: $(this).height(),
        images: $("img", this).length,
        current_image: 0,
        interval: ""
      }, options);
      $.each($("img", this), function(key, value) {
        var image;
        image = new Image();
        image.src = $(this).attr("src");
        return image.onload = function() {
          var new_height, new_width, offset_left, offset_top;
          new_width = galleries[current].width;
          new_height = this.height / this.width * new_width;
          if (new_height < galleries[current].height) {
            new_height = galleries[current].height;
            new_width = this.width / this.height * new_height;
          }
          offset_top = ((new_height - galleries[current].height) / 2) * -1;
          offset_left = ((new_width - galleries[current].width) / 2) * -1;
          $("img:eq(" + key + ")", galleries[current].object).css("top", offset_top + "px");
          $("img:eq(" + key + ")", galleries[current].object).css("left", offset_left + "px");
          $("img:eq(" + key + ")", galleries[current].object).css("width", new_width + "px");
          return $("img:eq(" + key + ")", galleries[current].object).css("height", new_height + "px");
        };
      });
      b = 0;
      buttons = $("<div class='gallery-buttons'></div>");
      while (b < galleries[current].images) {
        btn = $("<div class='gallery-btn' data-image='" + b + "'></div>");
        if (b === 0) {
          btn.addClass("active");
        }
        buttons.append(btn);
        b++;
      }
      buttons_width = (b * 20) + ((b - 1) * 10);
      buttons.css("width", buttons_width + "px");
      $(this).append(buttons);
      $(".gallery-btn", galleries[current].object).on("click", function(e) {
        e.preventDefault();
        if (galleries[current].current_image !== $(this).data("image")) {
          clearInterval(galleries[current].interval);
          return animate($(this).data("image"));
        }
      });
      galleries[current].interval = setInterval(function() {
        return animate();
      }, galleries[current].speed);
      return animate = function(image) {
        if (image == null) {
          image = "";
        }
        $("img:eq(" + galleries[current].current_image + ")", galleries[current].object).removeClass("active");
        $(".gallery-buttons .gallery-btn:eq(" + galleries[current].current_image + ")", galleries[current].object).removeClass("active");
        galleries[current].current_image++;
        if (image === "") {
          if (galleries[current].current_image === galleries[current].images) {
            galleries[current].current_image = 0;
          }
        } else {
          galleries[current].current_image = image;
        }
        $("img:eq(" + galleries[current].current_image + ")", galleries[current].object).addClass("active");
        return $(".gallery-buttons .gallery-btn:eq(" + galleries[current].current_image + ")", galleries[current].object).addClass("active");
      };
    });
  };

}).call(this);

---

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