我正在使用shiftzoom自己的项目.它的隐藏图片元素. [英] i am using shiftzoom own my project. its hide image element.
本文介绍了我正在使用shiftzoom自己的项目.它的隐藏图片元素.的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的所有人
我正在使用shiftzoom插件进行图像平移和缩放.但它可以从HTML动态中隐藏图片标签.如何在不刷新页面的情况下再次显示图像html imagee.
我的代码如下.
Dear All
i am using shiftzoom plugin for image pan and zooming. but it can hide the image tag from HTML dynamic. how to again visible image html imagee without refresh the page.
my code is below.
<div id="wrapper">
<asp:Panel ScrollBars="Vertical" ID="dpane" runat="server" Width="130" Height="800" style="position:fixed; top:0; left:0;">
<asp:DataList ID="DataList12" runat="server"
onitemdatabound="DataList12_ItemDataBound" RepeatColumns="1"
BackColor="White" BorderColor="#999999"
BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black"
GridLines="Vertical" RepeatDirection="Horizontal">
<FooterStyle BackColor="#CCCCCC" />
<ItemTemplate>
<asp:Image id="imgThumbnail" runat="server" borderSize="5" onclick="LoadDiv(this.src,this,this.title);shiftzoom.remove($('world'),true);" ToolTip='<%#Eval("id")%>' CssClass="hand"/>
</ItemTemplate>
<AlternatingItemStyle BackColor="#CCCCCC" />
<SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
</asp:DataList>
</asp:Panel>
<div id="example" class="map">
<img id="world" class="shiftzoom" onload="shiftzoom.remove(this,true);" önmouseover="shiftzoom.add(this,this.style.visibility='visible',{buttons:false,fading:true,showcoords:true,pixelcoords:false});"
src="" alt="large image" border="0"/>
<%--<asp:Image ID="world" CssClass="shiftzoom" onload="shiftzoom.add(this,{buttons:false,fading:true,showcoords:true,pixelcoords:false});"
border="0" runat="server"/>--%>
<%-- <img id="Img1" src="" alt="large image" border="0"/>--%>
<div id="crosshair_x">
</div>
<div id="crosshair_y">
</div>
<div class="navig" id="navi-cross">
<div class="navig_north">
<img önclick="move_v('-');" src="images/cursors/nop.gif" width="26" height="15" alt=""
border="0" title="move up" />
</div>
<div class="navig_west">
<img önclick="move_h('-');" src="images/cursors/nop.gif" width="15" height="26" alt=""
border="0" title="move left" />
</div>
<div class="navig_info">
<img onmouseover="showTooltip();return false;" önmouseout="killTooltip();return false;"
src="images/cursors/nop.gif" width="26" height="26" alt="" border="0" title="" />
</div>
<div class="navig_east">
<img önclick="move_h('+');" src="images/cursors/nop.gif" width="15" height="26" alt=""
border="0" title="move right" />
</div>
<div class="navig_south">
<img önclick="move_v('+');" src="images/cursors/nop.gif" width="26" height="15" alt=""
border="0" title="move down" />
</div>
</div>
<div class="slider_outer" unselectable="on">
<div class="slider_inner">
<div id="slider" class="slider_knob">
</div>
</div>
<div class="slider_plus">
<img önclick="zoom('+');" src="images/cursors/nop.gif" width="26" height="26" alt=""
border="0" title="zoom in" />
</div>
<div class="slider_minus">
<img önclick="zoom('-');" src="images/cursors/nop.gif" width="26" height="26" alt=""
border="0" title="zoom out" />
</div>
</div>
</div>
<div style="removed:relative;">
<table>
<tr>
<td align = "left" style="padding:10px;width:200px">
<a id = "Previous" href = "java<!-- no -->script:void(0)" önclick = "doPaging1(this)">Previous</a>
<span id="lblPrevious"></span>
</td>
<td align="center" valign="middle" style ="width:200px">
<input id="btnClose" type="button" value="close"
önclick="HideDiv()"/>
</td>
<td align = "right" style ="padding:10px;width:200px">
<a id = "Next" href = "java<!-- no -->script:void(0)" önclick = "doPaging(this)">Next</a>
<span id="lblNext"></span>
</td>
</tr>
</table>
</div>
</div>
//////////////////////////////////////////////
<script type="text/javascript">
var newimgs;
var i = 0;
//var imgFull;
function loadimage(imageid) {
var img = new Image();
//var imgFull1 = document.getElementsByName("Img1");
var imgDiv = document.getElementById("example");
alert(imgDiv);
alert(imgDiv.innerHTML);
alert(imgFull1.alt);
alert(imgFull1.src);
//imgFull.src = "";
//alert(imgFull.src);
img.src = "fullimage.ashx?ImID=" + imageid;
//imgFull1.src = img.src;
alert(img.src);
// imgFull.style.display = 'none';
//alert(imgFull.src);
return false;
}
function LoadDiv(url, lnk, index) {
var dl = document.getElementById('<%=DataList12.ClientID%>');
var imgs = dl.getElementsByTagName("img");
var img = new Image();
newimgs = imgs;
i = index;
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("wrapper");
var innerDiv=document.getElementById("example");
var imgFull = document.getElementById("world");
// var imgFull = document.createElement("img");
// imgFull.setAttribute('id', 'world');
// imgFull.setAttribute('onmouseover', "shiftzoom.add(this,{buttons:false,fading:true,showcoords:true,pixelcoords:false});");
// imgFull.setAttribute('border', '0');
// imgFull.setAttribute('alt', 'large image');
//
// innerDiv.appendChild(imgFull);
imgFull.style.visibility = 'visible';
alert(imgFull.id);
alert(innerDiv.innerHTML)
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
var width = document.body.clientWidth;
imgDiv.style.margin = 'auto';
// img.src = "fullimage.ashx?ImID=" + index;
if (index ==undefined) {
imgFull.src= "fullimage.ashx?ImID=" + newimgs[0].title;
}
else {
//imgFull = document.getElementById('world');
imgFull.onload = "shiftzoom.remove(this,true)";
imgFull.src = "fullimage.ashx?ImID=" + index;
CurrentPage = GetImageIndex(lnk.parentNode) + 1;
}
Prepare_Pager(imgs.length);
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgFull.width = parseInt(document.body.clientWidth) / 2;
var restheight = parseInt(screen.height) - (parseInt(document.body.clientHeight) + parseInt(screen.availHeight));
var totalheight = ((120) + parseInt(screen.availHeight) + parseInt(screen.availHeight)) - parseInt(restheight);
var test = parseInt(document.body.clientWidth) * parseInt(document.body.clientWidth);
var newheight = parseInt(test) / parseInt(screen.availHeight);
newheight = parseInt(newheight) / 2;
imgDiv.style.width = imgFull.width + "px";
//window.location.reload();
return false;
}
function doPaging(id) {
var imgFull = document.getElementById("world");
//imgFull.style.display = 'block';
// alert(i);
if (newimgs.length > i) {
//alert(i);
i = parseInt(i) + 1;
//alert(newimgs[i].src);
//alert(i);e
if (i == newimgs.length) {
i = 0;
return;
}
if (newimgs[i].src != "") {
//alert(imgFull.src);
imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title;
// alert(imgFull.src);
}
}
else {
i = 0;
imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title;
}
}
function doPaging1(id) {
var imgFull = document.getElementById("world");
//imgFull.style.display = 'block';
//alert(i);
if (i <= newimgs.length) {
i = parseInt(i) - 1;
// alert(i);
if (i == -1) {
i = 0;
return;
}
if (newimgs[i].title != "") {
// alert(imgFull.src);
imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title;
}
}
else {
i = 0;
imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title;
}
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("wrapper");
var imgFull = document.getElementById("world");
bcgDiv.style.display = "none";
imgDiv.style.margin = "-9999px";
//window.close();
}
var CurrentPage = 1;
function GetImageIndex(obj) {
try {
while (obj.parentNode.tagName != "TD")
obj = obj.parentNode;
}
catch (err) {
//alert("Error on this Page");
}
try {
var td = obj.parentNode;
var tr = td.parentNode;
if (td.rowIndex % 2 == 0) {
return td.cellIndex + tr.rowIndex;
}
else {
return td.cellIndex + (tr.rowIndex * 2);
}
}
catch (err) {
//alert("second page error");
}
}
function Prepare_Pager(imgCount) {
var Previous = document.getElementById("Previous");
var Next = document.getElementById("Next");
var lblPrevious = document.getElementById("lblPrevious");
var lblNext = document.getElementById("lblNext");
//alert(imgCount);
if (CurrentPage < imgCount) {
lblNext.style.display = "none";
Next.style.display = "block";
}
else {
lblNext.style.display = "block";
Next.style.display = "none";
}
if (CurrentPage > 1) {
Previous.style.display = "block";
lblPrevious.style.display = "none";
}
else {
Previous.style.display = "none";
lblPrevious.style.display = "block";
}
if (imgCount > 1) {
lblNext.style.display = "none";
Next.style.display = "block";
Previous.style.display = "block";
lblPrevious.style.display = "none";
}
else {
lblNext.style.display = "block";
Next.style.display = "none";
Previous.style.display = "none";
lblPrevious.style.display = "block";
}
}
</script>
///////////////////////
提供最佳解决方案
再次帮助
////////////////////////////////////////
give best solutions
help again
推荐答案
('world')，true);" ToolTip = <％#Eval("id")％>' CssClass = " /> </ ItemTemplate > < AlternatingItemStyle BackColor = " /> < SelectedItemStyle BackColor = " Font-Bold = " ForeColor = " " Font-Bold = " ForeColor = " /> </ asp:DataList > </ asp:Panel > < div id = " 类 = " > < img id = " 类 = " onload = " shiftzoom.remove(this，true);"önmouseover= shiftzoom.add(this，this.style.visibility ='visible'，{buttons:false，fading:true，showcoords:true，pixelcoords:false});" src = " alt = " 大图" border = 0"/> <％-< asp:图片ID = " CssClass = shiftzoom" onload =
('world'),true);" ToolTip='<%#Eval("id")%>' CssClass="hand"/> </ItemTemplate> <AlternatingItemStyle BackColor="#CCCCCC" /> <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /> </asp:DataList> </asp:Panel> <div id="example" class="map"> <img id="world" class="shiftzoom" onload="shiftzoom.remove(this,true);" önmouseover="shiftzoom.add(this,this.style.visibility='visible',{buttons:false,fading:true,showcoords:true,pixelcoords:false});" src="" alt="large image" border="0"/> <%--<asp:Image ID="world" CssClass="shiftzoom" onload="shiftzoom.add(this,{buttons:false,fading:true,showcoords:true,pixelcoords:false});" border="0" runat="server"/>--%> <%-- <img id="Img1" src="" alt="large image" border="0"/>--%> <div id="crosshair_x"> </div> <div id="crosshair_y"> </div> <div class="navig" id="navi-cross"> <div class="navig_north"> <img önclick="move_v('-');" src="images/cursors/nop.gif" width="26" height="15" alt="" border="0" title="move up" /> </div> <div class="navig_west"> <img önclick="move_h('-');" src="images/cursors/nop.gif" width="15" height="26" alt="" border="0" title="move left" /> </div> <div class="navig_info"> <img onmouseover="showTooltip();return false;" önmouseout="killTooltip();return false;" src="images/cursors/nop.gif" width="26" height="26" alt="" border="0" title="" /> </div> <div class="navig_east"> <img önclick="move_h('+');" src="images/cursors/nop.gif" width="15" height="26" alt="" border="0" title="move right" /> </div> <div class="navig_south"> <img önclick="move_v('+');" src="images/cursors/nop.gif" width="26" height="15" alt="" border="0" title="move down" /> </div> </div> <div class="slider_outer" unselectable="on"> <div class="slider_inner"> <div id="slider" class="slider_knob"> </div> </div> <div class="slider_plus"> <img önclick="zoom('+');" src="images/cursors/nop.gif" width="26" height="26" alt="" border="0" title="zoom in" /> </div> <div class="slider_minus"> <img önclick="zoom('-');" src="images/cursors/nop.gif" width="26" height="26" alt="" border="0" title="zoom out" /> </div> </div> </div> <div style="removed:relative;"> <table> <tr> <td align = "left" style="padding:10px;width:200px"> <a id = "Previous" href = "java<!-- no -->script:void(0)" önclick = "doPaging1(this)">Previous</a> <span id="lblPrevious"></span> </td> <td align="center" valign="middle" style ="width:200px"> <input id="btnClose" type="button" value="close" önclick="HideDiv()"/> </td> <td align = "right" style ="padding:10px;width:200px"> <a id = "Next" href = "java<!-- no -->script:void(0)" önclick = "doPaging(this)">Next</a> <span id="lblNext"></span> </td> </tr> </table> </div> </div> ////////////////////////////////////////////// <script type="text/javascript"> var newimgs; var i = 0; //var imgFull; function loadimage(imageid) { var img = new Image(); //var imgFull1 = document.getElementsByName("Img1"); var imgDiv = document.getElementById("example"); alert(imgDiv); alert(imgDiv.innerHTML); alert(imgFull1.alt); alert(imgFull1.src); //imgFull.src = ""; //alert(imgFull.src); img.src = "fullimage.ashx?ImID=" + imageid; //imgFull1.src = img.src; alert(img.src); // imgFull.style.display = 'none'; //alert(imgFull.src); return false; } function LoadDiv(url, lnk, index) { var dl = document.getElementById('<%=DataList12.ClientID%>'); var imgs = dl.getElementsByTagName("img"); var img = new Image(); newimgs = imgs; i = index; var bcgDiv = document.getElementById("divBackground"); var imgDiv = document.getElementById("wrapper"); var innerDiv=document.getElementById("example"); var imgFull = document.getElementById("world"); // var imgFull = document.createElement("img"); // imgFull.setAttribute('id', 'world'); // imgFull.setAttribute('onmouseover', "shiftzoom.add(this,{buttons:false,fading:true,showcoords:true,pixelcoords:false});"); // imgFull.setAttribute('border', '0'); // imgFull.setAttribute('alt', 'large image'); // // innerDiv.appendChild(imgFull); imgFull.style.visibility = 'visible'; alert(imgFull.id); alert(innerDiv.innerHTML) if (document.body.clientHeight > document.body.scrollHeight) { bcgDiv.style.height = document.body.clientHeight + "px"; } else { bcgDiv.style.height = document.body.scrollHeight + "px"; } var width = document.body.clientWidth; imgDiv.style.margin = 'auto'; // img.src = "fullimage.ashx?ImID=" + index; if (index ==undefined) { imgFull.src= "fullimage.ashx?ImID=" + newimgs[0].title; } else { //imgFull = document.getElementById('world'); imgFull.onload = "shiftzoom.remove(this,true)"; imgFull.src = "fullimage.ashx?ImID=" + index; CurrentPage = GetImageIndex(lnk.parentNode) + 1; } Prepare_Pager(imgs.length); bcgDiv.style.width = "100%"; bcgDiv.style.display = "block"; imgFull.width = parseInt(document.body.clientWidth) / 2; var restheight = parseInt(screen.height) - (parseInt(document.body.clientHeight) + parseInt(screen.availHeight)); var totalheight = ((120) + parseInt(screen.availHeight) + parseInt(screen.availHeight)) - parseInt(restheight); var test = parseInt(document.body.clientWidth) * parseInt(document.body.clientWidth); var newheight = parseInt(test) / parseInt(screen.availHeight); newheight = parseInt(newheight) / 2; imgDiv.style.width = imgFull.width + "px"; //window.location.reload(); return false; } function doPaging(id) { var imgFull = document.getElementById("world"); //imgFull.style.display = 'block'; // alert(i); if (newimgs.length > i) { //alert(i); i = parseInt(i) + 1; //alert(newimgs[i].src); //alert(i);e if (i == newimgs.length) { i = 0; return; } if (newimgs[i].src != "") { //alert(imgFull.src); imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title; // alert(imgFull.src); } } else { i = 0; imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title; } } function doPaging1(id) { var imgFull = document.getElementById("world"); //imgFull.style.display = 'block'; //alert(i); if (i <= newimgs.length) { i = parseInt(i) - 1; // alert(i); if (i == -1) { i = 0; return; } if (newimgs[i].title != "") { // alert(imgFull.src); imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title; } } else { i = 0; imgFull.src = "fullimage.ashx?ImID=" + newimgs[i].title; } } function HideDiv() { var bcgDiv = document.getElementById("divBackground"); var imgDiv = document.getElementById("wrapper"); var imgFull = document.getElementById("world"); bcgDiv.style.display = "none"; imgDiv.style.margin = "-9999px"; //window.close(); } var CurrentPage = 1; function GetImageIndex(obj) { try { while (obj.parentNode.tagName != "TD") obj = obj.parentNode; } catch (err) { //alert("Error on this Page"); } try { var td = obj.parentNode; var tr = td.parentNode; if (td.rowIndex % 2 == 0) { return td.cellIndex + tr.rowIndex; } else { return td.cellIndex + (tr.rowIndex * 2); } } catch (err) { //alert("second page error"); } } function Prepare_Pager(imgCount) { var Previous = document.getElementById("Previous"); var Next = document.getElementById("Next"); var lblPrevious = document.getElementById("lblPrevious"); var lblNext = document.getElementById("lblNext"); //alert(imgCount); if (CurrentPage < imgCount) { lblNext.style.display = "none"; Next.style.display = "block"; } else { lblNext.style.display = "block"; Next.style.display = "none"; } if (CurrentPage > 1) { Previous.style.display = "block"; lblPrevious.style.display = "none"; } else { Previous.style.display = "none"; lblPrevious.style.display = "block"; } if (imgCount > 1) { lblNext.style.display = "none"; Next.style.display = "block"; Previous.style.display = "block"; lblPrevious.style.display = "none"; } else { lblNext.style.display = "block"; Next.style.display = "none"; Previous.style.display = "none"; lblPrevious.style.display = "block"; } } </script>
////////////////////////////////////////
give best solutions
help again
////////////////////////////////////////
give best solutions
help again
myElement.style.visibility = "visible".
myElement.style.visibility = "visible".
这篇关于我正在使用shiftzoom自己的项目.它的隐藏图片元素.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
