How to Embed Large Photo Slideshows in WordPress using Fancybox

How to Embed Large Photo Slideshows in WordPress using Fancybox

Music photographer and PhotoShelter’s new marketing associate, Chris Owyoung teaches us a great way to embed large-format slideshows into our WordPress blogs. Don’t worry, there’s (almost) no coding necessary!

By Chris Owyoung

The recent release of PhotoShelter’s new embeddable slideshows, featuring 20+ customizable options, prompted me to look for a bigger and better way to integrate them into my WordPress blog. The solution (seen in the video below) is elegant and relatively easy to replicate.

If you have a compatible WordPress blog keep reading and find out how it’s done.


Can’t I add photos and slideshows to my blog already?

Yes, WordPress has the ability to embed things like photos, slideshows and videos by default.  However the size of the photos or slideshows will always be limited by the size of the content area of your WordPress template. If you’re like me and your clients prefer larger photos than your template allows, you have a problem!

fancybox-homepage-columns.jpg

What is this WordPress thing?

Like many photographers who are marketing themselves to google and the thousands of potential clients it provides, I turned to the WordPress blogging platform to help strengthen my SEO and to give clients a way to get to know me (and my work) before they call or email.

After following the advice in PhotoShelter’s SEO Cookbook for Photographers for a couple of months, my website went from page six on google to page one for nearly all of my targeted keywords and phrases. With my SEO strategy nailed down, I focused on ways to make my blog entries more engaging to visitors. I discovered that when people talk about ways to add functionality to WordPress, they’re speaking about either themes or plugins.

Themes vs. Plugins

There are many great themes for blogs, including some beautiful WordPress templates built for photographers by Graph Paper Press. However, if you’re like me, you’ve discovered that it’s very hard to customize or add functionality to an existing theme with some serious coding know-how. This is where plugins come in.

What are Plugins?

In an alternate reality where clients grow on trees and pay double the going rate, plugins are a ground breaking new treatment from the Hair Club for Men. In this universe, plugins are tiny pieces of software that add functionality to larger programs. Fortunately, there are thousands of plugins written for WordPress and many of them are built specifically to display photos and videos.

fancybox-plugincount.jpg

My Method

Combine big, beautiful PhotoShelter slideshows with the FancyBox plugin for WordPress and wow your visitors. The process has 15 steps (gasp!) but don’t worry, most of them only need to be done once. 


Step One

Log into your WordPress blog and click on “Add New” under the Plugins area of the Appearance Tab on the left side of the screen.

fancybox-addnewpost.jpg

Step Two

 Type “fancybox” in the search form at the top of the page and click the Search Plugins button.

fancybox-search.jpg


Step Three

In the list or search results, find the “FancyBox for WordPress” plugin written by Jose Pardilla and click the Install link on the right side of the screen.

fancybox-install.jpg

Step Four

After the plugin has successfully installed, return to the Appearance Tab on the left side of the screen and click on Installed.

fancybox-installed.jpg

Step Five

In the list of installed plugins find “FancyBox for WordPress” and click on Settings.

fancybox-settings.jpg

Step Six

Click on the Galleries tab and change the behavior to “Use a custom expression to apply FancyBox.”

fancybox-galleriestab.jpg
fancybox-expression.jpg


Step Seven
Click on the Other tab and change the Frame Size to the width and height (in pixels) of your PhotoShelter slideshow.

fancybox-other.jpg
fancybox-framesize.jpg

Step Eight

Take a break, send your mother an off-color electronic greeting card and breath easy, you’ll never have to touch any of that stuff ever again.


Step Nine

Create a new post.

fancybox-addnew.jpg


Step Ten

Switch to HTML mode in the WordPress post editor. I know you’re afraid, but I have confidence in you. In the blank area, write the code exactly as you see in the example below.

fancybox-code.jpg


Step Eleven

Log into PhotoShelter, and grab the link to the image that will trigger the FancyBox slideshow.

fancybox-imagelink.jpg

Step Twelve

Paste it into your WordPress post. Example below:

fancybox-imagepaste.jpg


Step Thirteen

Go to a gallery in your PhotoShelter account, click on “Embed This Gallery” on the left side of the screen and get the embed code for the PhotoShelter slideshow you want to feature inside the FancyBox. (The embed codes for single PhotoShelter photos and vimeo or youtube videos work too).

fancybox-embedslide.jpg

Step Fourteen

Paste it into your WordPress post. Your finished code should look something like this.

fancybox-finished.jpg

Step Fifteen

Click Save Draft and then Preview to see your slideshow in all it’s big beautiful glory. Congratulations, you’re done!

Next Post:
Previous Post:
This article was written by

Product Manager at PhotoShelter, photographer at chrisowyoung.com

There are 13 comments for this article
  1. Patrick Baldwin at 4:56 am

    I am clearly doing something wrong but…..The end result for me is a static display of the first chosen image that you embed. Then when I click on it it goes to the slideshow which is overlaid on the static image but displaced somewhat with an asymmetric white border round the slideshow box and the static image displayed but underneath the slideshow. Looks appalling. This can’t be right can it? I think that I faithfully typed in the code honouring all spacings etc but it looks terrible. Any clues? I would post it for peeps to see but I’m reluctant to have it live to be honest even for trouble shooting. Needless to say I know less than nothing about coding etc. It was all going so well:-) Regards. Patrick.

  2. Patrick Baldwin at 5:02 am

    Ok. Now that I have checked Chris’s site (doh!) I see that it is mostly correct what I have done. Er…can’t say I like it though. Sorry about that. Many thanks to Chris for the work done to show us how its done however. Regards. Patrick.

  3. Jurgen Banda-Hansmann at 5:45 am

    Thanks for sharing this advice. I played around with it and noticed that you need to add a 15th step 🙂 In order to get the slideshow displayed correctly, you need to define the size of your slideshow in the Fancybox settings under the “Other” tab. My slideshow size is 950×712 and so changed the default settings to that size. I hope that helps.

  4. Chris Owyoung at 10:21 am

    @Patrick Baldwin, Hello fellow low light performance photographer! Thanks for the comment. My guess would be that you included the static image in the code that calls up the slideshow, which is why both the static image and the slideshow are being pulled into the FancyBox. However, this matters quite little if you don’t like the way FancyBox looks to begin with. =) If you want to give it another go, send me message through my website.

  5. Chris Owyoung at 10:27 am

    @Jurgen You have a really GREAT website. You’re providing your clients with lots of good, well organized information. It’s a very good presentation of your style of shooting and the services you offer. I’ve added in the step as you’ve pointed out. Thank you! Keep in touch! Chris

  6. Todd Bigelow at 7:14 pm

    Chris, Thanks for the insight. I’d love to do this, but here’s the (possibly stupid) question. I’ve been using a WordPress.com site for over a year, as opposed to the Wordress.org site. I’d like to switch over to utilize the customization features, slideshows etc since .com doesn’t allow plug-ins. Is there any way to switch from a theme on the WP.com platform to WP.org without losing all of the content etc? Thank you, Todd Bigelow

  7. Chris Owyoung at 11:18 am

    @Johnny, That’s a good question. The license link on the bottom of my FancyBox windows is something I added after the article was written. It’s just an image I made in Photoshop that links to the corresponding gallery in my PhotoShelter archive. I’ll add the instructions later today.

  8. Martin Beddall at 8:23 am

    Hi, Excellent instructions – but is there a way to set the size of the trigger image from the gallery when it appears on the blog? Also, can it link to a slideshow of a private gallery or does the gallery have to be public?

Leave a Reply

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