Advanced Custom Fields Lightbox Gallery that opens a larger image from a smaller image.

This gallery uses the Advanced Custom Fields plugin along with a custom post type to display a gallery that opens up in a lightbox. The cool thing about this setup is that the gallery shows smaller until opened in lightbox and shown bigger.

So first I set up the custom post type in my theme’s function.php file.

Then I installed the Advanced Custom Fields plugin and created a new field called, “image” which is a image upload button. I then directed that to show just on my newly created custom post type. Also note that I’ve set the image upload to return a value of image ID. This is important as we will be able to return more info than just the image.
Screen Shot 2013-08-21 at 10.18.17 AM

Next I created a custom page template to show my gallery. On that page I query a custom post type to show my gallery.

From the query you can see that we are calling two sizes. In the link source we reference the larger image that will show in the lightbox. But we call the medium sized image to show on the gallery page. All that’s left to do is install a lightbox plugin and add a rel=”lightbox” to the link so it opens up in the lightbox mode. There are many lightbox plugins out there but I used, “Lightbox Gallery”.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 + 1 =