The Lab Photospace – WordPress Gallery Plugin

PHOTOSPACE

Automatically add any images attached to a post or page into a gallery.

10.11.10
Photospace – WordPress Gallery Plugin

Based on the Galleriffic gallery, our PHOTOSPACE plugin takes advantage of the built-in gallery features of WordPress. If you have a mobile responsive website, please use this version.

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.

 

Features

  • Upload multiple images at once
  • Easily order images via drag and drop
  • Add a title, caption, and description
  • Fully responsive
  • 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 ajaxload.info or preloaders.net

 

Using Template Tags

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

<?php 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!

<?php
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? Read about the latest version.

Samantha

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.