How to Open Sitefinity News Details in a LightBox

How to Open Sitefinity News Details in a LightBox

Posted on April 24, 2013 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

You're already familiar with the lightbox mode of the Sitefinity CMS video and image galleries. This blog post is going to show you how to show the details page of content items in lightbox, as well.

We'll start with modifying one of the existing or creating a new news template. You can place the markup directly in the template editor of Sitefinity:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NewsTemplate.ascx.cs" Inherits="SitefinityWebApp.Widgets.NewsTemplate" %>
 
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" 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>
<telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <LayoutTemplate>
        <sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>
        <ul class="sfnewsList sfnewsListTitleDate">
            <asp:PlaceHolder ID="ItemsContainer" runat="server"/>
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
           <li class="sfnewsListItem">
            <h2 class="sfnewsTitle">
                <sf:DetailsViewHyperLink TextDataField ld="Title" ToolTipDataField="Description" runat="server" Relevance="fancybox"/>
            </h2>
            <div class="sfnewsMetaInfo">
                <sf:FieldListView ID="PublicationDate" runat="server" Format="{PublicationDate.ToLocal():MMM dd, yyyy}" WrapperTagName="span"/>
                <sf:CommentsBox ID="itemCommentsLink" HyperLinkNoCommentsText="Join the conversation" runat="server" CssClass="sfnewsCommentsCount"/>
            </div>
            <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>
        </li>
    </ItemTemplate>
</telerik:RadListView>
<sf:Pager id="pager" runat="server"></sf:Pager>
<asp:PlaceHolder ID="socialOptionsContainer" runat="server"/>
Notice that we're adding jQuery and FancyBox to the new template. For the lightbox mode of the Sitefinity galleries we're using FancyBox, which is a jQuery plugin. The best approach would be to use the ResourceLinks control and load this javascript from our dlls directly. The second modification we make is we add a Relevance attribute to the DetailsViewHyperLinks, which handles opening the details news page. Now the last thing we need to do is call the fancyBox() function on the page. You can place the following javascript code in a javaScript widget on the page (or in script tags on a master page):
$(document).ready(function() {
                $("a[rel*='fancybox']").fancybox({
                    'width': 900,
                    'height': 675,
                                      'type': 'iframe'
                  
                });
            });
As you see with this code we'll open the details page in an iframe. You must keep in mind that if you're using a javaScript widget, you need to place it in the body tag (for example - where the widget is dropped or before the closing Body tag). This is done to make sure that jQuery, fancyBox and the markup that we're using will be loaded before the execution of the script. 

With these slight modifications you have a working lightbox rotator. You can check how it works in this video:
progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation