How to Open Sitefinity News Details in a LightBox
by
The Progress Team
Posted on
April 24, 2013
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:
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):
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:
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"/>$(document).ready(function() { $("a[rel*='fancybox']").fancybox({ 'width': 900, 'height': 675, 'type': 'iframe' }); });With these slight modifications you have a working lightbox rotator. You can check how it works in this video:
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.
More from the author
