New CodePlex Project: LyteBox for SharePoint 22

I decided to spend the weekend making an easy to use web part for SharePoint that allows anyone to add the LyteBox Javascript photo gallery to either MOSS 2007 or WSS V3. If you haven’t seen LyteBox before you should check it out, it’s used on many websites these days to create a nice Web 2.0 style photo gallery. In a basic Lytebox implementation you have to manually call out each image in HTML, but with LyteBox for SharePoint the images are pulled in automatically from a SharePoint picture library. I have packaged the whole thing up in such a way that you can use the web part even in many hosted environments because it involves no custom code (no DLL’s or web.config changes need).

In my implementation there are two list templates, one that creates a document library with all of the LyteBox Javascript code and another that creates a picture gallery with some sample photos. Also, there is one Content Editor Web Part that gets placed on your page for loading the LyteBox Javascript, and a Data View Web Part that has been preconfigured with custom XSLT to load all of the photos from the picture library and activates them for LyteBox.

Here are some screenshots of it in action:

The project is currently labeled as 1.0 beta, because I assume there will be some issues.

Download the code from: CodePlex Page for LyteBox for SharePoint

Learn more about the original LyteBox code:

Also, a hat tip to Pam Davis for her post that inspired this project:

22 thoughts on “New CodePlex Project: LyteBox for SharePoint

  1. Reply Greg.O Oct 30,2008 5:11 am

    Works a treat!! One of the things that don’t necessarily offer much functionality but are pretty, wow end-users and give the management a nice warm fuzzy feeling their intranet is just so web 2.0, ahead of the curve and worth the money spent 🙂

    Really like the fact it’s a no-code solution and, therefore, can be deployed in hosted environments. Very cool.

    One question though – a silly one but how do you modify the javascript or xsl if you need to name the photo library different than LyteBox Photos?


  2. Reply The Mossman Oct 30,2008 4:40 pm

    If you edit the web part on the page and click the Parameters Editor, you should see a entry:

    ParameterBinding Name=”ListName” Location=”None” DefaultValue=”LyteBox Photos”

    If you change that Default Value to the name of your picture library, it should work. Let me know how it works out.

  3. Reply Greg.O Oct 31,2008 4:34 am

    Knew it must be something very simple. I did go through the xsl and javascript code looking for “lytebox photos” string but somehow didn’t think about checking the parameters editor – duh!

    Anyway, things are working fine now. Thanks for the prompt reply and for releasing the LyteBox Photos solution in the first place.


  4. Reply Eric Nov 12,2008 11:43 am

    This looks great and is perfect for something I need to do soon.

    Two questions – Where can I change the speed of the slideshow?

    What would be involved in modifying the LB_WP_PhotGallery webpart to display some of the photo data (Title, Date Taken) that’s stored in the Photo Gallery. I’m not a CAML jockey – could you point me in the direction of some resources for CAML beginners?

  5. Reply The Mossman Nov 12,2008 10:27 pm

    Changing the speed would involve editing the lytebox.js code in the document library. They did a great job of allowing a lot of configuration in the first section of the code. You will see a line like this:

    this.slideInterval = 4000;

    Change that and you are golden. As for the second question. The DVWP should already show the Title, you would have to edit the XSLT to show Date Taken. You might not have to mess with CAML at all.

  6. Reply Jim Parker Dec 16,2008 1:03 pm

    I can see in the XSLT that indeed there is a reference to display the title of the picture (and can even see from your screenshot that it is works), but for some reason it does not show up when I implement you code. I only get the “1 of 5” information–that’s it. Anything you can think of that I might have done incorrectly?

    Way cool code, btw–it was exactly what I needed.

  7. Reply Juel Jan 21,2009 3:55 am

    Hi Mossman..

    Do you have any idea how to get lytebox to work with PublishingWebControls:RichImageField in a pagelayout? So when the users sets images on the pages, the Lytebox automaticly links to that page..

    But how do i get the imagelink out of the RichImageField??

  8. Reply d3vlabs Jan 22,2009 1:24 pm

    Installation went so smooth however i got stumped by something as simple as adding a new picture to the gallery. How exactly can I add new photo to the gallery?

    Another question is, is it possible to have the lightbox displayed in a web part as part of my main page with lets say 4-5 pictures and pagination rather then having a page dedicated just to the lightbox gallery.

  9. Reply Craig Feb 11,2009 7:32 am

    Hi. This works great. However, as like d3vlabs I’d really love to see this working as a true webpart rather than having a page dedicated to the gallery. This would then be a very tidy addition to the front page of my sites.

  10. Reply The Mossman Feb 11,2009 11:56 am

    So, both of you are looking for a smaller webpart that would have just a few small thumbnails in a row? I could probably make something like that when I get some spare time.

  11. Reply d3vlabs Feb 11,2009 1:09 pm

    keep me in a mind as a beta tester if you do decided to try and build a web part like that.

  12. Reply Jasmim Feb 23,2009 10:23 am

    Hi Mossman,

    This works, no problem! 🙂
    However, do you know any way that i can open all the images inside the picture library throught only one picture?

  13. Reply Netta Mar 4,2009 5:10 am

    This is amazing ! thanks !! just one question, Is there anyways to change the number of picture per row on the “preview” webpart ? It’s set to 3 atm and I can’t find where to change it. (I’d like more pictures in each row and less rows..)

  14. Reply The Mossman Mar 5,2009 3:42 pm

    If you edit the XSL you will see a line like this:

    xsl:variable name=”MaxCols” select=”3″

    Changing that number should help you show more per row.

  15. Reply netta Mar 8,2009 7:26 am

    great ! thanks 😀

  16. Reply Shawn Mar 11,2009 2:54 pm

    Is there a way to set this up so it is just 1 image on the page, click and it will show the slideshow of the entire picture library?? I went through the XSL but am still pretty new to it, so any help would be appreciated. Thank you!

  17. Reply J & J Turnbull Mar 24,2009 7:50 pm

    I love the LyteBox but it seems to have stopped the default text editor working. (PublishingWebControls:RichHTMLFeild)

    Any ideas?

    I appreciate your time.

  18. Reply The Mossman Mar 24,2009 9:05 pm

    Turnbull, yeah I mention this problem in the readme file. I have no good answer except you can either A: preconfigure the rich text prior to adding the lytebox part OR you can use the content editor web part. Sorry, its something to do with the LyteBox code and the ootb RTE (neither of which are my own code).

  19. Reply Jim Parker Apr 19,2009 5:58 pm

    In follow up to my question, I figured out what I was doing wrong.

    First, I didn’t actually have a title filled in for each picture, duh 🙂

    Second, it still looked like it wasn’t working, but I found that you actually have to reload (not just refresh) the web part page in order for it to pull updated data from the photos in the source library.

    Hope that helps. Thanks again Mossman for the great installation-free solution–great for those of us in a hosted environment!

  20. Reply bpanks Jun 5,2009 2:25 am

    Hello Randy:
    This is Pankaj from Mumbai, India.
    I saw a nice post by you on

    I have multipal photo galleries. As per the documentation given by you I created everything …
    But I am not able to use another photo gallery.
    I changed default List Name (LyteBox Photos) in parameter window as suggested by you…

    Still its not working. Please guide me

    Thanks in advance.


  21. Reply Anna Jun 5,2009 5:48 pm

    Hi Mossman;

    I came across your blog this afternoon and decided to peruse your articles. It is very coincidental that I also installed Lytebox in my test environment this morning. I think it’s a great product and have one question: does it support .tif files? I’ve replaced your sample photos with some .tif files that are used in my company, but they do not appear on the photo gallery page. Any suggestions?
    Thanks for a great product!

  22. Reply VM Oct 21,2009 2:44 am

    Is there a way to edit a param value that can filter pictures depending on their name? For example if i have these files in my library:


    and i want to show only ones that start with “photo”.

    Or is there any other way to do it

Leave a Reply