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();
        }
    }

输出是： enter image description here

这个显示我想要的是： enter image description here

Answer 1

在您的转发器中，您可以为每个图像和每个tumbnail设置活动。您应该仅为转发器的第一项设置活动类。

<强>更新

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

在asp.net中使用转发器显示滑块时出错

1 个答案: