More in this section

Forums / General Discussions / Single Image using Lightbox Overlay

Single Image using Lightbox Overlay

4 posts, 0 answered
  1. Brian
    Brian avatar
    31 posts
    25 Jun 2009
    16 Mar 2011
    Link to this post
    Hi All,

    I have a custom layout that I developed & in this custom layout the user will use the image control to place an image in the page.  I'll be using CSS to slim down the width & height of the uploaded image to match design specs, but what I would like to do is apply the Sitefinity Lightbox Overlay to a link tag that is wrapped around this image.  I know I could have the user use the image gallery control & filter the image based on tags, but it would really be simpler for them to use the image control.

    I've seen that the images in the image gallery control that use the lightbox overlay have a class of sfLightBox & a rel of mainImageGallery.  When I try & apply these settings to my link that is wrapped around my image, it simply opens the image in the browser.

    Is there any settings I can apply using javascript to have the image open using the Sitefinity overlay method?


  2. Lyubomir Dokov
    Lyubomir Dokov avatar
    43 posts
    06 Jun 2017
    04 Apr 2011
    Link to this post

    Hi Brian,

    Sorry for the delay on this. We are using fancybox. You can do something like this:

    jQuery('#' + "id_of_your_outer_html_element" + " a.sfLightBox").fancybox();
    This should make the <a> with sfLightBox class clickable.

    Lyubomir Dokov
    the Telerik team

  3. karnan sekar
    karnan sekar avatar
    80 posts
    07 Jul 2009
    12 Jan 2012
    Link to this post
    We are having the same issue. Could please tell where should we add this.
    jQuery('#' + "id_of_your_outer_html_element" + " a.sfLightBox").fancybox();

    Below is the template we are using

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <sf:ResourceLinks id="resourcesLinks" runat="server">
      <sf:ResourceFile JavaScriptLibrary="JQuery"/>
      <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox"/>
    <sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
      <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css" Static="true" />
    <sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar>
    <telerik:RadListView ID="ItemsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <ul class="sfimagesTmbList sfLightboxMode">
          <asp:PlaceHolder ID="ItemsContainer" runat="server"/>
        <li class="sfimagesTmb">
    <sf:Pager id="pager" runat="server"></sf:Pager>
  4. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    03 Nov 2014
    16 Jan 2012
    Link to this post
    Hi Karnan,

    You can drop a JavaScript widget on the page and set it to render before the closing </body> tag. Then in this widget you could write some jQuery code like this:

    jQuery(document).ready(function() {
        // Execute the code here

    Kind regards,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered