Welcome Guest Search | Active Topics | Sign In | Register

ImageZoom Options
Always Learning
Posted: Tuesday, December 8, 2009 10:03:42 AM
Rank: Member
Groups: Member

Joined: 12/8/2009
Posts: 26
Hi There,

In the demo application under, ImageZoom/ Features/, there is a "Custom Zoom Out Panel" demo that displays a description and additional information along with the large image. Can this be acheived in the "ImageZoom with Datagrid" demo, so when I click on an image in the datagrid the large image shows with the description and additional info.

Thanks for your help.

Best Regards.
eo_support
Posted: Tuesday, December 8, 2009 10:12:32 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Yes. I believe you can. There is no real difference when using with DataGrid regarding custom zom out panel. You just copy the template over and you should be all set.

Thanks!
Always Learning
Posted: Tuesday, December 8, 2009 10:32:08 AM
Rank: Member
Groups: Member

Joined: 12/8/2009
Posts: 26
Hi There,
Thanks for the reply.

Ok I have copied over the template and it shows the info but I can not get it to show different info for each row/image in the datagrid.

Can I do that?

Best Regards,
eo_support
Posted: Tuesday, December 8, 2009 10:36:39 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

I am not sure how you copied it. But if you just copy the <ZoomPanelTemplate> part from "Custom Zoom Out Panel" sample into "ImageZoom with DataGrid" sample, insert the copied <ZoomPanelTemplate> block inside the <eo:ImageZoom> elements in the template column and it should work for you. The key is don't copy the whole ImageZoom control, only copy ZoomPanelTemplate part.

Thanks
Always Learning
Posted: Tuesday, December 8, 2009 10:51:38 AM
Rank: Member
Groups: Member

Joined: 12/8/2009
Posts: 26
Hi There,
This is what I have. I inserted from "Zoom Panel Template"

<asp:BoundColumn DataField="Desc" HeaderText="Description"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<eo:ImageZoom runat="server" id="ImageZoom1" SmallImageUrl='<%#DataBinder.Eval(Container.DataItem, "SmallImage")%>' BigImageUrl='<%#DataBinder.Eval(Container.DataItem, "BigImage")%>' Description='<%#DataBinder.Eval(Container.DataItem, "Desc")%>' LoadingPanelID="loading">
<ZoomPanelTemplate>
<table>
<tr align="left">
<td align="right">Picture Taken By:</td>
<td align="left">Steve Wilson</td>
</tr>
<tr align="left">
<td align="right">Date:</td>
<td align="left">08/12/2009</td>
</tr>
<tr>
<td colspan="2">{var:big_image}</td>
</tr>
</table>
</ZoomPanelTemplate>
<ZoomPanelStyle CssText="background-color:#ffffff;border:solid #d0d0d0 1px;padding:5px;"></ZoomPanelStyle>
</eo:ImageZoom>
</ItemTemplate>
</asp:TemplateColumn>

As you can see the "Picture Taken By:" and "Date" will be the same for all three images.

Best Regards,

Steve.
eo_support
Posted: Tuesday, December 8, 2009 11:57:29 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

This is normal. You have put in "Picture Taken By: Steve Wilson" in your template. There is no reason to expect it to display anything else. The template always follows whatevever you put in first, then replaces certain segments you have marked with special syntax. In your code "{var:big_image}" is the one that's get replaced. Everything else stays.

ImageZoom supports "{var:big_image}" and "{var:description}" out of box. There are several ways to extend that. The easiest way is to provide a different template for each ImageZoom control. The following code shows you how to do that:

Code: HTML/ASPX
<asp:DataGrid id="DataGrid1" 
    OnItemDataBound="DataGrid1_ItemDataBound" ....>
....
</asp:DataGrid>


Code: C#
protected void DataGrid1_ItemDataBound(
    object sender, DataGridItemEventArgs e)
{
    if ((e.Item.ItemType == ListItemType.Item) ||
        (e.Item.ItemType == ListItemType.AlternatingItem))
    {
        //Find the ImageZoom control for this row
        EO.Web.ImageZoom iz = (EO.Web.ImageZoom)e.Item.FindControl("ImageZoom1");

        //The following code creates a dynamic ClientTemplate 
        //for this ImageZoom control. 
        ClientTemplate template = new ClientTemplate();

        //Get your data. For example, if you have "TakenBy"
        //in your DB, you can get it from here. Note the type
        //of e.Item.DataItem depends on the type of your
        //data source. So you may need to change DataRowRow
        //to something else.
        DataRowView row = (DataRowView)e.Item.DataItem;

        //This code just get the big image Url because it's
        //what's available in our sample data source. You will
        //need to change this
        string imageUrl = (string)row["BigImage"];

        //Now creates the dynamic template text based on
        //whatever logic you have. 
        template.Text = string.Format("&lt;p&gt;{{var:big_image}}&lt;/p&gt;&lt;p&gt;Url: {0}&lt;/p&gt;", imageUrl);

        //Assign the template to the ImageZoom control
        iz.ZoomPanelTemplate = template;
    }
}


Hope this helps.

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.