S
Sully
Hi Guys,
I have this about 98% done and I cannot get it work properly. I have a
Repeater bound to a MySQL DataSource, inside the Repeater I have an
ImageButton, outside the repeater I have a Image, code is below:
<asp:Image ID="imgLarge" Name="imgLarge" runat="server"
AlternateText="Large Custom Image" Height="300" Width="400" />
<asp:Repeater ID="rptSmall" runat="server"
OnItemDataBound="rptSmall_ItemDataBound1">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:ImageButton ID="ibtnSmall" runat="server"
Height="79" Width="105" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
The OnItemDataBound command is setting the ImageURL and OnClientClick
command:
protected void rptSmall_ItemDataBound1(object sender,
RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
{
DataRowView drv = (DataRowView)e.Item.DataItem;
string ID = drv["ID"].ToString();
ImageButton myIBTN =
((ImageButton)e.Item.FindControl("ibtnSmall"));
myIBTN.ImageUrl = "~/images/pages/customInstalls/
SM/" + ID + ".jpg";
myIBTN.OnClientClick = "javascript:replaceImg('" +
myIBTN.ImageUrl.Replace("SM", "LG").Replace("~", "..") + "');";
imgLarge.ImageUrl = "~/images/pages/customInstalls/
LG/" + ID + ".jpg";
}
}
}
When the ImageButton is clicked it should change the large image
(imgLarge) to the small image being clicked with the javascript below:
<script type="text/javascript" language="JavaScript">
function replaceImg(path) {
var Image = document.getElementById('imgLarge');
Image.setAttribute("src", path);
}
</script>
For some reason, the large image (imgLarge) is only flickering to the
selected image and then going back to the default URL. if (!
Page.IsPostBack) is at the top of the Page_Load. Any ideas would
really be helpful.
Thanks in Advance,
Sully
I have this about 98% done and I cannot get it work properly. I have a
Repeater bound to a MySQL DataSource, inside the Repeater I have an
ImageButton, outside the repeater I have a Image, code is below:
<asp:Image ID="imgLarge" Name="imgLarge" runat="server"
AlternateText="Large Custom Image" Height="300" Width="400" />
<asp:Repeater ID="rptSmall" runat="server"
OnItemDataBound="rptSmall_ItemDataBound1">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:ImageButton ID="ibtnSmall" runat="server"
Height="79" Width="105" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
The OnItemDataBound command is setting the ImageURL and OnClientClick
command:
protected void rptSmall_ItemDataBound1(object sender,
RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
{
DataRowView drv = (DataRowView)e.Item.DataItem;
string ID = drv["ID"].ToString();
ImageButton myIBTN =
((ImageButton)e.Item.FindControl("ibtnSmall"));
myIBTN.ImageUrl = "~/images/pages/customInstalls/
SM/" + ID + ".jpg";
myIBTN.OnClientClick = "javascript:replaceImg('" +
myIBTN.ImageUrl.Replace("SM", "LG").Replace("~", "..") + "');";
imgLarge.ImageUrl = "~/images/pages/customInstalls/
LG/" + ID + ".jpg";
}
}
}
When the ImageButton is clicked it should change the large image
(imgLarge) to the small image being clicked with the javascript below:
<script type="text/javascript" language="JavaScript">
function replaceImg(path) {
var Image = document.getElementById('imgLarge');
Image.setAttribute("src", path);
}
</script>
For some reason, the large image (imgLarge) is only flickering to the
selected image and then going back to the default URL. if (!
Page.IsPostBack) is at the top of the Page_Load. Any ideas would
really be helpful.
Thanks in Advance,
Sully