title: jQuery basic slider into image gallery with thumbnails
body: <p>I am trying to implement a jQuery plugin by <a href="http://www.basic-slider.com" rel="nofollow">www.basic-slider.com</a> into an image gallery. What the plugin does at the moment is create a transition between images that are inside &lt; li > tags in HTML and generate boxes at the bottom with numerical values corresponding to the order of each image. </p>
  
  <p>I would like to have the generated boxes display a thumbnail picture of each image rather than a numerical value. I have tried tweaking the jQuery code without any luck, thus am asking here for help.</p>
  
  <p>This is what it looks like at the moment and what I'm trying to achieve:
  <a href="http://img266.imageshack.us/img266/8678/0goz.png" rel="nofollow">IMAGE</a></p>
  
  <p><a href="http://eduardpiel.com/test.html" rel="nofollow">DEMO HERE</a></p>
  
  <p><strong>PLUGIN CONTROLS</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {
        $('#banner-fade').bjqs({
          animtype: 'fade',
          height: 360,
          width:480,
          animspeed: 40,
          animduraion: 40,
          showcontrols:true,
          centercontrols:true,
          nexttext:'&gt;',
          prevtext:'&lt;',
          showmarker:true,
          centermarkers:true,
          keyboardnav:false,
          hoverpause:true,
          automatic: false,
          responsive: true,
          randomstart: false,
        });          
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="banner-fade"&gt;
  &lt;ul class="bjqs"&gt;
      &lt;li&gt;&lt;img src="1.jpg"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="2.jpg"/&lt;/li&gt;
      &lt;li&gt;&lt;img src="3.jpg"/&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="4.jpg"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#banner-fade {
  margin:0;
  width:480px;
  height:540px;
  float:left;
  margin:0;
  }
  ul.bjqs-controls.v-centered li a {
  display:block;
  padding:10px;
  color:#fff;
  text-decoration: none;
  }
  ul.bjqs-controls.v-centered li a:hover {
  background:#3c3c3c;
  color:#fff;
  }
  ol.bjqs-markers li a {
  width:120px;
  height:90px;
  font-size:80px;
  background-size:120px 90px;
  color:#000;
  margin:0;
  text-align:center;
  text-decoration: none;
  }
  ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
  background: #fad703;
  }
  p.bjqs-caption {
  background: rgba(255, 255, 255, 0.5);
  }
  ul.bjqs {
  position:relative;
  list-style:none;
  padding:0;
  margin:0;
  overflow:hidden;
  display:none;
  }
  li.bjqs-slide {
  position:absolute;
  display:none;
  }
  ul.bjqs-controls {
  list-style:none;
  margin:0;
  padding:0;
  z-index:9999;
  }
  ul.bjqs-controls.v-centered li a {
  position:absolute;
  }
  ul.bjqs-controls.v-centered li.bjqs-next a {
  right:0;
  }
  ul.bjqs-controls.v-centered li.bjqs-prev a {
  left:0;
  }
  ol.bjqs-markers {
  list-style: none;
  padding: 0;
  margin:0;
  width:100%;
  }
  ol.bjqs-markers.h-centered {
  text-align: left;
  font-size:0;
  }
  ol.bjqs-markers li {
  display:inline;
  }
  ol.bjqs-markers li a {
  display:inline-block;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>(function (e) {
  "use strict";
  e.fn.bjqs = function (t) {
      var n = {
          width: 700,
          height: 300,
          animtype: "fade",
          animduration: 450,
          animspeed: 4e3,
          automatic: !0,
          showcontrols: !0,
          centercontrols: !0,
          nexttext: "&gt;",
          prevtext: "&lt;",
          showmarkers: !0,
          centermarkers: !0,
          keyboardnav: !0,
          hoverpause: !0,
          usecaptions: !0,
          randomstart: !1,
          responsive: !1
      }, r = e.extend({}, n, t),
          i = this,
          s = i.find("ul.bjqs"),
          o = s.children("li"),
          u = null,
          a = null,
          f = null,
          l = null,
          c = null,
          h = null,
          p = null,
          d = null,
          v = {
              slidecount: o.length,
              animating: !1,
              paused: !1,
              currentslide: 1,
              nextslide: 0,
              currentindex: 0,
              nextindex: 0,
              interval: null
          }, m = {
              width: null,
              height: null,
              ratio: null
          }, g = {
              fwd: "forward",
              prev: "previous"
          }, y = function () {
              o.addClass("bjqs-slide");
              r.responsive ? b() : E();
              if (v.slidecount &gt; 1) {
                  r.randomstart &amp;&amp; L();
                  r.showcontrols &amp;&amp; x();
                  r.showmarkers &amp;&amp; T();
                  r.keyboardnav &amp;&amp; N();
                  r.hoverpause &amp;&amp; r.automatic &amp;&amp; C();
                  r.animtype === "slide" &amp;&amp; S()
              }
              r.usecaptions &amp;&amp; k();
              if (r.animtype === "slide" &amp;&amp; !r.randomstart) {
                  v.currentindex = 1;
                  v.currentslide = 2
              }
              s.show();
              o.eq(v.currentindex).show();
              r.automatic &amp;&amp; (v.interval = setInterval(function () {
                  O(g.fwd, !1)
              }, r.animspeed))
          }, b = function () {
              m.width = i.outerWidth();
              m.ratio = m.width / r.width, m.height = r.height * m.ratio;
              if (r.animtype === "fade") {
                  o.css({
                      height: r.height,
                      width: "100%"
                  });
                  o.children("img").css({
                      height: r.height,
                      width: "100%"
                  });
                  s.css({
                      height: r.height,
                      width: "100%"
                  });
                  i.css({
                      height: r.height,
                      "max-width": r.width,
                      position: "relative"
                  });
                  if (m.width &lt; r.width) {
                      o.css({
                          height: m.height
                      });
                      o.children("img").css({
                          height: m.height
                      });
                      s.css({
                          height: m.height
                      });
                      i.css({
                          height: m.height
                      })
                  }
                  e(window).resize(function () {
                      m.width = i.outerWidth();
                      m.ratio = m.width / r.width, m.height = r.height * m.ratio;
                      o.css({
                          height: m.height
                      });
                      o.children("img").css({
                          height: m.height
                      });
                      s.css({
                          height: m.height
                      });
                      i.css({
                          height: m.height
                      })
                  })
              }
              if (r.animtype === "slide") {
                  o.css({
                      height: r.height,
                      width: r.width
                  });
                  o.children("img").css({
                      height: r.height,
                      width: r.width
                  });
                  s.css({
                      height: r.height,
                      width: r.width * r.slidecount
                  });
                  i.css({
                      height: r.height,
                      "max-width": r.width,
                      position: "relative"
                  });
                  if (m.width &lt; r.width) {
                      o.css({
                          height: m.height
                      });
                      o.children("img").css({
                          height: m.height
                      });
                      s.css({
                          height: m.height
                      });
                      i.css({
                          height: m.height
                      })
                  }
                  e(window).resize(function () {
                      m.width = i.outerWidth(), m.ratio = m.width / r.width, m.height = r.height * m.ratio;
                      o.css({
                          height: m.height,
                          width: m.width
                      });
                      o.children("img").css({
                          height: m.height,
                          width: m.width
                      });
                      s.css({
                          height: m.height,
                          width: m.width * r.slidecount
                      });
                      i.css({
                          height: m.height
                      });
                      h.css({
                          height: m.height,
                          width: m.width
                      });
                      w(function () {
                          O(!1, v.currentslide)
                      }, 200, "some unique string")
                  })
              }
          }, w = function () {
              var e = {};
              return function (t, n, r) {
                  r || (r = "Don't call this twice without a uniqueId");
                  e[r] &amp;&amp; clearTimeout(e[r]);
                  e[r] = setTimeout(t, n)
              }
          }(),
          E = function () {
              o.css({
                  height: r.height,
                  width: r.width
              });
              s.css({
                  height: r.height,
                  width: r.width
              });
              i.css({
                  height: r.height,
                  width: r.width,
                  position: "relative"
              })
          }, S = function () {
              p = o.eq(0).clone();
              d = o.eq(v.slidecount - 1).clone();
              p.attr({
                  "data-clone": "last",
                  "data-slide": 0
              }).appendTo(s).show();
              d.attr({
                  "data-clone": "first",
                  "data-slide": 0
              }).prependTo(s).show();
              o = s.children("li");
              v.slidecount = o.length;
              h = e('&lt;div class="bjqs-wrapper"&gt;&lt;/div&gt;');
              if (r.responsive &amp;&amp; m.width &lt; r.width) {
                  h.css({
                      width: m.width,
                      height: m.height,
                      overflow: "hidden",
                      position: "relative"
                  });
                  s.css({
                      width: m.width * (v.slidecount + 2),
                      left: -m.width * v.currentslide
                  })
              } else {
                  h.css({
                      width: r.width,
                      height: r.height,
                      overflow: "hidden",
                      position: "relative"
                  });
                  s.css({
                      width: r.width * (v.slidecount + 2),
                      left: -r.width * v.currentslide
                  })
              }
              o.css({
                  "float": "left",
                  position: "relative",
                  display: "list-item"
              });
              h.prependTo(i);
              s.appendTo(h)
          }, x = function () {
              u = e('&lt;ul class="bjqs-controls"&gt;&lt;/ul&gt;');
              a = e('&lt;li class="bjqs-next"&gt;&lt;a href="#" data-direction="' + g.fwd + '"&gt;' + r.nexttext + "&lt;/a&gt;&lt;/li&gt;");
              f = e('&lt;li class="bjqs-prev"&gt;&lt;a href="#" data-direction="' + g.prev + '"&gt;' + r.prevtext + "&lt;/a&gt;&lt;/li&gt;");
              u.on("click", "a", function (t) {
                  t.preventDefault();
                  var n = e(this).attr("data-direction");
                  if (!v.animating) {
                      n === g.fwd &amp;&amp; O(g.fwd, !1);
                      n === g.prev &amp;&amp; O(g.prev, !1)
                  }
              });
              f.appendTo(u);
              a.appendTo(u);
              u.appendTo(i);
              if (r.centercontrols) {
                  u.addClass("v-centered");
                  var t = (i.height() - a.children("a").outerHeight()) / 2,
                      n = t / r.height * 100,
                      s = n + "%";
                  a.find("a").css("top", s);
                  f.find("a").css("top", s)
              }
          }, T = function () {
              l = e('&lt;ol class="bjqs-markers"&gt;&lt;/ol&gt;');
              e.each(o, function (t, n) {
                  var i = t + 1,
                      s = t + 1;
                  r.animtype === "slide" &amp;&amp; (s = t + 2);
                  var o = e('&lt;li&gt;&lt;a href="#"&gt;' + i + "&lt;/a&gt;&lt;/li&gt;");
                  i === v.currentslide &amp;&amp; o.addClass("active-marker");
                  o.on("click", "a", function (e) {
                      e.preventDefault();
                      !v.animating &amp;&amp; v.currentslide !== s &amp;&amp; O(!1, s)
                  });
                  o.appendTo(l)
              });
              l.appendTo(i);
              c = l.find("li");
              if (r.centermarkers) {
                  l.addClass("h-centered");
                  var t = (r.width - l.width()) / 2;
                  l.css("left", t)
              }
          }, N = function () {
              e(document).keyup(function (e) {
                  if (!v.paused) {
                      clearInterval(v.interval);
                      v.paused = !0
                  }
                  if (!v.animating) if (e.keyCode === 39) {
                      e.preventDefault();
                      O(g.fwd, !1)
                  } else if (e.keyCode === 37) {
                      e.preventDefault();
                      O(g.prev, !1)
                  }
                  if (v.paused &amp;&amp; r.automatic) {
                      v.interval = setInterval(function () {
                          O(g.fwd)
                      }, r.animspeed);
                      v.paused = !1
                  }
              })
          }, C = function () {
              i.hover(function () {
                  if (!v.paused) {
                      clearInterval(v.interval);
                      v.paused = !0
                  }
              }, function () {
                  if (v.paused) {
                      v.interval = setInterval(function () {
                          O(g.fwd, !1)
                      }, r.animspeed);
                      v.paused = !1
                  }
              })
          }, k = function () {
              e.each(o, function (t, n) {
                  var r = e(n).children("img:first-child").attr("title");
                  r || (r = e(n).children("a").find("img:first-child").attr("title"));
                  if (r) {
                      r = e('&lt;p class="bjqs-caption"&gt;' + r + "&lt;/p&gt;");
                      r.appendTo(e(n))
                  }
              })
          }, L = function () {
              var e = Math.floor(Math.random() * v.slidecount) + 1;
              v.currentslide = e;
              v.currentindex = e - 1
          }, A = function (e) {
              if (e === g.fwd) if (o.eq(v.currentindex).next().length) {
                  v.nextindex = v.currentindex + 1;
                  v.nextslide = v.currentslide + 1
              } else {
                  v.nextindex = 0;
                  v.nextslide = 1
              } else if (o.eq(v.currentindex).prev().length) {
                  v.nextindex = v.currentindex - 1;
                  v.nextslide = v.currentslide - 1
              } else {
                  v.nextindex = v.slidecount - 1;
                  v.nextslide = v.slidecount
              }
          }, O = function (e, t) {
              if (!v.animating) {
                  v.animating = !0;
                  if (t) {
                      v.nextslide = t;
                      v.nextindex = t - 1
                  } else A(e);
                  if (r.animtype === "fade") {
                      if (r.showmarkers) {
                          c.removeClass("active-marker");
                          c.eq(v.nextindex).addClass("active-marker")
                      }
                      o.eq(v.currentindex).fadeOut(r.animduration);
                      o.eq(v.nextindex).fadeIn(r.animduration, function () {
                          v.animating = !1;
                          v.currentslide = v.nextslide;
                          v.currentindex = v.nextindex
                      })
                  }
                  if (r.animtype === "slide") {
                      if (r.showmarkers) {
                          var n = v.nextindex - 1;
                          n === v.slidecount - 2 ? n = 0 : n === -1 &amp;&amp; (n = v.slidecount - 3);
                          c.removeClass("active-marker");
                          c.eq(n).addClass("active-marker")
                      }
                      r.responsive &amp;&amp; m.width &lt; r.width ? v.slidewidth = m.width : v.slidewidth = r.width;
                      s.animate({
                          left: -v.nextindex * v.slidewidth
                      }, r.animduration, function () {
                          v.currentslide = v.nextslide;
                          v.currentindex = v.nextindex;
                          if (o.eq(v.currentindex).attr("data-clone") === "last") {
                              s.css({
                                  left: -v.slidewidth
                              });
                              v.currentslide = 2;
                              v.currentindex = 1
                          } else if (o.eq(v.currentindex).attr("data-clone") === "first") {
                              s.css({
                                  left: -v.slidewidth * (v.slidecount - 2)
                              });
                              v.currentslide = v.slidecount - 1;
                              v.currentindex = v.slidecount - 2
                          }
                          v.animating = !1
                      })
                  }
              }
          };
      y()
  }
  })(jQuery);
  </code></pre>