Using Lightboxes in AxCMS.net 8.5

by dan 30. March 2009 18:37

Many modern websites use lightboxes to present their image contents.

Wouldn´t it be nice to have an easy way to use lightboxes inside AxCMS.net 8.5? In this post I will show how to create a Lightbox Control to be used inside AxCMS.net 8.5 Premium Template Project.

First Steps using Lightbox2

First we need a Lightbox to start from. Let’s choose the Lightbox2 by Lokesh Dhakar, which is very lightweight and easy to integrate. Thanks for the brilliant work done!

After downloading the LightBox2 code we do an easy setup copying all folders contained in the .ZIP file to the accordant folders of the Premium Template Project inside the AxCMSTemplates_PremiumSample folder. The folder “js” had to be created first.

As the Lightbox2 instructions point out, we need to reference the javascript and css files next. Using the AxCMS.net 8.5 Premium Template Project this task is accomplished best in the LoadCSS() method of the PremiumSampleBaseTemplate class:

2: protected virtual void LoadCSS()

3: {

4: if(headTag != null)

5: {

6: string tag = "<link href=\"" + CMSConfigurationSettings.VirtualPath + "/templates/CSS/base.css\" type=\"text/css\" rel=\"stylesheet\" />";

7: headTag.Controls.Add(new LiteralControl(tag));

8: tag = "<link href=\"" + CMSConfigurationSettings.VirtualPath + "/templates/CSS/voting.css\" type=\"text/css\" rel=\"stylesheet\" />";

9: headTag.Controls.Add(new LiteralControl(tag));

10: tag = "<link href=\"" + CMSConfigurationSettings.VirtualPath + "/templates/CSS/lightbox.css\" type=\"text/css\" rel=\"stylesheet\" media=\"screen\"/>";

11: headTag.Controls.Add(new LiteralControl(tag));

12: tag = "<script type=\"text/javascript\" src=\"" + CMSConfigurationSettings.VirtualPath + "/templates/js/prototype.js\"></script>";

13: headTag.Controls.Add(new LiteralControl(tag));

14: tag = "<script type=\"text/javascript\" src=\"" + CMSConfigurationSettings.VirtualPath + "/templates/js/scriptaculous.js?load=effects,builder\"></script>";

15: headTag.Controls.Add(new LiteralControl(tag));

16: tag = "<script type=\"text/javascript\" src=\"" + CMSConfigurationSettings.VirtualPath + "/templates/js/lightbox.js\"></script>";

17: headTag.Controls.Add(new LiteralControl(tag));

18: }

19: }

Please check the lightbox.js as you need to adjust the loading.gif and closelabel.gif path.

Creating a dynamic AxCMS.net 8.5 Template

Next thing we need is a control that makes use of a lightbox. We could think of dynamic lists of documents that can be displays as an image gallery, but I suppose we should start with this one:

We will create a dynamic control that points to two documents:

A thumbnail image to be shown directly on the page
A lightbox image that should be shown whenever a user clicks on the thumbnail image

Additionally we would need a caption to show inside the image lightbox.

So, let´s create a dynamic control: The LightboxImageControl.ascx

The ASP.NET Code is quite simple and reflects an image having a link to another image:

1: <asp:HyperLink ID="hyperlink" runat="server">

2: <asp:Image ID="thumbnail" runat="server" />

3: </asp:HyperLink>

The code behind file reads like this:

2: public partial class LightboxImageControl : BaseControl

3: {

6: private string _caption;

7: public string Caption

8: {

9: get { return _caption; }

10: set { _caption = value; }

11: }

12:

13: private int? _documentID;

14: public int? DocumentID

15: {

16: get { return _documentID; }

17: set { _documentID = value; }

18: }

19:

20: private int? _thumbnailID;

21: public int? ThumbnailID

22: {

23: get { return _thumbnailID; }

24: set { _thumbnailID = value; }

25: }

26:

27: protected override void Bind()

28: {

29: if (ThumbnailID != null)

30: {

31: AxDocument document = (AxDocument)new AxDocumentAdapter().Load((int)_thumbnailID);

32: if (document != null)

33: {

34: thumbnail.ImageUrl = CMSConfigurationSettings.VirtualPath + document.Url;

35: }

36: }

37:

38: if (PremiumSamplePage.IsLiveSystem)

39: {

40: if (DocumentID != null)

41: {

42: AxDocument document = (AxDocument)new AxDocumentAdapter().Load((int)_documentID);

43: if (document != null)

44: {

45: hyperlink.Attributes["title"] = Caption;

46: hyperlink.Attributes["rel"] = "lightbox";

47: hyperlink.NavigateUrl = CMSConfigurationSettings.VirtualPath + document.Url;

48: }

49: }

50: }

51: }

52: }

The properties Caption, DocumentID and ThumbnailID will be utilized by AxCMS.net later on as we define a custom editor for the control.

The Bind() method firsts checks if there is a thumbnail available. If so, it will be loaded into the image tag. After that the method checks if we are in life system. If so, it tries to load an image document to be shown inside the lightbox using the caption defined.

Creating a custom editor template

The custom editor is derived by the FLVPlayerEditor that ships with the Premium Template Project:

1: <table cellpadding="0" cellspacing="5">

2: <tr>

3: <td colspan="2">

4: <asp:literal id="Literal1" runat="server">Please select an image document.</asp:literal>

5: </td>

6: </tr>

7: <tr>

8: <td>

9: <axcms:pagecall id="documentPageCall" runat="server" buttontype="LinkButton" target="_blank"

10: text="select ..." />

11: </td>

12: <td>

13: <asp:hyperlink id="documentLink" runat="server" target="_blank" />

14: </td>

15: </tr>

16: <tr>

17: <td colspan="2">

18: <asp:literal id="Literal2" runat="server">Please select an image thumbnail.</asp:literal>

19: </td>

20: </tr>

21: <tr>

22: <td>

23: <axcms:pagecall id="thumbnailPageCall" runat="server" buttontype="LinkButton" target="_blank"

24: text="select ..." />

25: </td>

26: <td>

27: <asp:hyperlink id="thumbnailLink" runat="server" target="_blank" />

28: </td>

29: </tr>

30: <tr>

31: <td colspan="2">

32: <hr />

33: </td>

34: </tr>

35: <tr>

36: <td colspan="2">

37: <asp:literal id="Literal4" runat="server">Lightbox Image Caption</asp:literal>

38: </td>

39: </tr>

40: <tr>

41: <td colspan="2">

42: <asp:textbox id="captionTextBox" runat="server" />

43: </td>

44: </tr>

45: </table>

We just define two document links and a captionTextBox to gather the editors choices. The code behind is "classic" custom editor code. First we define two document links:

2: protected PageCall documentPageCall;

5: protected PageCall thumbnailPageCall;

8: private int? DocumentID

9: {

10: get { return (int?)ViewState["DocumentID"]; }

11: set { ViewState["DocumentID"] = value; }

12: }

13:

14:

15: private int? ThumbnailID

16: {

17: get { return (int?)ViewState["ThumbnailID"]; }

18: set { ViewState["ThumbnailID"] = value; }

19: }

20:

21:

22: private void Page_Load(object sender, EventArgs e)

23: {

24: documentPageCall.NavigateUrl = CMSConfigurationSettings.CMSApplicationVirtualPath + "/admin/documents/DocumentOverview.aspx?Popup=1&Select=1&AxID=" + DocumentID.ToString();

25: thumbnailPageCall.NavigateUrl = CMSConfigurationSettings.CMSApplicationVirtualPath + "/admin/documents/DocumentOverview.aspx?Popup=1&Select=1&AxID=" + ThumbnailID.ToString();

26: thumbnailPageCall.ClickAfter += new Axinom.Framework.ExtendedEventHandler(thumbnailPageCall_ClickAfter);

27: documentPageCall.ClickAfter += new Axinom.Framework.ExtendedEventHandler(documentPageCall_ClickAfter);

28: }

29:

30:

31: private void documentPageCall_ClickAfter(object obj, Axinom.Framework.ExtendedEventArgs e)

32: {

33: DocumentID = Convert.ToInt32(e.Name);

34: BindDocument();

35: }

36:

37:

38: private void thumbnailPageCall_ClickAfter(object obj, Axinom.Framework.ExtendedEventArgs e)

39: {

40: ThumbnailID = Convert.ToInt32(e.Name);

41: BindThumbnail();

42: }

The BindDocument() and the BindThumbnail() methods read like the following:

2: private void BindThumbnail()

3: {

4: thumbnailLink.Text = string.Empty;

5: thumbnailLink.NavigateUrl = null;

7: if (ThumbnailID != null)

8: {

9: AxDocument doc = (AxDocument)new AxDocumentAdapter().Load(ThumbnailID);

10: if (doc == null)

11: {

12: ThumbnailID = null;

13: thumbnailLink.Text = "Document unknown - please select another document!";

14: thumbnailLink.NavigateUrl = null;

15: }

16: else

17: {

18: thumbnailLink.Text = doc.Name;

19: thumbnailLink.NavigateUrl = CMSConfigurationSettings.CMSApplicationVirtualPath + doc.Url;

20: }

21: }

22: }

23:

24:

25: private void BindDocument()

26: {

27: documentLink.Text = string.Empty;

28: documentLink.NavigateUrl = null;

29:

30:

31: if (DocumentID != null)

32: {

33: AxDocument doc = (AxDocument)new AxDocumentAdapter().Load(DocumentID);

34: if (doc == null)

35: {

36: DocumentID = null;

37: documentLink.Text = "Document unknown - please select another document!";

38: documentLink.NavigateUrl = null;

39: }

40: else

41: {

42: documentLink.Text = doc.Name;

43: documentLink.NavigateUrl = CMSConfigurationSettings.CMSApplicationVirtualPath + doc.Url;

44: }

45: }

46: }

After that we have two methods to load and save the parameters we defined for the lightbox image control:

public void LoadParameters()

{

if (!string.IsNullOrEmpty(Parameters["Caption"]))

{

captionTextBox.Text = Parameters["Caption"].ToString();

}

if (!string.IsNullOrEmpty(Parameters["DocumentID"]))

{

DocumentID = System.Convert.ToInt32(Parameters["DocumentID"]);

BindDocument();

}

if (!string.IsNullOrEmpty(Parameters["ThumbnailID"]))

{

ThumbnailID = System.Convert.ToInt32(Parameters["ThumbnailID"]);

BindThumbnail();

}

public void SaveParameters()

{

NameValueCollection parameters = new NameValueCollection();

parameters.Add("Caption", captionTextBox.Text);

parameters.Add("DocumentID", DocumentID.ToString());

parameters.Add("ThumbnailID", ThumbnailID.ToString());

Parameters = parameters;

}

Last thing we have to do is to register our newly created control to the cmssite.xml:

<Behaviour>Dynamic</Behaviour>

<IsCompiled>false</IsCompiled>

<File>DynControls/LightboxImageControl.ascx</File>

<Parameter>Caption</Parameter>

<Parameter>DocumentID</Parameter>

<Parameter>ThumbnailID</Parameter>

</Parameters>

<Editor>~/templates/DynControls/Editor/LightBoxImageEditor.ascx</Editor>

</elementtemplatedefinition>

Now – were done. Reference the ElementTemplate in any Placeholder of your choice and serve chilled.

Tags:

The AxCMS.net 9.0 Landscape Whenever I design complex systems I tend to design the system responsibilities first. Each system ...The Unknown AxCMS.net Security Option Whenever you check the SQL Databases for AxCMS.net, you will wonder that all passwords are stored ...AxCMS.net 9.0 on the run We all heard it from the news: AxCMS.net will be released in September. Official voices said the ...

Comments

4/8/2009 12:40:07 PM #

The controll is nice but not as mach as user-friendly. The editor have to generate both, the thumbnail and the "zoom" image. The better way, such a lot of CMS do, is to generate the thumbnail picture on the fly.

Eugen Richter

4/9/2009 10:56:56 AM #

Hi Eugen,

this task can easily be accomplished: just change the custom template to dynamically create the thumbnail image using .net image processing features

dan

4/29/2009 9:11:36 AM #

thank you for your proposal. my new control runs on AxCMS 7.0.0.34122

Ralph

Add comment

Name*
E-mail*
Website
Country Country flag

b i u quote

Comment
Preview

Notify me when new comments are added

Calendar

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	1	2	3	4
5	6	7	8	9	10	11

View posts in large calendar

Using Lightboxes in AxCMS.net 8.5

First Steps using Lightbox2

Creating a dynamic AxCMS.net 8.5 Template

Creating a custom editor template

Dan Wucherpfennig - AxCMS.net evangelist

Calendar

RecentPosts

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	1	2	3	4
5	6	7	8	9	10	11

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	1	2	3	4
5	6	7	8	9	10	11

Using Lightboxes in AxCMS.net 8.5

First Steps using Lightbox2

Creating a dynamic AxCMS.net 8.5 Template

Creating a custom editor template

Dan Wucherpfennig - AxCMS.net evangelist

Tag cloud

Calendar

RecentPosts

Mo	Tu	We	Th	Fr	Sa	Su
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	1	2	3	4
5	6	7	8	9	10	11