Combining Lightbox with Wordpress gallery
October 18, 2011 6:03 PM Subscribe
I've been asked by a family member to set up a small business site to be used for displaying images of products for sale. As I don't really want to get too involved, I need a CMS that's easy to use and maintain and figured WordPress to be a good fit. However, I'm having trouble finding just the right image gallery behaviour.
The website only has three pages: home, product X and product Y. Pages for product X and product Y have the same structure: a grid of images with brief descriptions. Clicking on an image should open a lightbox with more shots of the same product (but no extra captions).
It's fairly simple, basically two different galleries, but the additional feature of gallery images that link to a lightbox complicate it somewhat. I was hoping to find a WordPress plugin that displays this sort of behaviour, but I'm coming up short. I could code up something myself, but I'd like to keep my time investment in this project to a minimum.
I should not that although my relative is intelligent enough, it's important that maintenance of said system be easy, or fairly wordpress-ish.
Any ideas? Did I not search well enough? Is there a plugin that might only need a few adjustments? Another CMS that could do the job?
The website only has three pages: home, product X and product Y. Pages for product X and product Y have the same structure: a grid of images with brief descriptions. Clicking on an image should open a lightbox with more shots of the same product (but no extra captions).
It's fairly simple, basically two different galleries, but the additional feature of gallery images that link to a lightbox complicate it somewhat. I was hoping to find a WordPress plugin that displays this sort of behaviour, but I'm coming up short. I could code up something myself, but I'd like to keep my time investment in this project to a minimum.
I should not that although my relative is intelligent enough, it's important that maintenance of said system be easy, or fairly wordpress-ish.
Any ideas? Did I not search well enough? Is there a plugin that might only need a few adjustments? Another CMS that could do the job?
Will customers be able to pay for products using this site? If so, you might want to look into a hosted shopping cart solution like Shopify. They will certainly have lightbox type gallery functions.
posted by The Lamplighter at 6:14 PM on October 18, 2011
posted by The Lamplighter at 6:14 PM on October 18, 2011
Response by poster: Sorry, left that out: no, it's only used to display what's for sale, not to actually sell anything through the site. (heavy machinery and construction equipment)
posted by ar0n at 6:19 PM on October 18, 2011
posted by ar0n at 6:19 PM on October 18, 2011
Best answer: This may seem complicated, but once you set it up and configure your css it shouldn't be too bad. You'll need a theme with a Widgets template and a couple of plugins. I use a child theme of Hybrid as my primary theme, but I think a lot of themes have Widget Templates now, or you could probably make your own fairly easily.
For the grid of images, each image will actually be a separate post. Set up a category for Product X and another for Product Y and any posts that contain images for Product X will get the productx category, and posts for Product Y will get the producty category. If the grid of images should have 20 images, you'll have 20 posts - one for each image. For each post, you upload the images that should appear in the lightbox, then for the Lightbox functionality you want (I used FancyBox) add the gallery shortcode using zero columns:
[gallery columns="0"]
In your CSS add:
.gallery .gallery-item { display: none; } /* Hides all the gallery items */
.gallery .gallery-item:first-child { display: block;} /* Shows only the first gallery item */
Once you click on the first thumbnail, it'll expand, and give you left and right arrows for the other images.
---
You'll then want two main pages for Product X and Product Y, The page should just be blank and using the Widgets Template. Use the Query Posts plugin in combination with the Widget Context plugin to create the grid of images.
Using Query Posts, grab all posts with the Product X category. Set up Widget Context so that the widget only show on the Product X page.
Now, when you click on the Product X page, the Query Posts widget will display all the posts you created earlier. Because of the CSS you used, it should only show the first item. You'll need to use some additional CSS to style the posts so they're in a grid, etc, but you should just be seeing the first item in the gallery for each post, and be able to click on it to open a lightbox.
Repeat for Product Y.
Any time a new "grid" image needs to be added, they'll just need to add a new post of images and give it the correct category.
posted by backwards guitar at 8:34 AM on October 19, 2011
For the grid of images, each image will actually be a separate post. Set up a category for Product X and another for Product Y and any posts that contain images for Product X will get the productx category, and posts for Product Y will get the producty category. If the grid of images should have 20 images, you'll have 20 posts - one for each image. For each post, you upload the images that should appear in the lightbox, then for the Lightbox functionality you want (I used FancyBox) add the gallery shortcode using zero columns:
[gallery columns="0"]
In your CSS add:
.gallery .gallery-item { display: none; } /* Hides all the gallery items */
.gallery .gallery-item:first-child { display: block;} /* Shows only the first gallery item */
Once you click on the first thumbnail, it'll expand, and give you left and right arrows for the other images.
---
You'll then want two main pages for Product X and Product Y, The page should just be blank and using the Widgets Template. Use the Query Posts plugin in combination with the Widget Context plugin to create the grid of images.
Using Query Posts, grab all posts with the Product X category. Set up Widget Context so that the widget only show on the Product X page.
Now, when you click on the Product X page, the Query Posts widget will display all the posts you created earlier. Because of the CSS you used, it should only show the first item. You'll need to use some additional CSS to style the posts so they're in a grid, etc, but you should just be seeing the first item in the gallery for each post, and be able to click on it to open a lightbox.
Repeat for Product Y.
Any time a new "grid" image needs to be added, they'll just need to add a new post of images and give it the correct category.
posted by backwards guitar at 8:34 AM on October 19, 2011
Response by poster: That looks very helpful, thanks guys!
posted by ar0n at 11:24 AM on October 19, 2011
posted by ar0n at 11:24 AM on October 19, 2011
This thread is closed to new comments.
I believe there are gallery add ons available.
One of the cool things about this CMS (if you want to call it that). Is that you edit onsite. There is no control panel to log into.
It takes a bit to wrap your head around how easy it is. You fight it for a while because you expect it to be harder. At the end of the day though you can create the page templates and then have user accounts that can go nuts on the site without worrying about screwing it up.
I have a install of it at thisflapfirst.com (a sandbox domain where I play with new things).
I've played with most of the major PHP based CMSes and I am biased towards expressionengine for big projects, so it may just be that I like this since they make it, but it's pretty fun to play with.
It's not free, but I think it was around $50.
posted by cjorgensen at 6:12 PM on October 18, 2011