website design gold coast
website design gold coast

PhotoSwipe Gallery

photoswipe

Dmitry kindly gave us permission to create a WordPress plugin in a similar fashion to our popular PhotoSpace gallery.

PhotoSwipe Masonry is a brand new touch optimised JavaScript popup gallery from Dmitry Semenov see here. Dmitry kindly gave us permission to create a WordPress plugin in a similar fashion to our popular PhotoSpace gallery.

The 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.
You can adjust the size of the thumbnails and full size images in the settings. You may need to rebuild your images.

Options are under Settings > PhotoSwipe

The gallery is built using PhotoSwipe from Dmitry Semenov along with Masonry to generate the thumbnail grid layout.

View working demo here


download the plugin

Want to contribute? See the GitHub repo github.com/thriveweb/photoswipe-masonry


Template tag

If you want to hard code this gallery into a page template you can do so with this code.


<!--?php echo do_shortcode('&lt;p data-wpview-marker="%5Bgallery%5D"&gt;.&lt;/p&gt;'); ?-->

Conditionally remove header scripts and styles from a page


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');
}

Conditional tag info here codex.wordpress.org/Conditional_Tags
Add just before wp_head() in header.php – Thanks to Dario Zadro

Shortcode attributes

You can set the following attributes you control your gallery per instance:

  • id – Set the post to read the attached images from
  • include – Only includes a new list, comma separated attachment IDs (include=”24,30,43″)
  • exclude – Comma separated attachment IDs (exclude=”24,30,43″)

Ajax based theme?

You can also call 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.

You can try:

  • To disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  • Switch to the Twenty Fifteen theme to rule out any theme-specific problems
  • Use a browser debugger to find the error. This may help you track down the conflict. Chrome is the best.
  • [advanced] If it’s a theme issue you may have some scripts embedded in your theme. To disable these look inside the header.php, footer.php or from functions.php

Sharing is caring:

Created Dec 22, 2014 Made on the Gold Coast 305 Responses

