在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标签做工作演示的目的引用它。