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.
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
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.
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
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
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.
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.
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.
Where is the codes that need to go into the image page..?
Just put the “cms-editable” class on the A tag and you’re good to go. No code needed.
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.
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.
thanks a lot, working perfect, you guys rock
Thank you! I’ve finally got it working, but is there any way to create more than one gallery with this?
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.
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.
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.
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.
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
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.