Data Presentation Controls

Re: Thumbnail image

vinz — Tue, 07 Jul 2009 04:25:04 GMT

polachan:
I am a beginner in asp.net and C#. I am tring to enlarge an image in a gridview imagefield boundcontrol. But that was not success. Please anybody can help me to enalrge the image while doubleclick the image column.

This should help you:

Image Gallery using ASPNet GridView

Re: Thumbnail image

ameenkpn — Tue, 07 Jul 2009 03:01:34 GMT

Try out the same way as mentioned in the below article.

http://www.aspdotnetcodes.com/Asp.Net_Dynamic_Thumbnail_Creation.aspx

Re: Thumbnail image

polachan — Sun, 05 Jul 2009 16:08:40 GMT

Please can you just look through my code given below and advice me step by step to make the code as you given in ur example. I am a beginner in ASP.Net and C#. I want to make my program as you said. Please help

@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="frmEvent.aspx.cs" Inherits="learn.frmEvent" %>

asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">asp:Content>asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="#DEBA84" BorderColor="#DEBA84" DataSourceID="SqlDataSource1" Width="1025px" AllowPaging="True" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2">

<asp:BoundField DataField="ObjectName" HeaderText="Name" SortExpression="ObjectName">

</asp:BoundField>

<asp:BoundField DataField="EventDate" HeaderText="Date" SortExpression="EventDate" DataFormatString="{0:d}" />

<asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description">

</asp:BoundField>

<asp:TemplateField HeaderText="Picture">

<asp:Image ID="Image1" runat="server" src='<%# DataBinder.Eval(Container.DataItem, "FilePath") %>' Width="117px" onclick="togglePopupImage(this);" /> </ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

{

$get(

}

WHERE ObjectType = 'E'"></

function togglePopupImage(thumbnail) 'spnImageText').innerHTML = thumbnail.alt;'imgPopup').src = thumbnail.src;</script> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [ObjectName], [EventDate], [Description], [FilePath], [ObjectType] FROM [LearnPlus].[WhoAmI]asp:SqlDataSource>asp:Content>

Re: Thumbnail image

PeteNet — Sat, 04 Jul 2009 18:27:37 GMT

Matt Berseth has a great example here: http://mattberseth2.com/modal_popup_extender_image_preview/ (code is here: http://mattberseth.com/blog/2007/07/modalpopupextender_example_cre.html)

I've adapted to use in a gridview like this working sample complete with dummy data, try it out as is replacing your images (I'm using 01.jpg):

ASPX:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
<style>
        .modalBackground {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
        .thumbnail{
            height: 100px;
            width: 130px;
            cursor: hand;
        } 
        .imgpopup{
            height: 576px;
            width: 768px;
        }            
    </style>
<script type="text/javascript">
   
        function togglePopupImage(thumbnail){
            $get('spnImageText').innerHTML = thumbnail.alt;
            $get('imgPopup').src = thumbnail.src;             
        }
    </script>
    
</head>
<body>
    <form id="form1" runat="server">

            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>    
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="RowNumber" HeaderText="Header1" />
                    <asp:TemplateField HeaderText="Column1">
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Column1") %>' ></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Column3">
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%#Eval("Column2") %>' ></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Column4">
                        <ItemTemplate>
                            <img id="img01" runat="server" class="thumbnail" src='<%# "Images/" + Eval("Column3") %>' alt="Big gold ball hovering on water"
                                onclick="togglePopupImage(this);" />
                            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" targetcontrolid="img01" popupcontrolid="pnlPopup"
                                backgroundcssclass="modalBackground" dropshadow="false" cancelcontrolid="btnCancel" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
            <br />
            
            <asp:Panel ID="pnlPopup" runat="server">
                <table>
                    <tr>
                        <td colspan="2">
                            <img id="imgPopup" class="imgpopup" runat="server" />        
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="spnImageText" />
                        </td>
                        <td align="right">
                              
                        </td>
                    </tr>
                </table>
            </asp:Panel> 
            
        </div>
    </form>
</body>
</html>

ASPX.CS:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = InıtialRows();
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
        }

        protected DataTable InıtialRows()
        {
            DataTable dt = new DataTable();
            DataRow dr = null;
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Column1", typeof(string)));
            dt.Columns.Add(new DataColumn("Column2", typeof(string)));
            dt.Columns.Add(new DataColumn("Column3", typeof(string)));
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Column1"] = string.Empty;
            dr["Column2"] = string.Empty;
            dr["Column3"] = "01.jpg";
            dt.Rows.Add(dr);

            return dt;
        }

the modalpopup really serves its purpose here ...

Re: Thumbnail image

Abdulla.AbdelHaq — Sat, 04 Jul 2009 11:14:40 GMT

see this

http://forums.asp.net/p/1432152/3215937.aspx#3215937

Thumbnail image

polachan — Sat, 04 Jul 2009 07:41:23 GMT

Hi all ,

I am a beginner in asp.net and C#. I am tring to enlarge an image in a gridview imagefield boundcontrol. But that was not success. Please anybody can help me to enalrge the image while doubleclick the image column.

Please see the code below and give me a sample code to use the same way in gridview imagefield. The image field name 'FilePath' . So how I can bring the following code for a gridview imagefield. Please help

<asp:datalist id="dlImages" Runat="server" Width="90%"
            ItemStyle-HorizontalAlign="Left" RepeatLayout="Table"
            RepeatDirection="Horizontal" RepeatColumns="4"
            OnItemDataBound="dlImages_ItemDataBound">
        <ItemTemplate>
            <asp:Image id="imgThumbnail" runat="server" borderSize="5" ImageUrl='<% # Eval("ImageFieldFromDb") %>'/>
        </ItemTemplate>
        </asp:datalist>

protected void dlImages_ItemDataBound(object sender,
        DataListItemEventArgs e)
    {
        System.Web.UI.WebControls.Image img = null;
   String strImage = String.Empty;

        // make sure this is an item in the data list (not header etc.)

        if ((e.Item.ItemType == ListItemType.Item) ||
            (e.Item.ItemType == ListItemType.AlternatingItem))
        {
            // get a reference to the image used for the bar in the row

            img = (System.Web.UI.WebControls.Image)
                (e.Item.FindControl("imgThumbnail"));

                    strImage = img.ImageUrl.ToString();
                    strImage = strImage.Replace("~", "..");
                    imgBlogImage.Attributes.Add("onClick","javascript:window.open('PopUpWindow.aspx?Id=" + strImage + "',null,'left=162px,   top=134px, width=500px, height=500px,status=no, resizable= yes, scrollbars=yes, toolbar=no, location=no,menubar=no');");
        }
    }