Listview with RadBinaryImage with and lightbox

[Patkós]

Hello,

Is there a way to get Listview with RadBinaryImage and Jquery-Lightbox, where the ImageURL is not given just (RBI) DataValue?

I found examples,  howto use lightbox with simple asp-image, but is there a way too, to make it with Images from DB- RadBinary images?

Thanks for your help.

Zoltán 

[Vasil]

Hi Patkós,

Yes you can, but it is not supported by default and you will need to write a lot of custom code.

According to jQuery lightBox's documentation, html markups need to be like:

<a href="image.jpg"><img src="thumb_image.jpg" /></a>

Now when you use RadBinaryImage, and you get images from the database. By default they are rendered like:

<img src="../../../Telerik.Web.UI.WebResource.axd?imgid=59d0a47b24764d71b874e66dde1ee0c8&type=rbi" id="RadListView1_ctrl0_RadBinaryImage1" ... >

So you can use the code below in the ListView ItemTemplate:

<a id='aHref' href="#" runat="server">
  <telerik:RadBinaryImage runat="server" ID="RadBinaryImageThumb" DataValue='<%#Eval("PhotoThumb") %>' />
</a>
<telerik:RadBinaryImage runat="server" ID="RadBinaryImageFull" DataValue='<%#Eval("PhotoFull") %>' />

Then you need to handle ItemDataBound event of the ListView and set 'href' property of the aHref, to be like the url of the RadBinaryImageFull. Also you will need to set display style to RadBinaryImageFull to be 'none'.

Kind regards,
Vasil
the Telerik team

[Andry]

Hi Vasil,

So, how do I get the url of RadBinaryImageFull?

Cheers,

Andry

[Vasil]

Hi Andry,

Check the example code-snippets below:

Aspx:

<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                    ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# Eval("Photo") %>' OnUnload="RadBinaryImage1_PreRender" />

C#:

public void RadBinaryImage1_PreRender(object sender, EventArgs e)
{
    string url = (sender as RadBinaryImage).ImageUrl;
}

All the best,
Vasil
the Telerik team