20 Jan How to build a full screen photo gallery with WP Supersized
I often get asked how to use WP Supersized to build a full screen gallery of images within a WordPress theme.
Here is a simple way to do it.
If you have other ideas on how to do this, share it with other users by using the comments.
First of all, check out the demo.
OK! How is this done ?
Let’s imagine the following scenario:
You want to show your images (from one of the sources of images accepted by WP Supersized) in a full screen slideshow.
You want to have one main Galleries page with thumbnails each representing a specific gallery showing a group of images from one source.
When viewing the images of one of these galleries, on top of all the usual WP Supersized controls, you want to be able to go back with one click to the original Galleries page where you could then choose another gallery or navigate to another page of your website.
Well, if you know a little bit about editing your WP template files, this is quite easy to do.
The protection of my website will prevent you from copying directly from this page but you can download an example based on Twenty Twelve here.
If you want to apply this to your template, follow the instructions below:
- Make a copy of your standard page template, edit it as shown below, removing the whole loop, and save it (under a new name! For example: wpsz-gallery.php). So your page should contain something like the following (for unknown reasons, the code below was not displayed correctly so I have replaced some of the ‘<' and '>‘ by their code equivalent):
';
echo "<a href='$url'>
</a>
";
?>
The page template calls the header wpszgallery so that you will use a specific header (defined in point 2) for that page. Similarly, it calls the footer wpszgallery defined in point 3.
Here, I have used some inline css to display the Back link top right on the screen. You can of course use alternative css in your stylesheet to style it as you wish.
I gave the id wpszgallery-back to the Back link so that I can make it disappear after a while with jQuery (see below, point 3), leaving a clean full screen slideshow. The address for the Back link (your main galleries page) is generated from the HTTP_REFERER info. It might not work in all cases (some browsers might not work ?) and if it does not, you would need to hard-code the address.
Of course, you could also keep the loop and put the div wpszgallery-back in the page content instead of hard-coding it in the template as I did here. Do as you wish.
Save you new header under the name header-wpszgallery.php. It will then be called from the WPSZ Gallery Page template.
Here, you should mostly have the closing tags for the body and your page_wrap. Do not remove the wp_footer() function otherwise WP Supersized will not be able to show its footer if you choose to display it in the options.
Just before the wp_footer() function, I added the following short jQuery script to make the Back link appear/disappear:
This script is optional, of course. If you don’t include it, your back link will always be visible on top of your slideshow.
Save this new footer under the name footer-wpszgallery.php so that it can be called by the WPSZ Gallery Page template.
Now the only things left to do are:
- to create one main Galleries page that will call the sub-pages containing each gallery. This is this page that you should refer to in the Back link created in point 1 if you hard-code it.
For example, use something like this as your page content:
<a href="http://yourwebsite.com/wordpress/your-flowers-page/"></a><a href="http://yourwebsite.com/wordpress/your-bikes-page/">
</a>
Here, use your imagination to give a nice look to this page. You can use thumbnails as links to the various galleries, as illustrated in the piece of html above. - for each gallery, to create a new page that will use the wpsz-gallery.php template. You do not need to put anything in the page (there is no loop in the template so it would not appear anyway). What you do need to do is to select an images source in the WP Supersized custom metabox to define which images should be used for this gallery. Exactly as usual in WP Supersized.
So if you want a gallery with flowers images, and another one with bikes, simply create two pages, one called Flowers and the other one Bikes, the first one with your flowers images source and the second one with another source with bikes images.
It is probably best to define these pages as sub-pages of the main Galleries page that you have created above. Using the WP menus editor, you could even remove them completely from the navigation so that they would only appear when coming from the main Galleries page. Do as you wish.
WP Supersized will use its general options for each page which means that all your galleries will use the WP Supersized options as defined in the plugin options. If you want to define different options for each gallery, you should use an xml file as explained in the WP Supersized FAQ.
You could also use the same procedure for displaying a full screen slideshow from any page/post, simply by inserting a link to a gallery page that you would have created (and excluded from the menu), as shown in this demo
No Comments