Photospace Responsive
A simplified version of PHOTOSPACE featuring a responsive-only layout.
06.03.13
![Photospace Responsive](https://d14pjowmeoxkey.cloudfront.net/wp-content/uploads/photospace-responsive.jpg)
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.
Features
- 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 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.
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? View the demo or download.
Keep Reading
We think you may like these
![Free SVG QR Code Generator](https://d14pjowmeoxkey.cloudfront.net/wp-content/uploads/free-qr-code-generator-l-780x500.png)
Free SVG QR Code Generator
No need to need to sign up, give away your email, or even pay just to download your QR code in a usable format like SVG.