uniqname · squistbe · Nov 11, 2014 · Nov 12, 2014 · Nov 12, 2014 · Nov 12, 2014
diff --git a/css/ImageGallery.css b/css/ImageGallery.css
@@ -0,0 +1,128 @@
+html, body {
+    margin: 0;
+    font: 100 16px/20px helvetica,arial,verdana,sans-serif;
+    color: #666;
+    background-color: #204056;
+    height: 100%;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#gallery {
+    height: 400px;
+    width: 600px;
+    position: relative;
+    background-color: #fff;
+    padding: 5px;
+    margin: 10px auto;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+#gallery img {
+    max-height: 400px;
+    max-width: 600px;
+}
+#images {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+#caption {
+    min-height: 80px;
+    width: 590px;
+    background-color: #fff;
+    margin: 0 auto;
+    padding: 10px;
+    font-size: 13px;
+}
+.caption-title {
+    color: #333;
+    font-size: 20px;
+    text-transform: capitalize;
+}
+.caption-attribution {
+    font-style: italic;
+    color: #999;
+}
+#prev {
+    left: -60px;
+    top: 0;
+    height: 100%;
+    width: 100px;
+    position: absolute;
+    z-index: 1000;
+}
+#next {
+    right: -60px;
+    top: 0;
+    height: 100%;
+    width: 100px;
+    position: absolute;
+    z-index: 1000;
+}
+#prev:hover {
+    cursor: pointer;
+    background-image: url(../img/arrow-left.png);
+    background-repeat: no-repeat;
+    background-position: -35px 50%;
+}
+#next:hover {
+    cursor: pointer;
+    background-image: url(../img/arrow-right.png);
+    background-repeat: no-repeat;
+    background-position: 0 50%;
+}
+
+.list-item {
+    padding: 10px 8px;
+}
+.list-item:hover {
+    background-color: #39D1B4 !important;
+    color: #fff;
+    cursor: pointer;
+}
+.list-item:nth-child(even) {
+    background-color: #F1F2F2;
+}
+
+/* Smartphones (portrait and landscape) */
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 480px) {
+    #gallery {
+        width: calc(100% - 120px);
+        height: 40em;
+        max-width: 50em;
+    }
+    #gallery img {
+        max-height: 50em;
+        max-width: 50em;
+    }
+    #caption {
+        width: calc(100% - 80px);
+        font-size: 2.5em;
+        line-height: 1em;
+        padding: 1em;
+    }
+    .caption-title {
+        font-size: 3em;
+        line-height: 1em;
+    }
+    #prev {
+        background-image: url(../img/arrow-left.png);
+        background-repeat: no-repeat;
+        background-position: -40px 50%;
+    }
+    #next {
+        background-image: url(../img/arrow-right.png);
+        background-repeat: no-repeat;
+        background-position: 0 50%;
+    }
+}
diff --git a/img/arrow-left.png b/img/arrow-left.png
diff --git a/img/arrow-right.png b/img/arrow-right.png
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Image Gallery</title>
+    <script src="javascript/jquery-2.1.1.min.js"></script>
+    <script type="text/javascript" src="javascript/ImageGallery.js"></script>
+    <link rel="stylesheet" type="text/css" href="css/ImageGallery.css">
+</head>
+<body>
+    <div id="gallery">
+        <div id="prev"></div>
+        <div id="images"></div>
+        <div id="next"></div>
+    </div>
+    <div id="caption"></div>
+</body>
+</html>
diff --git a/javascript/ImageGallery.js b/javascript/ImageGallery.js
@@ -0,0 +1,106 @@
+$(function () {
+  // create a global reference to our image collection
+  var imgCollection;
+
+  // get the image data
+  $.ajax({
+    url: "gallery.json",
+    success: function(data) {
+      // initialize the Gallery class
+      imgCollection = new Gallery(data);
+
+      // render the images
+      imgCollection.render();
+    }
+  });
+
+  // controller for the next and previous handlers
+  $('#next, #prev').on('click', function () {
+    var images = $('.image'),
+        image = $('.image:visible'),
+        imageIndex = images.index(image),
+        lastIndex = images.length - 1,
+        nextIndex = imageIndex === lastIndex ? 0 : imageIndex + 1,
+        prevIndex = imageIndex === 0 ? lastIndex : imageIndex - 1;
+
+    // hide the current image
+    image.css({display: 'none'});
+
+    // next picture
+    if (this.id === 'next') {
+      images[nextIndex].style.display = 'inline-block';
+      imgCollection.renderContent(nextIndex);
+    }
+
+    // previous picture
+    if (this.id === 'prev') {
+      images[prevIndex].style.display = 'inline-block';
+      imgCollection.renderContent(prevIndex);
+    }
+  });
+
+  // Gallery class accepts a collection of images
+  function Gallery(config) {
+    // public variables
+    this.galleryTitle = config.title;
+    this.imageData = config.photos || [];
+
+    // public methods
+    this.getImageData = function () {
+      // imageData could be undefined so make sure we have an empty array
+      // so we can have the ability to add more images dynamically
+      return this.imageData;
+    };
+    this.addImages = function (imageData) {
+      // 1. First check if the imageData is an array and combine
+      // 2. If imageData is single instance then just add to collection
+      if (this.imageData && $.isArray(this.imageData)) {
+        this.imageData = this.imageData.concat(imageData);
+      } else {
+        this.imageData.push(imageData);
+      }
+    };
+    this.setTitle = function (title) {
+      this.galleryTitle = title;
+    };
+    this.getTitle = function () {
+      return this.galleryTitle;
+    };
+    this.render = function () {
+      var gallery = $('#images'),
+          photos = this.getImageData(),
+          images = '';
+
+      // add the images to gallery and render the content into the caption
+      for (var i = 0; i < photos.length; i++) {
+        images += '<img src="' + photos[i].src + '" style="display:' + (i !== 0 ? 'none' : 'inline-block') + '" class="image" />';
+      }
+      gallery.html(images);
+      this.renderContent(0);
+    };
+    this.formatCaption = function() {
+      var s = arguments[0];
+
+      for (var i = 0; i < arguments.length - 1; i++) {
+        var reg = new RegExp("\\{" + i + "\\}", "gm");
+
+        s = s.replace(reg, arguments[i + 1]);
+      }
+
+      return s;
+    };
+    this.renderContent = function (index) {
+      var caption = $('#caption'),
+          node = imgCollection.getImageData()[index];
+
+      caption.html(this.formatCaption(
+        '<span class="caption-title">{0}</span>' +
+        '<span class="caption-attribution">Photo by: {1}</span>' +
+        '<p>{2}</p>',
+        node.title ? node.title + '<br />' : '',
+        node.attribution || '',
+        node.description || ''
+      ));
+    }
+  };
+});
diff --git a/javascript/jquery-2.1.1.min.js b/javascript/jquery-2.1.1.min.js