JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

JavaScript

(function (win, doc) {
    
  /*
gallery.draw()
                <div class="gallery-wrapper">
                  <ul class="gallery-list">
                    <li class="gallery-item">
                     <img src="something" />
                    </li>
                  </ul>
                </div>
                
                
var gallery = new Gallery({}, {
    images: [
      {thumb: "http://farm4.staticflickr.com/3154/cameras/72157607348761901_model_small_a874952616.jpg"},
      {thumb: "http://farm6.staticflickr.com/5458/cameras/72157629249027061_model_small_5878ba2ae2.jpg"}
    ]
}).inject(document.body)


  */
    var Gallery = win.Gallery = function ( options, data) {
        this.initialize.call(this, options, data)
    }
  
    Gallery.prototype = {
        
         initialize: function (options, data) {
            options = options || {}
            this.data = data || {}
      
            // sets the default featured slide to position 0
            this.currentSlide = options.currentSlide || 0
            // sets the array name for the set of images in the gallery.  Array is populated from the li on document ready below.
            this.inventory = {}
        }
        
    // Export elements or string of HTML
        ,draw: function () {
      var div = doc.createElement('div')
      div.classList.add('gallery-wrapper')
      
          var ul = doc.createElement('ul')
      ul.classList.add('gallery-list')
      
      this.data.images.1forEach(function (el, i) {
        var li = document.createElement('li')
        li.classList.add('gallery-item')
        
        var img = new Image
        img.src = el.thumb
        
        li.appendChild(img)
        
        ul.appendChild(li)
      })
      
      // Element assembly
      div.appendChild(ul)
      
      return div
        }
    
    ,attachEvents: function (div) {
      var lis = Array.prototype.slice.call(div.querySelectorAll('li'))
      lis.forEach(function (el) {
       ...