Listview with RadBinaryImage with and lightbox

4 posts, 0 answers
  1. Patkós
    Patkós avatar
    1 posts
    Member since:
    Jan 2011

    Posted 09 Jan 2011 Link to this post


    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.

  2. Vasil
    Vasil avatar
    1604 posts

    Posted 13 Jan 2011 Link to this post

    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") %>' />
    <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,
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Andry
    Andry avatar
    4 posts
    Member since:
    Sep 2011

    Posted 05 Feb 2012 Link to this post

    Hi Vasil,

    So, how do I get the url of RadBinaryImageFull?


  4. Vasil
    Vasil avatar
    1604 posts

    Posted 07 Feb 2012 Link to this post

    Hi Andry,

    Check the example code-snippets below:

    <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                        ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# Eval("Photo") %>' OnUnload="RadBinaryImage1_PreRender" />
    public void RadBinaryImage1_PreRender(object sender, EventArgs e)
        string url = (sender as RadBinaryImage).ImageUrl;

    All the best,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top