The Lab Photospace Responsive

Photospace Responsive

A simplified version of PHOTOSPACE featuring a responsive-only layout.

Photospace Responsive

Based on the Galleriffic gallery, our PHOTOSPACE plugin takes advantage of the built-in gallery features of WordPress.

Simply use the WordPress admin to create a gallery and insert it onto your page. You may need to rebuild your images using a plugin like Regenerate Thumbnails.



  • Upload multiple images at once
  • Easily order images via drag and drop
  • Add a title, caption, and description
  • Keyboard control
  • Pagination
  • Edit thumbnail number, size and shape
  • Edit size of the main image
  • Edit width of the gallery columns
  • Create a basic slide show
  • Slideshow controls option available
  • Supports multiple galleries on a page or post
  • Supports WordPress multi-site
  • Supports shortcode attributes
  • Settings located in Settings > Photospace


Loading GIFs

Create your own colour coded loading gifs at or


Using Template Tags

  • If you want to hard code this gallery into a page template you can use the below code to do so.

echo do_shortcode('[gallery]');


Conditionally remove header scripts and styles from a page

  • If you want to use conditional tags to remove any of the plugin styles from a specific page, use the below snippet just before the wp_head() on your chosen page template. Thanks Dario Zadro!

if (is_page('about')){
remove_action('wp_enqueue_scripts', 'photoswipe_scripts_method');
remove_action('wp_enqueue_scripts', 'photoswipe_scripts_method_history');
remove_action('wp_head', 'photoswipe_wp_headers'); }


Shortcode attributes

You can set the following attributes you control your gallery shortcode:

  • id – Set the post to read the attached images from such as id=”2″
  • include – Only includes a new list, comma separated attachment IDs such as include=”24,30,43″
  • exclude – Comma separated attachment IDs such as exclude=”24,30,43″
  • num_thumb – Set the number of thumbnails on each page such as num_thumb=”6″
  • num_preload – Set the number of images to be preloaded such as num_preload=”1″
  • show_captions – Choose to show image captions or not (true or false)
  • show_controls – Choose to show slideshow controls (true or false)
  • hide_thumbs – Choose to hide thumbnail gallery (true or false)
  • horizontal_thumb – Optionally show the thumbnail gallery horizontally (true or false)
  • auto_play – Start slideshow automatically (true or false)
  • delay – Define delay between each slide (if autoplay=”true”) in milliseconds such as delay=”2000″


Alternate vertical thumbnail column in wide view

Add the below code to your theme’s CSS file

.photospace_res .gal_content {
float: left;
width: 75%;
.photospace_res .thumbs_wrap2 {
float: left;
width: 25%;
@media screen and (max-width: 750px) {
.photospace_res .gal_content {
float: none;
width: 100%;
.photospace_res .thumbs_wrap2 {
float: none;
width: 100%;


Help! The gallery doesn’t work!

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts. Try the following:

  • Disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  • Switch to the most recent WordPress base theme to rule out any theme-specific problems.
  • Use a browser debugger to find the error (Chrome is the best). This may help you track down the conflict.
  • ADVANCED! If it’s a theme issue you may have some scripts embedded in your theme that are causing a conflict. To disable these look inside the header.php, footer.php or functions.php files.


Wanna try it? View the demo or download.


Written by Samantha

Samantha is our resident web designer and front-end developer wizard. She is knowledgable in all things digital design and loves to bring new and fresh ideas to our company.