关于在repeater里面点击图片放大效果

Question

  <asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
                                <ItemTemplate>
                                    <div style="text-align: left; height: 28px; width: auto; background-position: left center;
                                        background-repeat: repeat-x">
                                        <div style="float: left; width: 760px; margin-left: 10px; line-height: 28px; height: 28px;"
                                            class="title">
                                            <img src="<%#Eval("spoilUrl") %>" id="img2" alt="" onclick="return ShowImageDiv(this.src);" />
                                            <iframe height="0" width="0" src="<%#Eval("spoilUrl") %>" name="saveImage" id="saveImage">
                                            </iframe>
                                            <asp:Label ID="Label1" runat="server" Text='<%#Eval("spoilId") %>' Visible="false"></asp:Label>
                                        </div>
                                        <div style="width: auto; float: left; text-align: left; text-indent: 2em; color: #666666;
                                            line-height: 28px;">
                                            奖品名称:
                                            <%#Eval("Spoilname")%>
                                            所需积分:<%#Eval("integral")%>
                                        </div>
                                        <%if (Session[B_LoginName] != null)
                                          { %>
                                        <div style="width: auto; text-align: right; color: #666666; line-height: 28px;">
                                            <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Exchange" OnClientClick="javascript:openEncash();">我要兑换</asp:LinkButton>
                                        </div>
                                        <%} %>
                                    </div>
                                </ItemTemplate>现在我用了一段js点击图片可以放大 问题是 当我点击其他的图片显示放大图片时 还是显示的第一个图片的放大效果
我知道问题的原因是因为 在加载的时候 第一次点击执行了js文件 第二次还是执行的第一个？请问该如何解决？

Answer 1

写出你的放大代码，
onclick="return ShowImageDiv(this.src);" 不要传src,直接传this，然后操作他

Answer 2

    function ShowImageDiv(strsrc){
        if(count==0){
            strsrc = strsrc.replace(/jpg/g,'gif');   
            alert(strsrc);
            var bodyRef = document.getElementsByTagName("body").item(0);
            var divObject = document.createElement("div"); 
            divObject.id = "imageDiv";
            divObject.style.position="absolute";  
            divObject.style.width=700;   
            divObject.style.height=500;  
            divObject.style.top=(parseInt(window.screen.height)-500)/2;   
            divObject.style.left=(parseInt(window.screen.width)-700)/2; 
            divObject.padding = 5; 
            divObject.border = "1px solid:#CCC";
            divObject.style.backgroundColor="#F9F9f9";
//            divObject.style.filter="alpha(opacity=80)";
            divObject.style.zIndex=1;
            divObject.overflow = "hidden";
            divObject.visibility = "visible";
            
            var imageObject = document.createElement("img");
            imageObject.id = "imgShow";
            imageObject.src = strsrc;
            imageObject.style.width = 350;
            imageObject.style.height = 250;
            imageObject.style.marginTop=(parseInt(divObject.style.height)-250)/2;   
            imageObject.style.marginLeft=(parseInt(divObject.style.width)-350)/2; 
            imageObject.alt = "";
            
            bodyRef.appendChild(divObject);    
            divObject.appendChild(imageObject); 
            
            if(baseText==null)
            baseText = divObject.innerHTML;
            divObject.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\'return MagnifyShow(document.getElementById(\"imgShow\"));\'>放大</button>&nbsp;&nbsp;&nbsp;<button onclick=\'return DwindleShow(document.getElementById(\"imgShow\"));\'>缩小</button>&nbsp;&nbsp;&nbsp;<button onclick=\"HidePopup();\">关闭</button></div>";
            var sbar = document.getElementById("statusbar"); 
            sbar.style.marginTop = 30; 
            sbar.style.marginLeft = 250;
        }
        else{
            var divObject = document.getElementById("imageDiv");
            divObject.style.visibility = "visible";
        }
  }这个是现实代码 在网上当的

Answer 3

Repeater 绑定时间里改变img的大小就可以了

Answer 4

var count = 0; 在最上面，然后在里面count++

Answer 5

这是个JS问题 与后台代码无关，  我之前也遇到过，JS会缓存你第一次传进去的变量，  你在JS里面处理的时候需要一个中间变量：
var ShowImg=new Image();  //这句比较重要 每传一次就要new一次 防止缓存
ShowImg.src=你传过来的src值，
然后再做操作，OK～

Answer 6

是否需要把之前append的img和div先移除，或者
divObject.id = "imageDiv"+Math.random();
imageObject.id = "imgShow"+Math.random();试试

Answer 7

[align=left]
<img src="<%#Eval("spoilUrl") %>" id="img2" alt="" onclick="return ShowImageDiv(this.src);" />
                                            <iframe height="0" width="0" src="<%#Eval("spoilUrl") %>" name="saveImage" id="saveImage">
                                            </iframe>[/align]这么写的效率问题啊 页面加载时就加载了多个iframe并且都获取了大图 不好建议参照别的网站 点击后浮动出来加载图片 一个页面中只存在一个iframe 不要写到repeate中

Answer 8

还是没有用这种方法
  换了一种用的 jquery 已经成功！happy！ 谢谢支持！