在 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

在您的转发器中，您为每个图像和每个缩略图设置了激活的类。您应该只为转发器的第一项设置活动类。

更新

在 jquery 中：

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

从转发器中删除活动类并在 document.ready 上执行以下操作。

更新

首先从转发器中删除类。

<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 文件中并在页面中引用它，但出于演示目的，脚本标记可以完成这项工作。