locked
Image Library RRS feed

  • Question

  • User-720893289 posted

    Hello friends,

    I have to create an image library. in that I have to display all the images in grid format. say 4 - 5 images in one row then if one clicks on an image it should open an image in original size. So what idea I can use.lease suggest me. I am new in asp.net.

    Thanks & Regards

    Girisah Nehte

    Tuesday, October 23, 2007 8:59 AM

Answers

  • User-221752185 posted

    Yes, you should use the DataList control for this. In the control you can specify how many columns you would like. You can basically look at the DataList as a matrix that allows each cell to be bounded to an object.

    Each cell or Item should consist of the image in small size.

    You can then apply onclick event to dynamically write the nigger image with absolute positioning, or you can use javascript to open a new samller window with the bigger image in it. 
    You don't need to know the names of the images. For instance, if you have image103_small.jpg, the other should be image103_big.jpg;

    Then you can do something like...

    // Code below assumes you have reference to small image oSmallImage 

    var oBigImage = new Image();
    oBigImage.src = oSmallImage.src.replace("small","big");

    prototype.Image.ToString = function() {
    // include more properties if you'd like
    document.write("<img src=\"" + this.src + "\" alt=\"" + this.src + "\" />");
    }

    Or... your images can be of high resolution, and you can use javascript to resize them. Since they are high resolution images, it wont distort.


    Or if you want a solution that is not javascript dependent, the items in your DataList can consist of an image with a hyperlink wrapped around it like so...

    <asp:HyperLink ID="hlImage" runat="server" NavigateUrl="ImageOpener.aspx?imgid=3" ><img src="..." alt="" /></asp:HyperLink>

    Notice, the querstring. It is the row reference to the image url in an xml file or a database. When that page is hit, query your source to determine the image to show.

    Or again, have high resolution files that will grab the image, and resize it using the width and height properties.

     


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 23, 2007 10:27 AM