PhotoSwipe Masonry

PhotoSwipe Masonry is built using PhotoSwipe from Dmitry Semenov along with Masonry to generate the thumbnail grid layout. You can adjust the size of the thumbnails and full-size images in the settings. You may need to rebuild your images using a plugin like Regenerate Thumbnails.

This gallery takes advantage of the built-in gallery features of WordPress. Simply use the WordPress admin to create a standard gallery and insert it in the page.

Features

• Clean popup lightbox
• Zoom and fullscreen features
• Easily integrate into existing WooCommerce products
• Mobile responsive
• Settings located in Settings > Photoswipe

Note: If using with WordPress 5 you will need to embed the gallery within the classic editor. Alternatively, check out our PhotoSwipe 2.0 post for an optimised version.

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:

• 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″

[gallery id="2" exclude="24,30,43"]

Using AJAX?

• You can also call the gallery via jQuery if you have an AJAX based theme.

photoswipe_masonry($);


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.

We are on Github if you want to know more or contribute!