Image gallery for Sitefinity : a better one!

Image gallery for Sitefinity : a better one!

July 23, 2007 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.

Bob, Sitefinity team lead, spent yet another weekend productively and created a simple image gallery control for Sitefinity, based on Lytebox. In this short post I'll explain the basics of control and obviously provide you with a link for download.

Image gallery control

So before I get into explaining the control itself I suggest you download it from here.

Installation

  1. Extract the LyteboxControl.zip file
  2. Copy the App_Code/ExtensionsConverter.cs to the App_Code folder in your site
  3. Upload the UserControls/Lytebox.ascx control to your Sitefinity website through Page Editor
  4. Copy UserControls/Lytebox folder to the UserControls folder located in the root folder of your website

Using the control

Before you do anything with the control, make sure you have a folder in your website with several images. If you don't have one, go to file manager create a folder and upload the images you want to be displayed in your gallery.

Once you are done with that, go to a page where you want the Image gallery to be (or create a new page for that purpose) and drag the Image gallery control you've uploaded during the installation part. Click on edit to set up the properties. Here are the descriptions of most important properties :

  • ImageFolder - determines the folder that contains the images to be displayed in the gallery. It uses the Telerik.Cms.Web.UI.UrlEditorWrapper so you can simply navigate to the folder you want to and click I'm done button.
  • ThumbnailFolder - determines the folder where thumbnails for images should be automatically created. You don't really need to modify this property.
  • ThumbnailSize - determines the size of a thumbnail. Make sure that if you change this property, you'll also need to modify following selector in ~/UserControls/Lytebox/lytebox.css : .thumbnails li{float:left;width:110px;height:100px;margin:6px;text-align:left} (it is located at the end of the css file).
  • DisplayMode - determines the display mode of gallery. There are three different modes :
    • Slideshow - displays a number of images as a slideshow. Images change after a period of time
    • Grouped - similar to slideshow mode, except that user has to click next/prev buttons to move through a gallery
    • Single - basically opens a original size image after user has clicked on the thumbnail
  • Extensions - determines which files inside of a selected ImageFolder should be displayed in a gallery.

Summary

Pretty useful control and extremely easy to implement thanks to Bob. If you have any questions, please leave a comment.

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
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar