在asp.net中顯示使用中繼器的滑塊時出錯

Question

我有一個圖片滑塊，在它的佈局中，我有一個大圖片容器，有一個縮略圖（圖片）的打擊。當每個縮略圖被點擊時，它將顯示在大圖片容器中。這些圖像來自數據庫。我正在使用中繼器查看它們。出現的問題是，當頁面被執行時，所有圖片都會在大圖片容器中打開，稍後當我從縮略圖中單擊一張圖片時，它會顯示一張較大的圖片。

的ASPX代碼是：

   <div class="carousel property"> 
             <div class="preview"> 

              <asp:Repeater ID="rptr_preview" runat="server"> 
               <ItemTemplate> 
                <a class="active colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'> 
                 <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" /> 
                </a> 
               </ItemTemplate> 
              </asp:Repeater> 


             </div> 
             <!-- /.preview --> 

             <div class="content"> 
              <ul> 
               <asp:Repeater ID="rptr_slider" runat="server"> 
                <ItemTemplate> 
                 <li class="active" data-index='<%#Eval("sr_no") %>'> 
                  <asp:Image ID="Image_thumbnail" ImageUrl='<%#Eval("image_url") %>' runat="server" /> 

              </ul> 

              <a class="carousel-prev" href="#">Previous</a> 
              <a class="carousel-next" href="#">Next</a> 
             </div> 
             <!-- /.content --> 
            </div> 

C＃代碼：

protected void Page_Load(object sender, EventArgs e) 
    { 
     using(Property_dbDataContext context=new Property_dbDataContext()) 
     { 
      var prop_detail = context.user_detail(5).ToList().ToArray(); 
      rptr_preview.DataSource = prop_detail; 
      rptr_preview.DataBind(); 
      rptr_slider.DataSource = prop_detail; 
      rptr_slider.DataBind(); 
     } 
    } 

輸出爲：

此顯示，我想是這樣的：

Answer 1

在你的中繼器喲你設置每個圖像和每個縮略圖的活動類。您應該只爲中繼器的第一項設置活動類。

UPDATE

jQuery中：

$(".preview a:nth-child(1)").addClass("active"); 
$(".content li:nth-child(1)").addClass("active"); 

從中繼器中取出活性類和做的document.ready以下。

UPDATE

首先從中繼刪除類。

<asp:Repeater ID="rptr_preview" runat="server"> 
    <ItemTemplate> 
     <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'> 
     <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" /> 
     </a> 
     </ItemTemplate> 
</asp:Repeater> 

其次，在document.ready中添加jquery。你將不得不添加一個引用jquery這個工作。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".preview a:nth-child(1)").addClass("active"); 
     $(".content li:nth-child(1)").addClass("active"); 

    }); 
</script> 

我會建議把任何的jQuery或JavaScript代碼在自己的.js文件，並在頁面但script標籤做工作演示的目的引用它。