How to Open Sitefinity News Details in a LightBox

How to Open Sitefinity News Details in a LightBox

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 Guys

View all posts from The Progress Guys 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
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
d12fcc0bdb669b804e7f71198c9619a7
5 Questions Automakers Should Ask to Improve Asset Uptime
Download Whitepaper
 
SF_MQ_WCM
2018 Gartner Magic Quadrant Web Content Management (WCM)
Download Whitepaper
 
What-Serverless-Means-For-Enterprice-Apps-Kinvey
What Serverless Means for Enterprise Apps
Watch Webinar