Question

Super Quick Break Down：我正在尝试做的是构建一个Javascript缩略图查看器，它将显示产品照片，鼠标悬停时放大版本。我的所有图像都来自一个sql db，通过存储过程检索。每种产品的图像数量未知。

当所有图像都是静态的时候，我有一个很棒的查看器。但是，我试图调整我的代码以使其工作。我有两个主要问题（我可以看到）：

1。）当我按照我的方式绑定它时，我不认为javascript能够找到img src。

2。）因为我使用的是转发器，所以id标签不是唯一的;因此，javascript无法通过Id对它们进行排序。

到目前为止，这是我的代码：

放大图像预览到这里

    <img id="0" class="preview normal" src="" alt="preview" />

缩略图，使用转发器（这些确实有效，但脚本无法解释）

    <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <img id="image1" runat="server" class="thumb normal" src='<%#: "~/Images/Catalog/" + Eval("FilePath") %>' alt="" onmouseover="preview(this)"/><br />
                </ItemTemplate>
            </asp:Repeater>

最后，剧本。

    <script>
                var lastImg = image1; //Set initial thumbnail and preview
                document.getElementById(0).src = document.getElementById(lastImg).src;
                document.getElementById(lastImg).className = "thumb selected";

                function preview(img) {
                    document.getElementById(lastImg).className = "thumb normal";
                    img.className = "thumb selected";
                    document.getElementById(0).src = img.src;
                    lastImg = img.id
                }
            </script>

我不是精通Javascript，只是基础知识，所以对我的代码的任何帮助或至少指出我正确的方向是值得赞赏的。解释也很有价值。

上线日期

感谢Sofl和一些小调整，我已将JavaScript更新为：

    function preview(img) {
                    var tar = document.getElementById('preview');
                    var thumbs = document.getElementById('thumbWrapper').children;
                    var i;

                    for (i = 0, lengthI = thumbs.length; i < lengthI; i += 1)
                        thumbs[i].className = 'thumb normal';

                    tar.src = img.src;
                    img.className = 'thumb normal';
                }

鼠标悬停在缩略图上有效！

有问题的：无法在加载时渲染初始图像;因为转发器我不能使用类（例如Class = Active）来显示在页面加载时要预览的图像（所有图像都具有相同的类）。

Javascript缩略图查看器从DB检索图像

0 个答案: