Try Now
More in this section
Blogs RSS feed

Image gallery for Sitefinity : a better one!

by Ivan Osmak
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.


  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.


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


Leave a comment
  1. Seth Cleaver Jul 25, 2007
    Hi, Excellent guys just what I was after and started building myself. I was using the CSSlightbox which was the basis for the lytebox but even easier. Cheers,
  2. Peter Jul 25, 2007
    Hi, Great job. Thanks very much.
  3. Seth Cleaver Jul 26, 2007
    Hi, I made a few small tweaks to this which I though I might share just to add a little extra to Bob's great work. The "Click to enlarge" you can see on the image example in the post above doesn't make much sense cause you can't enlarge the image any further once you click the thumbnail. The "Click to enlarge" line is meant to be an area in Lytebox for a caption for the image being displayed. If you use meaningful file names on your images you can add the following tweak to manipulate this line a little: At the top of the code behind I added: public string Caption { get { String s = (string)ViewState["Caption"]; return ((s == null) ? "Image Caption" : s); } set { ViewState["Caption"] = value; } } Which gave me a field named "Caption" in the edit dialog box of the control. In the Reapeat1_ItemDataBound in the code behind do the following: Change: string name = Path.GetFileNameWithoutExtension(info.Name); if (text != null) text.Text = name; To: link.ToolTip = Caption; string name = Path.GetFileNameWithoutExtension(info.Name); if (text != null) { text.Text = name; link.ToolTip += ": " + name; } This will display the caption you assign and the name of the file minus the extension in the Caption area of the lytebox like this: "Our European Holiday: Ostrog Monastery" Hope that helps!
  4. seth Jul 26, 2007
    Sorry didn't realise that the would become one big clump of text.
  5. Ivan Jul 26, 2007
    Hi Seth, no need to apologize for the big clump of text. Our bad, we'll fix that soon. Thanks for the tip.
  6. Peter Jul 29, 2007
    Hi for alls, I have few problems. Could you help-me please. After add Lytebox to my page I don't have a good presentation of Lytebox. Alls files are in good place and Usercontrols are ok, but no slideshow, no image in boxes after click. promieux@yahoo.com.
  7. Peter Jul 29, 2007
    And Lyteframe how to make?
  8. Daniel Plomp Jul 31, 2007
    Hi all, I've installed the Lytebox but have some problems. I did assign a folder for my original photos and one for the thumbnails, which is a subfolder in my 'root' folder. Makes sence? When I open my site for the first time, the photos are there, and the Lytebox function works. But when I hit refresh, the thumbnails are created again, and that happens everytime there is a postback. Also, the thumbnails are created in the root, and not inside the Thumbnails folder. What am I doing wrong?
  9. Ben Alexandra Aug 02, 2007
    Wow, I love it! I've been looking for a gallery for ages with no luck. Didn't want to recreate the wheel, so I'm psyched for this. I posted a request with the features I wanted ( http://www.sitefinity.com/support/forums/support-forum-thread/b1043S-mcgte.aspx ) and although this doesn't have all of them, it's a GREAT start and puts me a long way toward what I'm looking for. I've looked at Lytebox before and was always impressed, so I'm psyched to use it. I made a little tweak to the code behind so I can post images with underscores and it removes them and replaces them with spaces in the titles, and so while viewing the images you see the image title instead of "click to enlarge." I changed Line 155 From: string name = Path.GetFileNameWithoutExtension(info.Name); if (text != null) text.Text = name; To: string name = Path.GetFileNameWithoutExtension(info.Name); if (text != null) { text.Text = name.Replace("_"," "); link.ToolTip = name.Replace("_", " "); } Super easy and works GREAT. Thanks sooooo much Ben
  10. Trevor Park Aug 02, 2007
    So I tried to implement the Image Gallery and it worked great. I even had it working in a couple minutes. As soon as I added it to a page there was no problem until I tried to access the page from the pages section. I get a pop-up saying the operation was aborted. I can preview the page just fine without any trouble, the error only occurs when I click on the page in the pages section. Has anyone else come across this problem? I'm pretty sure it is the control because I recreated the page without putting the control onto the page and the error does not occur. Otherwise it works perfectly for me. Any thoughts?
  11. Josef Rogovsky Aug 10, 2007
    Hi Guys, I've been able to reproduce the same problem that Trevor reports. Anyone else? Any suggestions for a fix?
  12. Vagelis Sep 11, 2007
    Hi, I followed all instructions described here and it works ok except the time I press save on page with this control. I get an error that IE cannot load te page I 'm saving and displays "operation aborted". When I press refresh control is there and on preview it works ok as also on edit. But anytime I press save I get the same error. Has anyone find a solution on this? Best regards Vagelis
  13. Ritika Dec 04, 2007
    This works great. But how wld u create a page.. which has all the galleries in it..and then clicking on one of the, will take you to the images in that gallery. That is use it not to creat a single large gallery, but to create multiple smaller galleries.
  14. Ritika Dec 04, 2007
    This works great. But how wld u create a page.. which has all the galleries in it..and then clicking on one of the, will take you to the images in that gallery. That is use it not to creat a single large gallery, but to create multiple smaller galleries.
  15. Alex Apr 20, 2008
    Hi, thanks a lot for this tool - when we're trying to assing the image-folder the "Select Page Tool" opens - we now inserted the path manually. Do you have any clue how we could fix this? Also we would like to display the selected image above the thumbnails on the same page - something ajax-like... ; ) Unfortunately we're bloody beginner when it comes to programming in asp.net so propably you may give us a hint?! Thanks a lot, Alex
  16. Keith Waldron Dec 22, 2009
    Can anyone make a recomendation as to where is the best (or proper) place to override or change some of the style settings for the Lytebox? Particularly, I have 2 issues: 1 - the lytebox popup displays over the top menu bar, and the menu bar items show through over the image/lytebox. 2 - I would like to change the size of the thumbnails, and override the built in UL styles. Recommendations anyone? 
  17. Jaymie Apr 05, 2011
    sounds good, but does this work for SiteFinity 4?
  18. gonzalo donoso Jun 28, 2011
    Work for sitefinity 3.7 SE?

  19. Erin Jul 31, 2011
    Have tried it in 3.7. Web.UI didn't work for me, but you can just throw in the file path rather than browsing for it.
  20. Amine Feb 29, 2012
    How can we add it to SF 4.4 ?

    Leave a comment