i am using shiftzoom own my project. its hide image element.

See more:

C#

ASP.NET

Java

jQuery

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