Results 1 to 2 of 2

Thread: How to enlarge an image by just clicking the listview row?

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Sep 2009
    Posts
    74

    Question How to enlarge an image by just clicking the listview row?

    Hi everyone!

    I'm using asp.net and I need help in modifying my codes in javascript where I used to display and enlarge image after clicking the listview row. I have tried using image button in the listview control and it works using the codes below when you click the image button. But, I want to remove the image button from the listview and I just want to click the IDLabel of the listview control to display and enlarge the image which is located in my "Images" root folder.As of now all
    I've got is an enlarge blank image after clicking the row.Please help me modify my codes to display the image. Thanks...Here's my codes below for your reference.

    Javascript:
    Code:
    <script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
        
        <script type="text/javascript" >
        
                    var row;
                    var id,fname;
                   
                    function Display(rowval)
                    {
                           row = $(rowval).parent().parent();
                            row.addClass("highlightRow");
    
                            var idLabel = rowval.id;
                            var fnameLabel = rowval.id.replace("IDLabel","FilenameLabel");
    
                            id = $('#' + idLabel).text();
                            fname = $('#' + fnameLabel).text();
                             
                            var img = new Image();
        var bcgDiv = document.getElementById("divBackground");
        var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        
        img.onload = function() {
            
            img.src = "~/Images/" + fname;
            imgFull.src = img.src;
            imgFull.style.display = "block";
             };
        img.src= rowval;
        
        var width = document.body.clientWidth;
        if (document.body.clientHeight > document.body.scrollHeight)
        {
            bcgDiv.style.height = document.body.clientHeight + "px";
        }
        else
        {
            bcgDiv.style.height = document.body.scrollHeight + "px" ;
        }
     
        imgDiv.style.left = (width-650)/2 + "px";
        imgDiv.style.top =  "20px";
        bcgDiv.style.width="100%";
       
        bcgDiv.style.display="block";
        imgDiv.style.display="block";
        //return false;
     }
     function HideDiv()
     {
        var bcgDiv = document.getElementById("divBackground");
       var imgDiv = document.getElementById("divImage");
        var imgFull = document.getElementById("imgFull");
        if (bcgDiv != null)
        {
            bcgDiv.style.display="none";
            imgDiv.style.display="none";
            imgFull.style.display = "none";
        }
     }
                                                                                         
        </script>
    Used to display enlarge image:
    Code:
    <div id="divBackground" class="modal">
    </div>
    <div id="divImage">
        <table style="height: 100%; width: 100%">
            <tr>
                <td valign="middle" align="center">
                    
                    <img id="imgFull" alt="" src=""
                     style="display: none;
                    height: 500px;width: 590px" />
                </td>
            </tr>
            <tr>
                <td align="center" valign="bottom">
                    <input id="btnClose" type="button"  value="close"
                     onclick="HideDiv()"/>
                </td>
            </tr>
        </table>
    </div>
    Asp.Net codes from the Listview item template:
    Code:
    <ItemTemplate>
            <tr style="background-color:#DCDCDC;color: #000000;">
                <td>
                    <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' style = "cursor : pointer " onclick = "return Display(this);" />
                </td>
                <td>
                    <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
                </td>
                <td>
                    <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
                </td>
                <td>
                    <asp:Label ID="GenderLabel" runat="server" Text='<%# Eval("Gender") %>' />
                </td>
                <td>
                    <asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />
                </td>
               
                <td>
                    <asp:Label ID="FilenameLabel" runat="server" Text='<%# Eval("Filename") %>' />
                </td>
               
            </tr>
        </ItemTemplate>
    Additional reference: If I used this asp.net codes <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' style = "cursor : pointer " onclick = "return Display(this.src);" />
    I will get this runtime error below

    Microsoft JScript runtime error: 'id' is null or not an object.

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: How to enlarge an image by just clicking the listview row?

    This should probably be moved to the ASP.NET forum. I think it would probably be easiest to just use one of the existing Lightbox scripts floating around the internet. A quick google search will get you many results. eg. http://fancyapps.com/fancybox/

    I would also suggest using the latest jQuery, unless you have a very specific reason for using a version as old as 1.4.3.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width