从数据库检索图像的Javascript缩略图查看器

超级快速分解： 我试图做的是构建一个Javascript缩略图查看器，它将在鼠标上方显示产品照片、放大版。 我的所有图像都来自通过存储过程检索的sql数据库。 每个产品的图像数量未知

我有一个非常棒的查看器，当所有的图像都是静态的时候。然而，我正试图调整我的代码，使其能够用于此目的。我有两个主要问题（我可以看到）：

1.）我认为当我以我现在的方式绑定img src时，javascript无法找到它

2.）因为我使用的是中继器，所以id标签不是唯一的；因此，javascript无法按Id对它们进行排序

以下是我目前的代码：

放大图像预览到这里

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

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

“alt=”“onmouseover=“预览（此）”/>

最后是剧本

    <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>

var lastImg=image1//设置初始缩略图和预览
document.getElementById（0）.src=document.getElementById（lastImg）.src；
document.getElementById（lastImg）.className=“thumb selected”；
功能预览（img）{
document.getElementById（lastImg）.className=“拇指正常”；
img.className=“选择拇指”；
document.getElementById（0.src=img.src；
lastImg=img.id
}

我不太精通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';
                }

功能预览（img）{
var tar=document.getElementById（'preview'）；
var thumbs=document.getElementById（'thumbWrapper'）.children；
var i；
对于（i=0，lengthI=thumbs.length；i

缩略图上的鼠标悬停有效

问题：

---

但无法在加载时呈现初始图像；由于中继器，我无法使用类（例如class=Active）来显示页面加载时要预览的图像（所有图像都具有相同的类）。

是否能够将一个可运行的示例与从中继器和javascript生成的hmtl放在一起。repeater代码在我看来是合理的，因此您的问题可能在于JavaScription。javascript被设置为通过Id标识图像。由于使用repeater，Id将是相同的（因此，它们不能通过Id标识）。所以，是的，问题肯定出在Javascript中，但我甚至不知道从哪里开始。此外，onload第一次预览不会渲染。所以我想知道，当我的imgsrc像现在这样绑定时，javascript是否无法识别它。也许可以从后面完成所有这些工作，捕捉图像，创建临时id和绝对路径以供Javascript读取？如果您可以在上面模拟html，我可以帮助您让Javascript按照您的需要工作。

getElementById（0）

将无法工作，因为它需要字符串。到目前为止，我也不明白

lastImg

的意义。总之，我举了一个简单的例子，我认为您希望使用jQuery版本jQuery版本和备用预览。这不是一个答案，但可能会有帮助。@sofl这是非常接近的。它在鼠标上方渲染；当然，当使用repeater（复制预览并弄乱css）时，活动类会产生问题。所以我要把它弄得一团糟；但是，这是一个巨大的帮助。非常感谢。

    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';
                }