Try Now
More in this section
Blogs RSS feed

How to Open Sitefinity News Details in a LightBox

by Zheyna Peleva
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 id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
  <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css" Static="true"/>
<telerik:RadListView ID="NewsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <sf:ContentBrowseAndEditToolbar ID="MainBrowseAndEditToolbar" runat="server" Mode="Add"></sf:ContentBrowseAndEditToolbar>
        <ul class="sfnewsList sfnewsListTitleDate">
            <asp:PlaceHolder ID="ItemsContainer" runat="server"/>
           <li class="sfnewsListItem">
            <h2 class="sfnewsTitle">
                <sf:DetailsViewHyperLink TextDataField ld="Title" ToolTipDataField="Description" runat="server" Relevance="fancybox"/>
            <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"/>
            <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>
<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() {
                    '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:

Leave a comment