Single Image using Lightbox Overlay - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 16-Mar-2011 00:00

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?

Thanks,

Brian

Posted by Community Admin on 04-Apr-2011 00:00

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.

Regards,
Lyubomir Dokov
the Telerik team

Posted by Community Admin on 12-Jan-2012 00:00

Hi,
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>
<sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css" Static="true" />
</sf:ResourceLinks>
<sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar>
<telerik:RadListView ID="ItemsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
<LayoutTemplate>
    <ul class="sfimagesTmbList sfLightboxMode">
      <asp:PlaceHolder ID="ItemsContainer" runat="server"/>
    </ul>
</LayoutTemplate>
<ItemTemplate>
    <li class="sfimagesTmb">
      <sf:SitefinityHyperLink
          CssClass="sfLightBox"
          runat="server"
          rel="mainImageGallery"
          id="singleItemLink"/>
    </li>
</ItemTemplate>
</telerik:RadListView>
<sf:Pager id="pager" runat="server"></sf:Pager>

Posted by Community Admin on 16-Jan-2012 00:00

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

This thread is closed