creating Modular Plugin for thumbnails

by Susan Delgado

HTML

<div id="thumbgallery">
    <ul class="list">
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
            <img src="http://lorempixel.com/100/100/" />
        </li>
        <li>
      ...

SCSS

#thumbgallery {
    width:204px;
    height:104px;
    padding:0;
    margin:0;
    overflow:hidden;
   
   
    position: relative;
    ul {
        padding:0;
        position: relative;
        height:auto;
    
        font-size:0;
        position:absolute;
        left:0;
        
  
       
        -webkit-transition-property: left;
        -webkit-transition-duration: 0.5s;
        -webkit-transition-timing-function: ease-out;
        
   
        li {
            padding:0px;
            margin:0;
            background:#eee;
            display:inline-block;
            border:1px solid red;
            overflow:auto;

        }
    }
}
#next {
    padding:10;
    background-color:#eee;
    border:1px solid #666;
    width:100px;
    text-align:center;
    display:inline-block;
    cursor:pointer;
}
#prev {
    padding:10;
    background-color:#eee;
    border:1px solid #666;
    width:100px;
    text-align:center;
    display:inline-block;
    cursor:pointer;
}

JavaScript

var SETUP = (function (self) {

      function __init(o) {
          // console.log(o);
          //run self init stuff here
          __setup(o);

      }
      var _globals = {
          name: "DefaultName",
          count: 0,
          list: " ",
          type: "vertical",
          outerwidth: 0,
          outerheight: 0,
          innerwidth: 0,
          innerheight: 0,
          itemWidth: 0,
          itemHeight: 0,
          next: "",
          prev: "",
          left: 0,
          right: 0
      };

      function __setup(o) {
          //set the container id
          _globals.name = "#" + o.nameID;
          _globals.type = o.type;
          _globals.list = "." + o.listClass;
          _globals.next = o.next,
          _globals.prev = o.prev;
          //count the list items 
          _globals.count = $(_globals.name + " > ul > li").size();
          //get Width of container
          var containerWidth = parseInt($(_globals.name + " > ul").outerWidth(true));
          _globals.outerwidth = containerWidth;

          //get Height of container
          var containerHeight = parseInt($(_globals.name + " > ul").outerHeight(true));
          _globals.outerheight = containerHeight;


          //get the width of the li + padding + magin
          var innWidth = parseInt($(_globals.name + " > ul > li").outerWidth(true));
          var w = parseInt($(_globals.name + "> ul > li").width());
          _globals.itemWidth += (w);
          _globals.innerwidth = (innWidth * _globals.count);


          //get the height of the li + padding + magin
          var innHeight = parseInt($(_globals.name + " > ul > li").outerHeight(true));
          var h = parseInt($(_globals.name + "> ul > li").height());
          _globals.itemHeight = (h);
          _globals.innerheight = (innHeight * _globals.count);
          __settype();
      }

      function __getName() {
          return _globals.name;
      }

      function __getCount() {
          return...