jQueryカルーセルとブートストラップ、カルーセル画像を他のhtmlページにリンクします。

Question

jQueryのカルーセル画像をそれぞれの「製品」HTMLページにリンクしようとしています。しかし、jQueryスクリプトに関数を追加して、イメージをより大きなイメージではなく別のページにするようにしました。左右のクリック可能なコントロールがブレークします。

    <div id="carousel"> 
         <div id="left_button" class="col-xs-2"><img src="images/left.jpg" alt=""></div> 
         <div class="col-xs-8" id="display_panel"> 
          <ul id="image_list"> 
           <li><a href="products/desk_fan.html"target=_self><img class="img-thumbnail" src="images/small/deskcara.png" alt="Desk Fan 1"></a></li> 
           <li><a href="products/desk_fan.html"target=_self><img class="img-thumbnail" src="images/small/deskcara1.png" alt="Desk Fan 2"></a></li> 
           <li><a href="products/window_fan.html"target=_self><img class="img-thumbnail" src="images/small/windowCara.png" alt="Window Fan 1"></a></li> 
           <li><a href="products/ceiling_fan.html"target=_self><img class="img-thumbnail" src="images/ceilingCara.png" alt="Ceiling Fan"></a></li> 
           <li><a href="products/floor_fan.html"target=_self><img class="img-thumbnail" src="images/floorCara1.png" alt="Floor Fan 1"></a></li> 
           <li><a href="products/personal_fan.html"target=_self><img class="img-thumbnail" src="images/personalCara1.png" alt="Personal Fan"></a></li> 
           <li><a href="products/tower_fan.html"target=_self><img class="img-thumbnail" src="images/towerCara.png" alt="Tower Fan 1"></a></li> 
           <li><a href="products/tower_fan.html"target=_self><img class="img-thumbnail" src="images/towerCara2.png" alt="Tower Fan 2"></a></li> 
          </ul> 
         </div> 
         <div id="right_button" class="col-xs-2"><img src="images/right.jpg" alt=""></div> 
        </div> 

---

jQueryの

$(document).ready(function() { 

var slider = $("#image_list");      // slider = ul element 
var leftProperty, newleftProperty; 

// the click event handler for the right button      
$("#right_button").click(function() { 
    // get value of current left property 
    leftProperty = parseInt(slider.css("left")); 
    // determine new value of left property 
    if (leftProperty - 300 <= -900) { 
     newLeftProperty = 0; } 
    else { 
     newLeftProperty = leftProperty - 300; } 
    // use the animate function to change the left property 
    slider.animate({left: newLeftProperty}, 1000); 
}); // end click 

// the click event handler for the left button 
$("#left_button").click(function() { 
    // get value of current right property 
    leftProperty = parseInt(slider.css("left")); 

    // determine new value of left property 
    if (leftProperty < 0) { 
     newLeftProperty = leftProperty + 300; 
    } 
    else { 
     newLeftProperty = 0; 
    } 

    // use the animate function to change the left property 
    slider.animate({left: newLeftProperty}, 1000);    
}); // end click 

// display an enlarged image when a carousel image is clicked 
$("#image_list a").click(function(evt) { 
    var imageURL = $(this).attr("href"); 
    $("#image").animate(
     { opacity: 0, marginLeft: "-=205" }, 
     1000, 
     function() { 
      $("#image").attr("src", imageURL);    
      $("#image").animate(
       { opacity: 1, marginLeft: "+=205" }, 
       1000 
      ); 
     } 
    ); 

    evt.preventDefault(); 
}); 

}); // end ready 

Answer 1

私はすぐにこれに対応していないためaplogize。尋ねた直後に問題を解決しました。問題はjqueryプラグインの最後の部分でした。

この部分：

$("#image_list a").click(function(evt) { 
var imageURL = $(this).attr("href"); 
$("#image").animate(
    { opacity: 0, marginLeft: "-=205" }, 
    1000, 
    function() { 
     $("#image").attr("src", imageURL);    
     $("#image").animate(
      { opacity: 1, marginLeft: "+=205" }, 
      1000 
     ); 
    } 
); 

evt.preventDefault(); 
}); 

それを除去することは、すべての画像は、それらの所望の製品ページにあなたを運ぶクリック可能なリンクです。私を助けてくれてありがとうAtulaありがとう。