Hello,

I have a question related to the use of a Repeater control with images, related to the use of the Dialog control. Within this Dialog I use an image to show the selected picture.

In the repeater control I have a couple of images with all of them (ofcourse) an unique imageurl. The images in the repeater are based on thumbnails. I use the thumbnails to speed up the loading process.

When an user clicks on one of the images (thumbnail), I want to display a large image, based on the releated image-url. Therefore I use the Dialog control to popup the large image.
I use the show and close effects like IrisCircleIn and IrisCircleOut.

The question.

Is there an easy way to pass the imageurl from the Repeater-item to the Dialog image?
This, before the Dialog popsup.
I now use a server-callback to set the url of the large image within the Dialog.
But never the less, this will take some time every time an user chooses an other image.

Secondly, with the use of this server-callback, the IrisCircleOpen effect is not showed at all.

I hope you can help me.

Kind regards
Martin

Hi,

Your suggestion doesn't work .. :-(
I Think I do something wrong, and oversee something in my code.
I put the code of my page hereby.

Kind regards
Martin




<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="A091-Fotos-Algemeen.aspx.cs" Inherits="A091_Fotos_Algemeen" Title="Sint Jozef - Fotos - Algemeen" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Midden" Runat="Server">
<script type="text/javascript">
function ToonImage()
{ document.getElementById("Vergroting").src = "~/img/Fotos/Vereniging - Vergroting.jpg";
eo_GetDialog("Dialog1").show();
}
</script>

<div id="div1" style="font-family:Arial; font-size:18px; color: #000099; position:relative; left:10px;">
Foto's Algemeen
</div>
<div style="height:350px; background-image: url(img/Achtergrond-Vereniging.jpg); background-repeat: no-repeat; border-top: #f5f5f5 4px solid;">
<div id="div2" style="height:350px; width:230px; overflow:hidden; float:left; font-family:Arial; font-size:12px; text-align:left; position:relative; left:10px;">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div style="height:30px; float:left;">
<asp:Button ID="Button1" runat="server" Height="25" Width="200px" OnCommand="Button1_Click" Text='<%# Eval("Name") %>' CommandArgument='<%# Eval("Name") %>' CommandName='<%# Eval("Name") %>' Enabled="true" BackColor="Silver" BorderStyle="None" Font-Size="10px" Font-Names="Arial" Font-Bold="true" Font-Underline="false" Font-Overline="false" onmouseover="this.style.background='#FFFF99'" onmouseout="this.style.background='Silver'" /><br />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="div3" style="height:350px; width:610px; overflow:auto; float:none; font-family:Arial; font-size:12px;" >
<asp:Repeater ID="Repeater2" runat="server" >
<ItemTemplate>
<div style=" height:110px; width:145px; text-align:left; float:left;">
<asp:ImageButton ID="Foto1" OnClientClick="ToonImage()" runat="server" Height="100px" Width="135px" ImageUrl='<%# "http://www.sintjozef-bussum.nl/fotos/" + Eval("Directory.Parent") + "//" + Eval("Directory.Name") + "//" + Eval("Name") %>' CommandArgument='<%# "http://www.sintjozef-bussum.nl/fotos/" + Eval("Directory.Parent") + "//" + Eval("Directory.Name") + "//" + Eval("Name") %>' />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>

<!-- =================================================== -->
<!-- Definities voor popup -->
<!-- =================================================== -->
<eo:Dialog ID="Dialog1" runat="server" Width="500px" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px" CloseButtonUrl="00070101" ControlSkinID="None" HeaderHtml="Muziekvereniging Sint Jozef" ShadowColor="LightGray" ShadowDepth="3" AllowMove="False" BackShadeColor="Gray" BackShadeOpacity="80" InitialState="Hidden" >
<ContentTemplate>
<div style="width:750px; height:500px; font-family:Arial; font-size:12px; text-align:left;">
<img alt="" id="Vergroting" runat="server" style="height:500px; width:750px;" src="~/img/Fotos/Vereniging - Vergroting.jpg" />
</div>
</ContentTemplate>
<HeaderStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 11px; background-image: url(00070104); padding-bottom: 3px; padding-top: 3px; font-family: tahoma" />
<ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: #FFFFFF" />
<FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
<ShowEffect Duration="800" Steps="5000" Type="IrisCircleOut" />
<CloseEffect Duration="800" Steps="5000" Type="IrisCircleIn" />
</eo:Dialog>

</asp:Content>