Read About Stuff We Do. Pagelime Blog.

Content Management for Designers and Agencies.

Video: How to manage a Lightbox Image Gallery with PageLime

A few folks had asked us to put together a quick tutorial on how PageLime can be used to update a simple lightbox image gallery. So, one of our interns jumped to the rescue and put together this awesome video we sent out to folks who’ve asked directly. We liked it so much that we decided to post it here:

The video shows a cool simple HTML5 CSS3 image gallery website, and how easy it is to use just the PageLime image library (with some cool image effects) to update the thumbnails and images in the gallery.

This is the simplest possible scenario.  In the coming weeks, we’ll post a tutorial on how to get PageLime  to publish XML and images straight from your image gallery, so that you can build dynamic image galleries or flash slideshows.

We love us some feedback, so don’t hesitate to reach out to us with questions, suggestions, or comments.

Cheers.

Tags: ,

22 Responses to “Video: How to manage a Lightbox Image Gallery with PageLime”

  1. Jessica says:

    You guys have Interns….plural?
    POSH!

    Although I am sure you selected them based on their ability to mix a mean Mojito… obviously. People have to have standards.

    Can’t wait to play with the gallery

  2. Emil says:

    Our intern hazing aside, the do interns get the 30″ monitors, while Tom and I are on measly 24″ ones. That’s called “motivation.” Tom read it in a one of those management books that starts with a number (“7 ways to get rich by patent squatting”) or something.

  3. Brian says:

    I’m about to experiment with PageLime for a new site and my client wants to be able to update and/or add images to a lightbox gallery. I’ve watched the video, but where do I put the “cms-editable” class in the lightbox image code? Should it go with the , the or the ???

    I think I also read that I have to have an ID in the same element… true?

    Thx

  4. Emil says:

    Hi Brian,

    Real quick:

    1. You need to put the CMS-Editable on the A tag.
    2. You need to have an ID on each A tag.

    Just so you know, we’re QA testing our repeating regions feature, which will allow you to duplicate, sort, and remove images from a lightbox gallery.

    I also shot you an email with the answer in case you don’t subscribe to the comment feed :)

  5. Malte says:

    Hi there!
    Love the idea of thia feature!
    But i ran into problems trying to create a lightbox gallery with repeatable regions (with “prettyGallery” jquery).
    The structure looks like this:

    This results in an invisible, non-editable div in pagelime…
    I’ve tried wrapping the in another div with the same result.
    When the surrounding div is not repeatable everything works jut fine.

    Another thing is that, as soon as i give the linked image a class ( ) the link is no longer editable in Pagelime. Instead of the “edit link” symbol I only get an “edit image”.

    Perhaps someone has an idea how to resolve this.

  6. KJ says:

    Perphaps a prequel to the above video is necessary! A video showing how to build a simple lightbox gallery and where and how to add the needed IDs and the cms-editable. Also how to make repeatable. Just a quick thought.

  7. Emil says:

    Hey KJ,

    Chris Coyier over at CSS Tricks did a full length tutorial that explains just that! Take a look:
    http://css-tricks.com/video-screencasts/74-editable-css3-image-gallery/

    His posts are always great – I highly recommend that folks subscribe.

  8. John says:

    Where is the codes that need to go into the image page..?

  9. Emil says:

    Just put the “cms-editable” class on the A tag and you’re good to go. No code needed.

  10. Juan says:

    I have the same problem that Malte had, or i think i have, i’ve put the editable and repeat class in the A tag of the prettyphoto lightbox gallery, but when i go into PL to modify the thumb and the large image, it only shows me an edit image whith no bubble and it doesn’t let me duplicate it and when y change it, it only changes the thumb (it’s kind of obvious, because its the image that it’s showing).

    The gallery is located in http://www.tekvobioingenieria.com/prueba/gruas.html in the inner tab called “accesorios” , please tell me what i’m doing wrong or what can i do.

    Thanks for everything, this cms is amazing

    ps : Sorry for the bad english, if there’s any, spanish is my native language.

  11. Emil says:

    Hey Juan,

    Your problem is that you have a left floated image inside of an inline A element. The result is that the browser treats the A element as hidden, and the Pagelime bubbles won’t show up. The easy fix is to add a CSS rule to make the A tags a block level element with a default height. In your case try something like this:

    a[rel='prettyPhoto'] { display:block; float:left; height:50px; }

    or add this class to your tags and css
    a.prettyPhoto { display:block; float:left; height:50px; }

    Hope that helps. I’ll also send you an email to let you know I replied.

  12. Juan says:

    thanks a lot, working perfect, you guys rock

  13. Laura says:

    Thank you! I’ve finally got it working, but is there any way to create more than one gallery with this?

  14. Laura says:

    I mean, more than one gallery on the same page… I still want my client to be able to edit/add images, but to have more than one gallery.

  15. Emil says:

    You could add as many galleries as you want… you don’t need to just use the layout with one gallery.

    Alternately, you can create a template based on a gallery page, and then your clients could create new gallery pages based on it.

  16. FE says:

    Hi,

    Thanks for this tutorial, it is explained very clearly.

    But I’m facing a problem.
    When I click the edit button, I go directly to the ‘upload new image screen’ (the screen you see at 1:40 minute).

    So I don’t get the oppertunity to fill in a URL like you show in the tutorial (1:28 minute).
    The result is that I can change my little thumbnail, but I can not change or set up a URL to the original image which suppost to open in a larger size lightbox.

    Is there something in my settings I have to change? Or is this feature not availible for users with a “free account” like me?

    I hope you can help me out of this.

  17. Emil says:

    You have the editable class on the image and not on the LINK (A tag). Move the class to the A tag and you should be good to go.

  18. Paul says:

    Ah ha, sorted it. I needed to put an individual id tag in for each Link.

    eg

    etc etc

  19. darren says:

    hi guys

    please update the gallery tutorials to show users how to create their own galleries or integrate others with page lime. the above gallery is pretty poor and doesn’t even have a previous or next with in the light box gallery.

    what about a simple Inline thumbnail type gallery which works off off your xml publish system. a bit like jquery galleriffic.

    cheers

  20. Salli says:

    This is really awesome, but (I know, sorry) ….. there’s no way to add more images or remove existing ones — for example, if we wanted to go from displaying 6 images to 8, or go from 6 to 4. I must have really picky customers.

  21. anju says:

    Hi, is there any way to add new images to the gallery ?

  22. KJ says:

    Hey Anju.

    There are two ways to add new images.

    1. You can add the images via the code editor. The images will be editable and you can lock down the number of images displayed this way.

    2. You can add a cms-repeat class to the li or the A tag (depending on what you want to repeat). This will allow your users to add and remove images as needed.

Leave a Reply