title: Modify jQuery slider for greater control: add clickable preview thumbnails that goes to that corresponding slide
body: <p>I'd like to modify a jQuery slideshow that is based upon <a href="http://ennuidesign.com/demo/contentslider/" rel="nofollow">Ennui Design's slider</a> to have a list of icons or thumbnails that give a small preview of the following frames content and the option to jump to that particular slide, or a list of bullets with a preview like <a href="http://wowslider.com/best-jquery-slider-crystal-linear-demo.html" rel="nofollow">this slideshow</a></p>
  
  <p>I would greatly appreciate if I could be guided into how I can achieve this, either by looking at a jQuery plugin, or what needs to be modified in the jquery script below.</p>
  
  <p>I've tried to pull together samples of it, using this code</p>
  
  <pre><code>(function($){
  $(function(){
      $('#nav&gt;li&gt;a').hover(
          function(){
              $(this).stop(1);
              $(this).animate({'background-position':'0px 0'});
          },
          function(){
              $(this).stop(1);
              $(this).animate({'background-position':'-140px 0'});
          }
      )
  
      $('.boxgrid').each(function(){
          var $caption = $(this).find('span.boxcaption');
          var pheight = $(this).height();
          $caption.css('top', pheight );
  
          $(this).hover(
              function(){
                  $caption.stop(1);
                  $caption.animate({ top: pheight - $caption.height() });
              },
              function(){
                  $caption.stop(1);
                  $caption.animate({ top: pheight })
              }
          )
      });
  });
   })(jQuery);
  </code></pre>
  
  <p>and I'm running into multiple errors if I switch between using the prev/next buttons and the preview thumbs:</p>
  
  <ol>
  <li><p>the prev controls disappear if I'm using the preview thumbs,</p></li>
  <li><p>the last slide next control offer an empty slide, </p></li>
  <li><p>the page's URL shows the hash at the end of the page (example - testing.com/example.cfm#s1)  and then the prev/next buttons can't access any slide</p></li>
  <li><p>the preview thumbs, if clicked a few times, will start to show the text of one item and the image slide of another (50/50 of two slide frames.</p></li>
  </ol>
  
  <p>I have included the basis of the html code below:</p>
  
  <pre><code> &lt;!---html page code ---&gt;     
   &lt;div id="s"&gt;       
    &lt;div class="bullets"&gt;
     &lt;div&gt; 
        &lt;a href="#s0" title=" "&gt;&lt;img src="images/1/tooltips/0.jpg" alt=" "/&gt;1&lt;/a&gt;
        &lt;a href="#s1" title=" "&gt;&lt;img src="images/1/tooltips/1.jpg" alt=" "/&gt;2&lt;/a&gt;
        &lt;a href="#s2" title=" "&gt;&lt;img src="images/1/tooltips/2.jpg" alt=" "/&gt;3&lt;/a&gt;
             &lt;div class="bullet-frame" style="display: none; left: 24px; opacity: 0; top:20px;"&gt;
              &lt;div&gt; &lt;!--- blank div ---&gt;
                &lt;div style="width: 900px; left: 0px;"&gt;
                   &lt;img alt=" " src="images/1/tooltips/0.jpg"&gt;
                   &lt;img alt=" " src="images/1/tooltips/1.jpg"&gt;
                   &lt;img alt=" " src="images/1/tooltips/2.jpg"&gt;
                &lt;/div&gt; &lt;!--- div style width 1100% ---&gt;
              &lt;/div&gt; &lt;!--- blank div END ---&gt;
  &lt;span&gt;&lt;/span&gt;
             &lt;/div&gt; &lt;!--- bullet-frame ---&gt;
      &lt;div class="ws_shadow"&gt;&lt;/div&gt;
   &lt;/div&gt; 
  &lt;/div&gt; 
  &lt;/div&gt;  &lt;!--- end preview thumbs  ---&gt;
  
  &lt;!--- start slideshow  ---&gt;
  
   &lt;div id="one" class="contentslider"&gt;
      &lt;div class="cs_wrapper"&gt;
         &lt;div class="cs_slider"&gt;
   &lt;!--- s0  ---&gt;
            &lt;div class="cs_article" id="s0"&gt;
             &lt;h2&gt;s0 slide&lt;/h2&gt;
              &lt;div id="main_view10"&gt;
                &lt;a href="#"&gt; &lt;img src="images/images/0010.png" alt=" "/&gt;&lt;/a&gt;
               &lt;/div&gt;
                &lt;p&gt;sample text&lt;/p&gt;
                   &lt;div class="container"&gt;
                          &lt;ul class="thumb10"&gt;
                              &lt;li&gt;&lt;a href="images/images/0010_a.png"&gt;&lt;img src="images/images/thumb00101.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="images/images/0010_b.jpg"&gt;&lt;img src="images/images/thumb00102.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
  
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;p&gt;  &lt;a href=" " class="readmore" target="_blank"&gt;Visit site&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;!--- End s0 ---&gt;
   &lt;!--- s1  ---&gt;
            &lt;div class="cs_article" id="s1"&gt;
             &lt;h2&gt;s1 slide&lt;/h2&gt;
              &lt;div id="main_view10"&gt;
                &lt;a href="#"&gt; &lt;img src="images/images/0010.png" alt=" "/&gt;&lt;/a&gt;
               &lt;/div&gt;
                &lt;p&gt;sample text&lt;/p&gt;
                   &lt;div class="container"&gt;
                          &lt;ul class="thumb10"&gt;
                              &lt;li&gt;&lt;a href="images/images/0010_a.png"&gt;&lt;img src="images/images/thumb00101.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="images/images/0010_b.jpg"&gt;&lt;img src="images/images/thumb00102.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
  
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;p&gt;  &lt;a href=" " class="readmore" target="_blank"&gt;Visit site&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;!--- End s1 ---&gt;
  
                   &lt;!--- s2  ---&gt;
            &lt;div class="cs_article" id="s2"&gt;
             &lt;h2&gt;s2 slide&lt;/h2&gt;
              &lt;div id="main_view10"&gt;
                &lt;a href="#"&gt; &lt;img src="images/images/0010.png" alt=" "/&gt;&lt;/a&gt;
               &lt;/div&gt;
                &lt;p&gt;sample text&lt;/p&gt;
                   &lt;div class="container"&gt;
                          &lt;ul class="thumb10"&gt;
                              &lt;li&gt;&lt;a href="images/images/0010_a.png"&gt;&lt;img src="images/images/thumb00101.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="images/images/0010_b.jpg"&gt;&lt;img src="images/images/thumb00102.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
  
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;p&gt;  &lt;a href=" " class="readmore" target="_blank"&gt;Visit site&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;!--- End s2 ---&gt;
  
   &lt;!--- Article Ends  ---&gt;
   &lt;/div&gt;&lt;!-- End cs_slider --&gt;
  &lt;/div&gt;&lt;!-- End cs_wrapper --&gt;
  &lt;/div&gt;&lt;!-- End contentslider --&gt;
  
  
  &lt;script type="text/javascript"&gt;
   $(function() {
   $('#one').ContentSlider({
     width : '900px',
     height : '400px',
     speed : 800,
     easing : 'easeInOutBack'
   });
  });
   &lt;/script&gt;
  </code></pre>
  
  <p>The following below is the jQuery of the slider</p>
  
  <pre><code>(function($) {
   $.fn.ContentSlider = function(options)
    {
  var defaults = {
    leftBtn : 'images/cs_leftImg.jpg',
    rightBtn : 'images/cs_rightImg.jpg',
    width : '900px',
    height : '400px',
    speed : 400,
    easing : 'easeOutQuad',
    textResize : false,
    IE_h2 : '26px',
    IE_p : '11px'
  }
  var defaultWidth = defaults.width;
  var o = $.extend(defaults, options);
  var w = parseInt(o.width);
  var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
  var x = -1*w*n+w; // Minimum left value
  var p = parseInt(o.width)/parseInt(defaultWidth);
  var thisInstance = this.attr('id');
  var inuse = false; // Prevents colliding animations
  
  function moveSlider(d, b)
  {
    var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
    if(isNaN(l)) {
      var l = 0;
    }
    var m = (d=='left') ? l-w : l+w;
    if(m&lt;=0&amp;&amp;m&gt;=x) {
      b
        .siblings('.cs_wrapper')
          .children('.cs_slider')
            .animate({ 'left':m+'px' }, o.speed, o.easing, function() {
              inuse=false;
            });
  
      if(b.attr('class')=='cs_leftBtn') {
        var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
        var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
      } else {
        var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
        var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
      }
      if(m==0||m==x) {
        thisBtn.animate({ 'opacity':'0' }, o.speed, o.easing, function() { thisBtn.hide(); });
      }
      if(otherBtn.css('opacity')=='0') {
        otherBtn.show().animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
      }
    }
  }
  
  function vCenterBtns(b)
  {
    // Safari and IE don't seem to like the CSS used to vertically center
    // the buttons, so we'll force it with this function
    var mid = parseInt(o.height)/2;
    b
      .find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
      .find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
  }
  
  return this.each(function() {
    $(this)
      // Set the width and height of the div to the defined size
      .css({
        width:o.width,
        height:o.height
      })
      // Add the buttons to move left and right
      .prepend('&lt;a href="#" class="cs_leftBtn"&gt;&lt;img src="'+o.leftBtn+'" /&gt;&lt;/a&gt;')
      .append('&lt;a href="#" class="cs_rightBtn"&gt;&lt;img src="'+o.rightBtn+'" /&gt;&lt;/a&gt;')
      // Dig down to the article div elements
      .find('.cs_article')
        // Set the width and height of the div to the defined size
        .css({
          width:o.width,
          height:o.height
        })
        .end()
      // Animate the entrance of the buttons
      .find('.cs_leftBtn')
        .css('opacity','0')
        .hide()
        .end()
      .find('.cs_rightBtn')
        .hide()
        .animate({ 'width':'show' });
  
    // Resize the font to match the bounding box
    if(o.textResize===true) {
      var h2FontSize = $(this).find('h2').css('font-size');
      var pFontSize = $(this).find('p').css('font-size');
      $.each(jQuery.browser, function(i) {
        if($.browser.msie) {
           h2FontSize = o.IE_h2;
           pFontSize = o.IE_p;
        }
      });
      $(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
      $(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
      $(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
    }
  
    // Store a copy of the button in a variable to pass to moveSlider()
    var leftBtn = $(this).children('.cs_leftBtn');
    leftBtn.bind('click', function() {
      if(inuse===false) {
        inuse = true;
        moveSlider('right', leftBtn);
      }
      return false; // Keep the link from firing
    });
  
    // Store a copy of the button in a variable to pass to moveSlider()
    var rightBtn = $(this).children('.cs_rightBtn');
    rightBtn.bind('click', function() {
      if(inuse===false) {
        inuse=true;
        moveSlider('left', rightBtn);
      }
      return false; // Keep the link from firing
    });
  
    vCenterBtns($(this)); // This is a CSS fix function.
  });
    }
  })(jQuery)
  </code></pre>
  
  <p>Thank you in advance!</p>