305 Comments

  1. Hello, I like This plugin and their fantastic transitions.
    Is possible see the caption only in full wide?
    A masonry grid with out captions but the full wide image with.
    Thanks for this plugin

  2. is there a way to make the images larger in the masonry format ?

  3. Hi! Good plugin. But in my iPhone when I just change orientation it is broking my site and I need to refresh (((

  4. Hey, is it possible to override photoswipe with the gallery shortcode? Sometimes I’d like to be able to use jetpack’s slideshow feature.

    • Hi Andrew. Not really as they both override the same gallery short code. If I come across a way to do this I’ll let you know.

  5. Hi,

    Would you have any idea as to why the popup doesn’t load on click? Whenever I click an image it just goes straight to the image itself on a blank page. It makes an animation as if it were happening but then skips ahead to the image.

  6. This is a great plugin, many thanks for your work on it. I have one problem, though. Just to display the masonry view, I’m getting full-size images loading up. When I right click > view image on a thumbnail picture in the gallery, I get the full 1000px wide image. So the gallery is greyed out for a long time as the images load – on my connection, about 4 seconds, but that is fibre-optic. I shudder to think how long it would take on mobile!

    On your demo, only thumbnail images are loaded in the gallery view, which means the masonry gallery can load almost instantly. Then after you click to expand, only then is the full image loaded.

    How do you do this?

    • Hi James. Did you rebuild your thumbs?

      • Sorry, that’s all it was. And now I see it actually even at the top of this page! I will take this as a lesson to actually read the introductory documentation, especially if it’s only two paragraphs!

        Works perfectly now, thanks.

  7. Hi, i just tried to integrate this great plugin in a theme that renders it masonry gallery…
    Please have look on this page: http://themes.webylon.de/
    Do you have any solutions or a tip how to build a masonry like on the page with photoswipe only?
    Thanks.

    • Hi Lokman. The plugin already uses masonry. If the theme you are using already has a gallery built in you are going to have issues unless you can disable it totally.

      • Hi Dean, thanks for your reply.

        Yes I know you can build a masonry gallery with the plugin.
        But this masonry is not responsive as the built in one. Or am I wrong?
        Is it possible to build a masonry-gallery with the plugin as shown on the site?

        • It’s not possible without editing the code sorry.

          • Ok, I agree…
            The other problem: why the page “reloads” after closing the PhotoSwipe-fullscreen mode? Everytime I close the fullscreen the gallery-page reloads in a wrong way so that PhotoSwipe is disabled or other things go wrong…
            Can I stop reloading the page?
            please see here:
            http://themes.webylon.de/architecture/
            after closing the plugin is disabled and the page fades to white…

            http://themes.webylon.de/
            after closing the page reloads and ….

            • There seems to be several issues. Your theme probably has gallery features built in that are conflicting with the plugin.

  8. Hello! Great plugin!

    One question. Could I still keep the vertical menu when I click on a masonry thumbnail http://www.jcogliandro.com? Obviously this is a customization to the plugin that needs to be done. I’m just asking if this possible

  9. Hi, great plugin :)

    Is it possible to generate a layout like that : http://erikjohanssonphoto.com/work/imagecats/personal/
    I ask because it’s the same masonry script but I don’t know where to looking for.

  10. Hello,

    thank you for the great plugin! I am having an issue with the horizontal bars between the images being thicker then the vertical ones. I have the figCaption set to none, but it is the same either way.

    Any help would be amazing.

    Thanks!

    • Hi Kylie. I’m not sure what you mean. Can you post a link to the issue?

      • Hi Dean,

        Unfortunately my site isn’t live yet so I took a screen cap, hopefully you can see the issue. I have multiple galleries and they are all the same, the space between the images is not the same vertically and horizontally.
        freshlysqueezd.com/wp-content/uploads/2015/04/Screen-Shot-2015-04-06-at-8.30.25-PM.png

        Thanks so much for your help!

      • Hi Dean,

        The site is live now. http://letterpressbakery.com/wedding/
        you can check out the gallery here and hopefully you can see what I mean.

        Thanks!

        • Sorry I can’t see any obvious issues. I would remove all css on your images in the theme to track down the problem. I think the reset css is the problem.

  11. Hi Dean,

    please excuse my bad (google) English …
    Thanks for the great plugin just does, what it is – you do not need more.
    However, I would have a small request:
    Is it possible in PhotoSwipe the display of new images to be provided with a fade effect?
    Thank you for your feedback signal
    Axel

    • Hi Axel. When do you want it to fade. When you click a thumbnail?

      • Hi Dean,
        I thought the images in the lightbox. When you click the thumbnail, the Lightbox will opens with a sort of fade effect, that’s ok that way.
        But then within the next lightbox image is displayed immediately, however. I find that the transition is something hard. It would be nice if the new image will slowly fade.
        Axel

  12. Sally Mueller says:

    what is the shortcode for multiple galleries on one page?

    • Hi Sally. You can do that manually like this. [photoswipe ids=”2122,2123,2126″] with the id for each image and make as many galleries as you like. Alternatively you can output the galleries via multiple posts on a a page.

  13. Hi guys,
    this plugin is very responsive and simple the only problem that I have is that when i click and enlarge the images are shown partially and on the right side of the screen…any suggestions?

    Thanks
    Mattia

  14. Hi, i have problem trying to make your plugin work.
    I’ve installed the plugin, set a gallery in a page but when i go to that page the images are not displayed in masonry and when i click one of them i get a JS error: Uncaught TypeError: Cannot read property ‘firstChild’ of undefined
    I’m using a theme with a built in portfolio page, but the page i’ve created is a standard one and i have disabled the portfolio buildt in plugin.
    Could you help me to make it works?
    thanks!

  15. I love this plugin and use it all the time. Im recently having trouble viewing the lightbox on an iphone. It squishes the images to 25% width of the lightbox. but only on the iphone. (havent checked on a tablet)

    I turned off all of my plugins, and switched from my child theme back to Twenty Twelve. Still no luck…

    any ideas?

    • Hi Trisha.

      Thanks, This is causing the issue. Like 317 in style.css. I’m uploading a fix now. :)

      /* Responsive images */
      .entry-content img,
      .comment-content img,
      .widget img {
      max-width: 100%; /* Fluid images for posts, comments, and widgets */
      }

      • Thank you so much Dean. I was looking forward to building a full photo gallery on my site, but put it off until i could figure it out. Thanks for fixing it! Looking forward to the update.

  16. Hi Dean,
    is it possible to make the background of the lightbox transparent like to this example: gesums.de/upload/bild.png?
    Thank you for your feedback
    Axel

  17. Hey,
    First of all awesome plugin!! :)
    But I’m also having the problem of getting a JS error:
    “Uncaught TypeError: Cannot read property ‘firstChild’ of undefined”..

    Here’s the site I’m working on http://dbjb.se/klienter/thells/bilder/

    It works fine if I disable my “WordPress SEO by Yoast” plugin in the backend, but the thing is I need the SEO plugin so I have to make them work together.. Have you any idea of what it might be?

    Thanks in advance,
    Johan

  18. Awesome plugin.
    Does it load smaller images for mobiles or is it loading the full size (on zoom)?
    I’ve read on the Photoswipe website that we can use responsive images, however it’s all done in js manually and doesn;’t seem to be compatible with wordpress gallery. (So I wondered if it was infact built in)
    Thanks

    • No it doesn’t load smaller images. But as mobiles are high resolution it’s not really needed. What I usually do is reduce the quality of the images to reduce the file size. You won’t notice the reduced quality if you have large responsive images.

  19. Why doesn’t the image sharing feature work? If I link to an image in the gallery (http://thriveweb.com.au/the-lab/photoswipe/#&gid=1&pid=8) it’s supposed to open that specific image. Instead, it opens it after I click on any image in the gallery. Any fix to this?

  20. Do you know if there’s any way to have thumbnails “lazy-load”? I have galleries with a lot of images. Rather than paginate the gallery, I’d like to just have them load when the user scrolls down the page. It would really decrease the initial load time.

  21. M-Design says:

    Hello Dean,

    I’m experiencing a problem when trying to build a gallery displaying large thumbnails. As my theme creates 360px large thumbnails, I have set 360px as well in the “Thumbnail Width” field of PhotoSwipe Options.

    But as you will see on the attached screenshot, PhotoSwipe still gets the small-sized thumbnails (200*300) which leaves behind huge white margins:

    http://i.imgur.com/Am9OQ92.jpg

    Currently, I can only keep the width around 200px to maintain correct margins. Did I miss something somewhere?

    Thanks in advance.
    Best regards,
    M-Design

  22. M-Design says:

    Hi Dean,

    Thanks for your answer!
    The original image is 427*640 px (big enough). And my thumbnails have been regenerated, so the 360px-wide size thumbnail is available in the folder. Still don’t understand why the 200*300 is picked instead.

    I have created another “clean & fresh” wordpress to test your plugin and it appears that the PhotoSwipe Gallery is working without even resorting to default WordPress thumbnails (as if the original image was just resized by javascript in order to be displayed as a thumbnail).

    Are there 2 ways to make PhotoSwipe work (with and without thumbs)?

  23. Hey Dean,

    thanks for creating this plugin. I am using it in a WordPress site of a good friend of mine. The website is still in development.

    Would you be willing to extend this plugin to make it work with single images in WordPress, so that we can just place an image through the media upload in WordPress and the link to the media file respectively the large version of the image.

    I looked at the plugin code but I am feeling kinda overwhelmed to dig into that.
    We could possibly pay you for this extension of your plugin. I really think it would be a great extra feature and it makes perfectly sense – not only for my current project.

    Warm regards from Bali,
    Sebastian

    • Hi Sebastian. You should be able to just insert an image normally to have this feature. This is pretty much what WordPress does by default.

  24. Hi Dean,

    when I place an image into a page and choose the option “link to media file” for example, WordPress only adds a normal link around that image. There is no association with photoswipe nor is there an output of the source code (including ) that is needed for the photoswipe feature to work.

    So how do you think this should actually work?
    Isn’t your plugin just geared towards the addition of photoswipe to WordPress’ native gallery feature?

    I am puzzled! :)

    • OK do you still want the photoswipe popup. Yes this could be a nice feature to add. Let me have a look into what would be involved and get back to you.

      • I think it would be more consistent at least for this project I am working on and in general it would be an amazing feature to have. :)

        Right now I would have to add another lightbox script if I want a proper, user-friendly displaying of images when a thumbnail is linked to the media file. At the moment it only opens in a new window – wordpress standard – but that’s kinda lame I think and not so user-friendly since you have to hit the back button to get back to the site.

        When it would be possible to use photoswipe for single images in page/post content, it would make it possible to create a gallery that has text in it or a project description that has thumbnails to click on it.
        Just in general a more flexible way to generate content in combination with “zoom-able” images. I think it makes totally sense.

        It would be great if you could come up with that … or some hints on how to achieve that. I found the vanilla js of the standard photoswipe really challenging – that’s why I was so happy when I found your plugin! :)

    • Alejandro says:

      I hope that you soon upgrade the plugin including open single images with photoswipe. Thanks and congratulations for your plugin.

  25. Hello,

    great plug-in, the masonry feature works perfectly!

    However, I face an issue when the images are clicked. They expand but they are way too large for the screen. It looks they align to be centred on the page not on the screen and do not respect they maximum size (1000px for the long edge) resulting in a blurry effect.
    There is no other plug-in activated and I’ve tested with different browsers.
    You can have a look at marjorie.photography (the site is still under development).

    Thanks!

    • Hi, can you please try another theme and see if you have the same issue?

      • Hi,

        I’ve tried Twenty Fourteen & Twenty Fifteen and the picture expand works perfectly. It’s definitively theme related.

        • I can’t really support theme fixes. But it looks like you just need to delete this in your theme css. Line 2116

          
          #content {
            position: relative;
          }
          

          It may effect your “Slide-out comment sidebar”

  26. I understand, it’s clearly an issue theme related, but actually, your suggestion helped me to find the culprit and to fix the problem. Thank you for your support, it’s a great plug in!

  27. Hi
    is it posible to use 1-2-3 columns? Galery ignored WP settengs
    I undertand that i can change thump size, but i need for one post 1 colum galary, for other 3/ and for 3d adaptive based thump size
    Im terrybly sorry for my english

    Thanks for help

    • Hi Dimon. No the masonry plugin does this automatically based on the image widths. Adjust your thumb sizes or theme column width to change the layout.

  28. Plugin was working fine, but not it doesn’t seem to build the masonry. is there any way to find out why? I just deactivated the last plugin i installed, but that didn’t work. Any help would be appreciated. This was by far my favorite simple solutions for gallery display.

  29. Is it possible to integrate this with a Lazy Load so that the thumbnails out of the viewport will not be instantly loaded on refreh?

    Someone already posted a link for a possible fix but that didn’t work. Does anyone else know a workaround for this?

  30. Is it possible to start/call the lightbox with a rel=”lightbox”? My theme does not use the wordpress built in gallery option..

  31. Can you point into the direction of displaying the image caption in the slide show. I suppose this is photoswipe territory but should be code within the plugin to address i suspect

  32. I want to use this functionality for a non WP site, how can I do this?

  33. Hi, This plug-in has been brilliantly useful for me, but I have recently been asked if the masonry effect can be used horizontally, rather than vertically? i.e. at present, it divides images into clear columns in a vertical fashion, but I would like to be able to organise them horizontally into rows instead? Is this possible?

  34. Hi Dean, beautiful plug-in. Do you have any tips on what to look for in a theme to identify the conflict with the plug-in?

    “If it’s a theme issue you may have some scripts embedded in your theme. To disable these look inside the header.php, footer.php or from functions.php”

    What would you be looking for to disable? A particular line or word that would indicate conflict? Like ‘javascript’? Or ‘jquery’? I’m no coder, but I can search/find/disable trial and error style until I find it.

    For me, I’m using ProPhoto: http://curtiswiklundphoto.com Thanks!

    • Hi Curt. Photo themes quite often override the built in gallery. It’s hard to say without looking into your theme in detail sorry.

  35. Hi, an amazing PlugIn! As i am still using Dmitry Semenov’s Touchfolio theme it’s nice to see his name here too. And here’s the problem: with Touchfolio theme galleries are rendered below menues/widgets left hand in posts and pages. See an example here:

    https://ssl-account.com/cblog.hatzius.com/index.php/2015/09/24/touchfolio-photoswipe-masonry/

    Is there anything you can do about this? If this is a theme bug, can you recommend anything simple and powerfull like Touchfolio? It seems like it’s not supported any longer.

    Thank you!

  36. This is, by far, the best plugin for displaying and viewing my image galleries. One issue that I can’t seem to figure out is the thumbnail images in the gallery appear off-centered (flushed right) on iPhone. My desktop computer and iPad looks fine, but it does not display correctly on iPhone. Is this an incompatibility issue with the theme (Sydney) I’m using, or something else is causing them to be off-centered? Please help. Thanks.

  37. On http://photoswipe.com (Dima’s JavaScript library) is a ‘Minimal’ option, is it possible to set it up in your PlugIn?

  38. Any chance of adding pagination to the gallery?

  39. Hey there, I am building a custom WordPress theme and trying to get your plugin up and going. But when I click a photo it doesn’t initiate the lightbox. I have disabled all other scripts except jQuery and my custom app.js file. I have tried disabling/enabling all other plugins, I have checked and your photoswipe-masonry files are registering in the head tag. Does your plug-in have any issues with AFC pro and the gallery plugin? I can’t think anything else. Thanks for any suggestions you may have.

    (I tired a different photoswipe plugin and it worked immediately, but the other one doesn’t have share buttons – which your’s does so I hope to get it to work! great job)

    • Hi Ernie. Can you post a link? It’s hard to say otherwise.

      • Thanks for such a fast reply, Dean. I am developing locally so I can’t. I realize this is almost impossible for you to troubleshoot. It’s is as if the actual photoswipe overlay shell isn’t triggered.
        The theme I am building is actually a conversion from html/css where I had photoswipe integrated but had trouble continuing to make it work once in the WordPress framework. I have made sure there is no trace of it in my code now. Is your plug in just supposed to work? I don’t often use plugins. Does the html markup matter? I have used schema example from photoswipe.com and then the standard method for looping gallery images from the ACF documentation. I know this is hard to troubleshoot, but I would welcome any thoughts.

  40. Hi, thank you for this plugin that seems very cool but I have a problem trying to modify the thumbnails size.
    I changed the size directly in the photoswipe-masonry/photoswipe-masonry.php file, just there :
    $options[‘thumbnail_width’] = ‘300’;
    $options[‘thumbnail_height’] = ‘300’;

    from 150 to 300 for example, but nothing changes at the screen.. Is it the good way to change the thumbnail size ? do you have an idea why it doesn’t work ?
    Thanks!

  41. Is there any way to make PhotoSwipe work even if there is only image? i mean PhotoSwipe is great when you create a gallery in wordpress but when you put only one photo , it cant be opened with photoswipe?!

  42. Hi,
    Is there a way to configurate the thumbails size differently from on page to another ?
    And the margin size between the pictures maybe?

    Thanks. It’s really useful.

  43. I’m having problems with the pinch zoom in photoswipe. I think it’s a theme related issue, but i have little experience with coding so i’m finding it difficult to find the associated style. The pinch zoom distorts. other than that This has made the blogsite i’m creating look amazing. Could you help?

  44. Is there a way to allow for visitor to download the full resolution instead of 1800px wide?

  45. Hi,
    Is there a way to configurate the thumbails size differently from on page to another ?
    And the margin size between the pictures maybe?
    Thanks, it would be great!

  46. Hi,

    On mobile devices only, when you tap on a gallery photo and either pinch or tap to “zoom” to full size, images become skewed and stretch horizontally.

    Issue tested and occurs on iPhone 5s, 6, iPad Mini, and Android tablet. No issue on desktop, but it may be because of the larger screen size.

    How do i fixed this ?

  47. Strange question, but is there a simple code line to add to disable the “photoswipe” functionality, and keep only the masonry effect?

    That’s my question, here’s the “why” if this is helpful: For some reason, the photoswipe portion of the plugin is in conflict with my theme. The masonry effect is perfect, but after clicking, the images appear off-center, going off the right side of the screen. I found another plug-in (“PhotoSwipe Light”) that is not in conflict with my theme, when it comes to clicking images. I love the masonry layout of your plugin though, and it WORKS with my theme! I have literally tried every single other “masonry” plugin, and yours is the only one that works. Is there a way to use it only for its “masonry” layout abilities?

  48. James Bassendine says:

    Hi, just wanted to post a quick note here for anyone else wanting to get access to more of the masonry options, or specifically to use this plugin for multiple galleries with different tile sizes.

    In the $args = shortcode_atts array, you can add more options that can be altered through the wordpress gallery shortcode. For instance, add

    ‘thumbnail_width’ => ”,

    On an extra row. Then, underneath, you can add:

    if ( !empty($args[‘thumbnail_width’]) ) {
    $options[‘thumbnail_width’] = intval($args[‘thumbnail_width’]);
    }

    This allow you to alter the width of the masonry tiles for each individual gallery by adding ‘thumbnail_width’ = “500” (or whatever) to the gallery shortcode, but the picture which is embedded in the page is still the size in photoswipe settings (which means longer loading times, and that you can’t make the tiles larger than that size).

    To change the size of the embedded image, add a ‘size’ => ‘photoswipe_thumbnails’, to the shortcode_atts array, find the $size_class variable declaration, move it up to underneath the shortcode_atts array, and change it to

    $size_class = sanitize_html_class( $args[‘size’] );

    In the $thumb variable declaration, you can then change the second argument from ‘photoswipe_thumbnails’ to $size_class. This mean if you don’t declare a short-code it will stay as it is, and if you do, you can use the thumbnail sizes which are declared in the WordPress admin interface, and built into the WordPress gallery.

    Also, you can use the same idea to change the gutter widths. Add a ‘gutter’ => ’10’ to the shortcode_atts array (10 is the default if you don’t set it in the shortcode), declare a gutter variable $gutter = intval($args[‘gutter’]); then add gutter: $gutter to the options object passed into the new Masonry(…) constructor. I presume you can use the same technique to get access to any of the other masonry options (http://masonry.desandro.com/options.html).

    Hope this saves someone else some time. Many thanks to Dean Oakley and/or the rest of the team here for the excellent plugin.

  49. Hi!
    I really enjoy your pluggin but it doesn’t work proprely on internet explorer. What can I do?

    Here’s a problematic article : http://catherineloranger.com/amelie-christopher/

    Thank you !

  50. Hi,
    I’m planning to use photoswipe on my new website. It’s geat!
    However, the theme I picked “overlays” a header and a footer bar, which means part oft the pictures (when viewed in large) are hidden under the bars. Is there a way to get the plugin to make the pictures autoadjust, but than a litlle smaller (e.g. 35px in height less?) – and position it a little differently (respecting a space on top and bottom)?

    Thanks alot for any suggestion!

  51. Hi Dean! I asked about photoswipe when there is only one photo. Has there been any progress? thanks

  52. Hi Dean,

    Rebuild Thumbnails shows the correct dimensions for photoswipe_full but it is ignoring the thumbnail dimensions set in the plugin options. It shows 484×726 for photoswipe_thumbnails instead of 242×363 which is set in the options.

    Any idea why?

    Thanks.

    David

    • Hi David. The thumbnails are double size for retina support. It’s a good to double size your main image too!

      • Hi Dean,

        Thanks for the reply. So it is x2! Hadn’t noticed.

        But surely you only want to load x2 images conditionally on Retina screens. That dozens of thumbnails loaded way too big on regular screens.

        And why isn’t the large image size listed x2 if the thumb is?

        • If you reduce your jpg image quality the file size is about the same and it will look better on all screens. Use a plugin or some code.

          
          add_filter( 'jpeg_quality', create_function( '', 'return 65;' ) );
          

          • Hmm that’s a poor hack and a 65 compression doesn’t halve file sizes. Can’t your plugin use WP 4.4 responsive images capability?

            • It should be close to half, you can try a lower setting. You will need to rebuild your thumbs.

              I think it’s a good solution seeing that most screens will be high resolution soon.

            • Also it’s not a poor hack. It’s a simple way to support retina screens that has worked well for years.

              • Sorry, WP 4.4’s responsive ability is no use here of course. But there are other solutions.

                Have to say I am very surprised you think serving hi res files to regular screens is OK.

                • Serving lower quality high res images looks good on both screens with a similar file size. There is no need to change this.

  53. Hi I’m just wondering how I set this for specific pages only rather than the full site,

    cheers.

    • Hi Lara. You would need to edit the plugin for this.

      In photoswipe-masonry.php remove line 189 “add_shortcode( ‘gallery’, ‘photoswipe_shortcode’ );”

      Then use the short code [photoswipe ids=”15,14,12,11,10,9,8″] where the id’s are your images.

      I hope that helps!

    • Also change the version number at the top of the file to 9.9.9 to stop updates

  54. cheers, worked like a charm.

  55. Hi there, great plugin! :D, i have a problem tho, once i click on the pict this doesn’t go over top everything.. the header is still on top, and i can’t see part of the pict..

    here is the link

    http://luciofarina.com/gallerykansai/

    is there something that i can do?

    • Hi Lucio. That is a tricky one. It has taken me a while to track down your theme issues. There are some un-needed z-index settings! You need to remove the z-index in your theme css.

      .page-background ( line 360 ) and .page-body ( line 343 )

      • Hi Dean that worked out quite well thanks!.. I got another question now, do you think there would be another way to fix that? Like some custom css on the page itself? I’m asking cause if I change the main css next time I update the theme I have to redo the changes (if I’m correct) and there will be a chance that I forgot about it :-)…

  56. Dean.
    A year ago (first question in comments) you gave a css-code to hide captions from pictures to only show this in full screen. I need it the opposite way: showing in gallery but hiding in full-screen. Is that possible just by adding some css-code?

  57. Hello there. How can I reduce the white space the appears above each image gallery? And how can I get the gallery to be shown wider (1200px wide)?

    Thanks!

    • Ok I answered my own questions, so you can disregard those. But my remaining question is about what the gallery settings size options change. Since thumbnails are only changed by the theme option, then what is changed by selecting thumb, med, large or full size? It would be nice to have the option of having different sized thumbnails and the choice between 2 or 3 column galleries.

      • Hi Renee. The masonry grid will define the columns that will fit based on the thumbnail size. You can set the thumbnail size in the plugin settings. I hope that helps!

  58. Hi guys and thanks for a great plugin. You’ve made really nice work here after Dima’s baby.
    Just made a first look on it yesterday and now thinking of implementing it in a couple of my recent works.

    Is there a proper, neat way of squeezing any other custom html into it (as described by Dima) with no extra custom init call? Right now I took his codepen example for pushing an iframe google maps into it. Just wondering if I can re-use your plugin infrastructure at any point?

    Thanks in advance!

    • Hi. Can you post a link to that codepen? Feel free to hack away at this plugin!

      • Heyo! Look at this example here: http://www.montebrito.info
        While 4 image galleries use your plugin functionality by default, the google map is being called extra using an addition to the custom.js in the theme folder. Well this is kind of starting point for me now, only the .pswp container and all dependencies is what I re-use from you, items to show are static content in the custom.js
        galleryUID looks especially ugly, isn’t it? I am totally not a javascript specialist so please don’t hit hard, any ideas how to go further?

        I want to try re-using the build-in Custom URL gallery to display it’s content in the iframe, keep you updated..

        Best, p

  59. Hi,
    I’m asking that again, maybe you can help me out:
    The theme I picked “overlays” a header and a footer bar, which means part oft the pictures (when viewed in large) are hidden under the bars. Is there a way to get the plugin to make the pictures autoadjust, but than a little smaller (e.g. 35px in height less?) – and position it a little differently (respecting a space on top and bottom)?
    I already found a way to position it a bit lower (though not that good looking), but it’s still too large, losing a fair bit on the bottom.

    Here’s the link:
    http://www.michael-gelfert.com/V5/beauty-2/
    (please delete it after reviewing)

    Thanks alot for any suggestion!

    • Hi Micha. Check out your theme css. #wrapper has a z-index setting of -1. Style.css line 93. Remove this and it works. It may effect your theme in other ways!

      • Thanks, but that does not work. Without that z-index the menu doesn’t work anymore. Can I introduce a way via CSS to overlay the pictures nonetheless without changing the wrapper?
        Or is there, as I initially asked, a way to make the picture (container) smaller?

  60. Hello,
    I have uploaded and activated the plugin, but cannot seem to find how to use it. It is in my INSTALLED PLUGINS menu as active. It is not any WordPress menu that I can see….any ideas?

    Thanks in advance.
    Brian Powers

  61. Hi,

    Thanks for plugin.

    My gallery has 15 images and they all show in the post. Is there a way to only show the first 6 images as thumbs on the page. And in Lightbox mode you can scroll through all 155 images?

    Everything works fine, just that don’t want to show too many thumbnail in post.

    TIA

  62. Hey Dean,

    Is there a way to have the image widths based on percentage so that the gallery will fill it’s container rather than leave gigantic margins on either side?

  63. Thank You, Great work, it ist realy easy to use

  64. Hey,

    is there any support for mobile display?
    When I open the Demo on my mobile, open a picture and switch from portrait to landscape it works well. But if I turn back to portrait the picture is pushed a bit down and cropped.

    Thank you for your help!
    Best,
    Marcel

  65. Hey guys, great plugin you have here, thank you very much! I was wondering if is possible to use custom html with this plugin. Ref: http://photoswipe.com/documentation/custom-html-in-slides.html Thanks!

    • Hi Luis. No sorry as the images come from the gallery system in WordPress. Something like that would need to be custom built.

  66. Hi,

    I want to keep the ‘pop-up’ window for images confined to within a specific area (div). At the moment I’m losing the left had portion of the pop-up behind my navigation panel – see website above.

    I think this should be possib;e with some CSS amendment? but can’t quite work out which div/class I should target?

    Appreciate if you could point me in the right direction.

    Cheers

    John C

    • Hi John. I can see what you want to do but I think that would need some advanced dev work. Photoswipe is designed as a total overlay

  67. Hi, thanks for sharing and great work! Can it pull the attached images in a post and play them as a slideshow just like it does with gallery?

  68. Thank for such a wonderful plugin. I have 4 queries:

    1 – How to update Share option in Popup window? I want to get rid of Download image and/or replace with some other Social Sharing option!

    2 – How to keep Thumbnails even…I mean the Portrait images are not adjusting to Square thumbnail.

    3 – Is there a possibility to make a Group/Album. For e.g. I click on Work Menu & It displays all the albums within that section & each album pops up respective images!

    4 – Currently it’s 2 column….Can I display thumbnails in 3 column?

    Thank You so much :)

    • Hi Raj

      1 – How to update Share option in Popup window? I want to get rid of Download image and/or replace with some other Social Sharing option!
      You would need to get into the code to edit this at the moment sorry.

      2 – How to keep Thumbnails even…I mean the Portrait images are not adjusting to Square thumbnail.
      The thumbnails are not cropped to keep the nice animation affect. To change this you would need to edit the plugin.

      3 – Is there a possibility to make a Group/Album. For e.g. I click on Work Menu & It displays all the albums within that section & each album pops up respective images!
      Not at the moment.

      4 – Currently it’s 2 column….Can I display thumbnails in 3 column?
      Yes! The Masonry plugin automatically creates the columns to fit the available space. Reduce your thumbnail size to make more columns. Make sure you rebuild your thumbs!

  69. Hello,

    great Plugin.
    One question: Is there a way to display different thumbnails/images than what is displayed in the lightbox? (for example with a different background color etc.) It is not possible to add a user defined link to offer another image, is there a way to add that feature? right now it seems that you are just able to use one and the same image for both the thumbs and the image shown in the lightbox and you are just able to crop it-which doesn’t work proper for me by the way. thx.

    • Hi Janesh. As it runs off the built in WordPress Gallery System I don’t think there is any way to specify a different thumbnail to large image.

      If you crop the images it might not work well with masonry. I will check this out.

  70. An awesome plugin! Thank you so much!

    Is is possible to add ads before the image for each slide? Where to edit it, thank you!

  71. Hello Dean,

    I have a little problem with the plugin. I use a wordpress photogallery on my homepage with a couple of photos. The problem is that when my website is in mobile resolution the photos align on the center of the page and are very small, instead i want them to take 100% from the viewport on mobile phones, exactly how your example from above is. Can you take a look at my website? http://www.victorbalau.ro

    Thanks in advance.

    • Hi Adrian. Have you tried increasing your thumbnail size to 300 or so? You need to rebuild your thumbnails.

  72. Hi. Great plugin, gave you 5 stars. Thanks. One question, on mobile gallery images fill the screen width, but just seem to have a little buffer on the left so they don’t sit exactly centered. Not a big deal, but wondered if it’s something in my theme or if I’m doing something wrong.

    You can see it on this link, as the first image is loaded into the page, with the rest in a gallery below.
    100hands.org/sarahwilkins/

    Thanks for any help.

    • Hi Scott. The individual thumbnail images are not responsive so if you make the images less wide they should fit or you could reduce the padding on the theme wrapper id=”page” . Hope that helps!

  73. Thanks, will take a look.

  74. Hey,
    Great plugin, thank you!
    May i ask one question? :)
    Is there an option to make an image act like a link to a page or post?
    So, when user clicks to an image it will redirect to a specific page/post instead of opening the current image.
    Many thanks for the plugin!

  75. Thanks so much for this plugin Dean! One quick question, I spent a good amount of time to re-title lots of images that I will use in a few galleries with this plugin. I was hoping the title would show on each – I see that you can show captions on thumbnails, but is there a way to force the caption to show the image title, or a simple way to show the image title on each image, or at very least on hover? I am trying to avoid going back in and then labeling all the captions to match the image title which is already done.

    Thank you!!

    • Hi Mike. You would need to edit the plugin. See line 485 in photoswipe-masonry.php you might need to change this to use $image_title ?

  76. Hello! Love the plugin! :D
    Is possible to disable the plugin only for blog posts?

    Thank you!!!
    Anna

    • Hi Anna. Hmm I don’t think so sorry. You could use a different shortcode [photoswipe id=….. ] and disable the gallery one but you would need edit the gallery short code manually.

  77. Francisco says:

    Hello,
    I was trying to implement photoswipe into wordpress manualy with no much luck when i found your great plugin. It works great but i would love to be able to have some captions with the slides. Is that possible? Thanks

  78. Great plugin! Everything works fine except first time when i visit gallery it doesn’t open it properly when i click on image. Instead it opens blank html page with image. When i refresh page it opens gallery normally.

    • Hi Ivan. It might be a conflict with your theme. Can you post a link to demo the issue?

      • Hey Dean tnx for quick reply. Here is a link to issue santoriniweddingvideo.com/photography/ .I am using Qode theme.

        • Hi Ivan. It loads for me but it takes a while. Have you tried waiting until the browser finished loading? If you are still getting the problem let me know what browser you are in.

          I would reduce the amount of images or make the thumbnails smaller!

      • Hey Dean, I tested in latest chrome safari and mozila. Unfortunately i don’t think so it is due images size(maybe i am wrong), yes loading time is a little bit longer, but for example when i go directly to this link santoriniweddingvideo.com/photography/ it opens ok , but if i go first to home page and then navigate to photography page it doesn’t open gallery properly instead it opens html page with path to uploaded image in url. There is no &gid=1&pid=13 for example parameters in url like when gallery is opened. Any Ideas?

        • Hi Ivan. OK it looks like your theme is Ajax loading pages so the gallery which is triggered “onload” isn’t starting. You would need some custom development to get this working sorry.

  79. Hi,

    After the upgrade to version 1.2.1, linking directly to an image with ex. #&gid=1&pid=13 no longer works. It did work earlier (version 1.1.2 I think).

    As a consequence, sharing from the lightbox (e.g. via Facebook) is also broken, since the link generated (with gid and pid) doesn’t point towards the image being shared.

    It is also broken on the plugin homepage, for example:
    http://thriveweb.com.au/the-lab/photoswipe/#&gid=1&pid=13

    I wanted to downgrade to plugin version 1.1.2, but everything before version 1.2.0 seems to have been removed from SVN and Git, so now I’m stuck with a non-working version :-(

    Please help, either by fixing the latest version, or by making version 1.1.2 available for downgrading.

  80. Hi there!
    Thanks for this awesome plug-in!
    Is there a way to turn of sharing options? I use this to show my portfolio of commissioned / copyrighted work and I can’t have sharing/downloading enabled on my site. Any hope for me?
    Thanks!!!

    • Hi Nathalie. There is an arrow button top right for this. But there is an issue with the latest version which will be updated very soon!

      • Hi Dean,

        Thanks for your reply. I am not sure I expressed myself clearly and so I think you misunderstood.

        I am looking for an option to turn off sharing and download. Currently the arrow at the top right is giving the option to download and share.

        Will it be possible to include this feature in a future update?

        Thank you so much for your support!

        Best regards!!

  81. Hello Dean,

    First of all, thanks for the plugin!

    I’d like to know if there is a way to set the gallery in a full width div.
    I have played with the thumbnail sizes in the plugin’s settings page, and this changes the gallery container size, but it is not clear if it is possible to make the gallery spread 100%.

    Thanks in advance,

  82. I see you have already been asked the question but I just wanted to add that I am creating a site that I wanted to have a masonry gallery on the homepage with links to all the pages. I have now gone through four plugins trying to achieve this, but every one has failed. Two of them are premium plugins as well. With the right effects on mouseover this makes for a very attractive homepage but so far it’s not possible. I am no coder but I think replacing the picture hook with a URL doesn’t seem that complicated. There’s actually a plugin called WP Custom Gallery Links that is supposed to do that, but it doesn’t work.

    • Hi Garry. It’s not possible at this stage. If there is more demand I will try to add it in the future. Or you could look at getting a custom plugin made by a developer.

      • After an exhaustive search for both a masonry layout for our home page and an ad plugin we found Ultimate Gallery Master Pro. The developer worked with us on a couple of issues and also suggested we use the plugin in our sidebars. It worked perfectly.

  83. Rostislav says:

    Hi. Very good plugin. But only needs one modification.
    I create 14 galleries in one page (more than 200 photos). When I loaded the page the size was 42 MB :)
    It would be nice if there was a setting for Ajax upload galleries as you scroll down the site.

  84. Hi Dean,

    is it possible to link the thumbnails to url’s instead of opening a picture?

    Thank you,
    Peter

  85. Hi,
    Great plug in. Thanks a lot.

    A couple of questions. In the Photoswipe pop up it does not show all the controls on the demo. It shows the navigation arrows, but it does not have the close “x” Is there a way to add the controls?

    Also is there any way to have the Photoswipe be default for all images, whether created in Word Press Gallery or not?

    Thanks

    • Hi John. It should have all the controls available. Not sharing on single images as it’s not possible at this stage. Please post an example link for me to check out.

  86. This is a test page that should show you.

    http://johntownes.com/test/

  87. Ooops…..The corner was covered up by the WordPress banner. I looked on another browser not signed in and the controls did show up. Sorry.

  88. Andreas Günther says:

    Hello. Great plugin !! A small Wunch I have. How do I get the arrows in the picture? Looking forward over a response. regards Andreas

  89. Why do you make the thumbnail size double than necessary?

    add_image_size(‘photoswipe_thumbnails’, $options[‘thumbnail_width’] * 2, $options[‘thumbnail_height’] * 2, false);
    It makes the thumbnails bigger than necessary, decreasing loading speed.

  90. Hey Dean, I love your plugin, great work. However, captions are not working for me. I can enable captions in the gallery, if I check the checkbox. But I can’t show them in the lightbox? Do you have any ideas why? Shouldn’t the captions be visible by default in lightbox view? I googled and tried for a week now, but couldn’t figure it out…you can see the issue on my (unfinished) page: tommy.acrux.uberspace.de/wordpress/reisen/von-bangkok-nach-bayern-auf-dem-landweg

    Thanks!

  91. Hey Dean, this is a great plugin for its ease of use.

    One thing I notice is how the lightbox has a different setting for mobile. The image tends to fill up the screen to the left and right edges. This is an issue because I have captions. You can see a screen capture here:

    http://grayswartzel.com/test-phone.png

    But on the browser, the lightbox image shrinks with a left and right margin from the edges of the screen, even when I shrink the browser to have a width of 200px or less. It also never overlaps with the captions. You can see a screen capture of what it looks like on chrome with a small window:

    http://grayswartzel.com/test-browser.png

    I would like to turn off the mobile setting. Is there a way to do that? Thanks.

  92. [code][/code] this is my prev post

    [code][/code]

    this is activated Plugin , after class=”single_photoswipe” data-size=”1000×663 on ADDED…

    My prev post, how to use? or can you explain in edit php code line?

  93. Hello guys,

    I am not able to get the zoom function to work properly.
    When the lightbox opens i get all features just not the zoom one, any ideas?

    I see it does work on this demo page, is there anything i need to enable/do ?

  94. Hi, a few observations:

    – single images linking to custom url incorrectly attempt to open that image and product “The image could not be loaded.”: it would be great to allow images with a custom link to zoom into the lightbox and then click through to the link. Otherwise images which do not link to media file should be excluded from lightbox (as works correctly for pics with no link or link to attachment page).
    – class=”single_photoswipe” : instead of adding this at save time, an initialization script could create a lightbox out of all the eligible pictures in the post (ie all pictures which link to original media file), then you can open any picture on the page to be able to swipe browse through all the pictures on the page.. good for those who just like to look through the pictures and captions and not bother with the text ….otherwise if it is just single photo there is no swipe….. … and repeating all the photos again for the sake of the gallery seems silly

  95. Hi all!
    I installed this wp plug-in and have now the following problem:
    When I hoover the icons, they disappear and it shows an ugly filled square instead.
    Can somebody help me?
    Thx!

  96. Hi Dean,
    I love photoswipe ever since and I am happy that you did the WP implementation.
    However I have a strange side effect. I assume it is the same Brandon reported some time ago above:
    Whenever I click on a thumbnail in the post page I first get an extra white framed image popping up which I need to close first before I can start swiping.
    Pls. see http://studios.signum7.com/modernes-stadthaus as an example.

    This is different to the behaviour on your demo page.
    Can I turn this off?
    regards,
    Konrad

    • Hi Konrad. Yes this is the case of another image popup plugin being active in your theme, “fancybox”. Please see if there is an option to turn this off. Or see if you have a plugin adding this to your site.

  97. Thank you Dean, fancybox was indeed activated for images. I could solve the problem with one mouse click.

  98. Dean,
    Great plugin, exactly the solution I was looking for when viewing on mobile. However, I’ve got to admit that I like the Mosaic gallery display from Jetpack better. Jetpack’s gallery just doesn’t swipe on mobile as good as yours. Do you know of any workaround for this?

    Thanks,
    David

  99. Looking at this further, the tiled galleries and the carousel are activated separately in jetpack. Does your carousel have to override jetpack’s tiled galleries?

    • Hi David. Can you turn off the gallery in Jetpack? It won’t be compatible with other gallery plugins running at the same time sorry.

  100. Dean,
    What if I didn’t want to display a thumbnail gallery at all, but have the carousel launched from a text link? I’ve been experimenting, and I know how to hide the gallery using ‘display: none’ in css. But my rather novice attempt at clicking a gallery image to launch the carousel, then using that URL to create a “View Gallery” link didn’t work. http://david-mcgowan.com/skelletones/

    I have seen this discussion on github, but I don’t know enough about javascript to know what to do. Any advice? https://github.com/dimsemenov/PhotoSwipe/issues/917

  101. Hello, thank you for the plugin, it’s very useful and beautiful. I used it with a WordPress gallery. The main problem for me is what you call on you website, I think, the grey placeholder : while the pictures are loading there is a grey placeholder and, with chrome, no scroll bar, you have to wait the end of the loading to be able to use the gallery (with Explorer I have the scroll bar even when it’s loading). Is it possible to avoid this grey screen (or maybe to be able to navigate even when the gallery is loading)? You can see the page : studiobtbob.com/wordpress/portfolio-items/photos-de-mariage/

    On the tablet, as a visitor, you don’t know what’s going on : the pictures are grey but you don’t see the bottom of the gallery is loading so you see grey images.

    Thank you.

  102. Hi, this is the best WordPress gallery plugin I’ve found so far! But(!), is it possible to adjust the images size on a gallery level? (E.g. gallery 1 uses width: 200px; gallery 2 uses width: 300px; etc). I have a few galleries on my website but ideally images should have different sizes on different pages to make it look nicer. Is this possible? Thanks!

    • I found an almost solution, finding the id of each gallery. It’s not ideal though as it doesn’t work in all instances for me, large images overlap instead of moving below each other. Might be because of masonry?

      #psgal_2_1.psgal img {
      max-width: 180px !important;
      width: auto;
      height: auto;
      padding: 5px 5px 5px 5px;
      }

  103. Hey,
    Maybe it’s a dumb question because it can’t work or it’s totally obvious how to do it, but:
    Is there a way to define a ” longest side” to all thumbnails, so that portraits are rougly as big in total as landscapes (e.g.: portrait: 200*300, landsacpe 300*200 – so longest side is 300)? Right now all my portraits are way bigger than my landscapes. :-/
    Changing the thumbnail-sizes in the options only ever changes the width, causing what I just described.

    • Sorry that’s not built into the WordPress thumbnails. Can you post a link so I can see how bad it is? I may have some suggestions.

  104. Hi Dean

    Any idea how I disable or override the built in lightbox from my theme? I installed the plugin but it just uses the theme’s lightbox, see http://simonamrein.com/mythen/

    I use the theme “Semplice” by http://www.semplicelabs.com (they couldn’t help me out yet).

    Thanks in advance!
    Simon

  105. Awesome plugin! Really beautiful. I’m having only one issue. As a few people above mentioned, I’m having a problem with the pinch zoom. When pinch zooming (on my iPhone 5S), images become distorted. Any way to fix this, or even disable pinch zoom altogether? Whichever solution is fine. Thank you in advance!

  106. Hi Dean,

    I had some problems with this plug-in, and after reading the comments here I have solved.

    Thanks!

  107. Dear Developer,
    thanks for this awesome plugin. Unfortunately i could enjoy it only in the preview on your website, it’s not working for me. I tried everything what i read in the comments before – disabling plugins, using twenty seventeen theme, but nothing works. Both, masonry gallery and lightbox.
    I would be very happy if you could give me an idea, where the problem is.
    Website: http://www.viktor-kostic.com

    Thank you very much!

    • Hi Thomas. It looks like your theme has a built in masonry grid gallery. You may need to talk to the theme developer about disabling this before adding the gallery.

  108. Hi. The controls on the PhotoSwipe Lightbox are displaying with large gray buttons instead of the icons. They seem to work, but don’t look right. I see the problem using the default “twenty seventeen” WordPress theme, but if I switch to “twenty fifteen” I see the controls properly. I’ve tried disabling all plugins, but that did not help. I’m not afraid to dig into the code, but I don’t know what I’m looking for. I’ve looked in the theme functions.php, header.php, and footer.php as suggested above.

    • Hi Chris. Sorry for the slow reply. I’m not seeing this in”twenty seventeen”. What browser are you using?

  109. Hi there
    Love the plugin, perfect for the site I’m working on. I have one issue, the arrows are closing the image as opposed to moving the image on. I’m guessing this may be a conflict with the gallery in my theme. Just wondered if you had any ideas?
    http://www.cutdead.co.uk/locations/wynchelse/
    Many thanks, Matt

  110. AlLison says:

    Hi there, will i be able to add hyperlinks in the caption?
    Thank you for the plugin!

  111. Hi Dean,
    thank you very much for the good work.
    As i understand the rows are given through the thumbnail size and there is no other way to have some influence on the layout of the masonry grid.

    My problem ist that i would love to have bigger thumbnails but if i put the Thumbnail Width to 350x in PhotoSwipe Options, i get a horizontal scrollbar on smartphone in portrait mode.
    I don´t have a clou how to solve this problem.

    Could you give me a hint?

    Cheers
    Robert

  112. Dean, you’ve given so much to so many of us, with this plugin.
    Very grateful indeed!

    I’ve got your a gallery shortcode in use in a widget and the gallery works as expected, however I’ve got a funny syntax error happening where the inline gallery css and script code accompanying the gallery – is outputting tags on every line. And consequently raising a red flag error in the browser for the page.

    Very odd indeed. I’m using a modified version of twentyseventeen and happens with all other plugins disabled.

    Unfortunately confidentiality means I cannot post the site url.

    Thanks in advance if you might know the answer.
    Best

Leave a Reply