より大きなコントロールのためにjQueryスライダを修正：対応するスライドに行くクリックプレビューサムネイルを追加

Question

Ennui Design's sliderに基づくjQueryスライドショーを修正して、以下の小さなプレビューを与えるアイコンまたはサムネイルのリストを作成したいフレームコンテンツとその特定のスライドにジャンプするオプションthis slideshow

jQueryプラグインを見るか、または以下のjqueryスクリプトで変更する必要があるもの私は前/次ボタンとプレビュー親指を使って切り替える場合

私はこのコード

(function($){ 
$(function(){ 
    $('#nav>li>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); 

を使用して、一緒にサンプルを引くことを試みたと私は複数のエラーに実行しているよ：

1. 私はプレビュー親指を使用している場合はコントロールが消える前、

2. 最後のスライド次のコントロールが空のスライドを提供し、

3. ページのURLは、ページ（例 - testing.com/example.cfm#s1）の最後にハッシュを示し、その後、前/次のボタンは任意のスライドに

4. プレビュー親指にアクセスすることはできません数回クリックすると、1つのアイテムのテキストと別のアイテムのイメージスライド（2つのスライドフレームのうち50/50）が表示されます。私は下のhtmlコードの基礎を含めた

：

<!---html page code --->  
<div id="s">  
    <div class="bullets"> 
    <div> 
     <a href="#s0" title=" "><img src="images/1/tooltips/0.jpg" alt=" "/>1</a> 
     <a href="#s1" title=" "><img src="images/1/tooltips/1.jpg" alt=" "/>2</a> 
     <a href="#s2" title=" "><img src="images/1/tooltips/2.jpg" alt=" "/>3</a> 
      <div class="bullet-frame" style="display: none; left: 24px; opacity: 0; top:20px;"> 
      <div> <!--- blank div ---> 
       <div style="width: 900px; left: 0px;"> 
       <img alt=" " src="images/1/tooltips/0.jpg"> 
       <img alt=" " src="images/1/tooltips/1.jpg"> 
       <img alt=" " src="images/1/tooltips/2.jpg"> 
       </div> <!--- div style width 1100% ---> 
      </div> <!--- blank div END ---> 
<span></span> 
      </div> <!--- bullet-frame ---> 
    <div class="ws_shadow"></div> 
</div> 
</div> 
</div> <!--- end preview thumbs ---> 

<!--- start slideshow ---> 

<div id="one" class="contentslider"> 
    <div class="cs_wrapper"> 
     <div class="cs_slider"> 
<!--- s0 ---> 
      <div class="cs_article" id="s0"> 
      <h2>s0 slide</h2> 
      <div id="main_view10"> 
       <a href="#"> <img src="images/images/0010.png" alt=" "/></a> 
      </div> 
       <p>sample text</p> 
       <div class="container"> 
         <ul class="thumb10"> 
          <li><a href="images/images/0010_a.png"><img src="images/images/thumb00101.jpg" alt="" /></a></li> 
          <li><a href="images/images/0010_b.jpg"><img src="images/images/thumb00102.jpg" alt="" /></a></li> 

         </ul> 
        </div> 
        <p> <a href=" " class="readmore" target="_blank">Visit site</a></p> 
       </div> 
       <!--- End s0 ---> 
<!--- s1 ---> 
      <div class="cs_article" id="s1"> 
      <h2>s1 slide</h2> 
      <div id="main_view10"> 
       <a href="#"> <img src="images/images/0010.png" alt=" "/></a> 
      </div> 
       <p>sample text</p> 
       <div class="container"> 
         <ul class="thumb10"> 
          <li><a href="images/images/0010_a.png"><img src="images/images/thumb00101.jpg" alt="" /></a></li> 
          <li><a href="images/images/0010_b.jpg"><img src="images/images/thumb00102.jpg" alt="" /></a></li> 

         </ul> 
        </div> 
        <p> <a href=" " class="readmore" target="_blank">Visit site</a></p> 
       </div> 
       <!--- End s1 ---> 

       <!--- s2 ---> 
      <div class="cs_article" id="s2"> 
      <h2>s2 slide</h2> 
      <div id="main_view10"> 
       <a href="#"> <img src="images/images/0010.png" alt=" "/></a> 
      </div> 
       <p>sample text</p> 
       <div class="container"> 
         <ul class="thumb10"> 
          <li><a href="images/images/0010_a.png"><img src="images/images/thumb00101.jpg" alt="" /></a></li> 
          <li><a href="images/images/0010_b.jpg"><img src="images/images/thumb00102.jpg" alt="" /></a></li> 

         </ul> 
        </div> 
        <p> <a href=" " class="readmore" target="_blank">Visit site</a></p> 
       </div> 
       <!--- End s2 ---> 

<!--- Article Ends ---> 
</div><!-- End cs_slider --> 
</div><!-- End cs_wrapper --> 
</div><!-- End contentslider --> 


<script type="text/javascript"> 
$(function() { 
$('#one').ContentSlider({ 
    width : '900px', 
    height : '400px', 
    speed : 800, 
    easing : 'easeInOutBack' 
}); 
}); 
</script> 

の下に次の

(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<=0&&m>=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('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>') 
    .append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>') 
    // 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) 

スライダーのjQueryのですが、事前にありがとうございます！

Answer 1

このスライダーを試す：http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ これはかなりクールで、あなたが望む機能があります。