PhotoSwipe Masonry
Dmitry kindly gave us permission to create a WordPress plugin in a similar fashion to our popular PHOTOSPACE gallery.
22.12.14
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!
Written by Dean Oakley
Dean founded Thrive Digital in 2006 and has worked in the design and development space ever since. He received 1st Class Honours in a Bachelor of IT and oversees all technical aspects of our projects.
Join the conversation
Leave a Reply
You must be logged in to post a comment.
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
Hi Jordi. Yes. I may add this as an option but for now add this to your theme css.
.photoswipe_gallery figcaption{
display: none;
}
Thank you
Perfect! I should have checked here for the solution first. Thanks! Great plugin.
is there a way to make the images larger in the masonry format ?
Did you adjust the size in the settings? You may need to rebuild your thumbs.
Hi! Good plugin. But in my iPhone when I just change orientation it is broking my site and I need to refresh (((
Hi Nikita. Is this in popup mode or viewing thumbnails?
In popup mode. I think this plugin not optimized for mobile view?
It is. Can you check here http://photoswipe.com/
Also what device and browser are you using?
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.
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.
Hi Brandon. Are you getting any JS errors? Can you post a link?
Hi,
No JS errors from what I’m seeing. Can I send you a link through an email? The site’s currently in maintenance at the moment.
Thanks!
sure dean@thriveweb.com.au
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.
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.
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
Hi Van. Not really sorry, that would have to be built into the theme.
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.
Hi, not directly with the plugin sorry as you can’t choose different thumbnail sizes.
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.pngThanks 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.
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
Hi Dean,
did you have any idea how I can implement that with the fade effect? Thanks for your feedback
Axel
I don’t think that is possible. It’s design to load quickly with no loading animation. Checkout http://photoswipe.com/
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.
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
Solved! just a problem of compatibility with the theme
Thank you!
Great :)
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!
Probably a conflict with your theme. Can you post a link to demo the problem?
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.
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
Hi Axel. Yes but you need to add some the css. In your theme css file add:
.pswp__bg{
background: rgba(0, 0, 0, 0.5) !important;
}
Thanks, this it was.
Axel
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
Hi Johan. Not sure about that one. I use Yoast also with no issues. Looks like others have the same issue however. https://wordpress.org/support/topic/javascript-error-not-working
I’ll look into it.
Ok, thanks man!
Must something with my custom theme then.. I tried yesterday to fix it by manually inserting the PhotoSwipe JS which i took from http://photoswipe.com/ instead (and not using the WPs gallery but just inserting the same code that it would generate). THEN I got it to work on this site: http://dbjb.se/klienter/thells/bilder-test/ but I have no idea why..
It’s super weird but thanks anyway for having a look! I’ll keep looking for what might be wrong, but I’m sure it’s something in my code/theme..
Thanks,
Johan
This is fixed now. Cheers.
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.
Why doesn’t the image sharing feature work? If I link to an image in the gallery (https://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?
Hi Celeb. Thanks for finding this. I’ll look into it!
Hi Dean,
do you already find a solution for this problem?
If I directly open an image with http://photoswipe.com/#&gid=1&pid=1 it is working fine. Maybe its a wordpress-based problem?
Cheers, Toby
This is fixed in the latest version ;)
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.
It should be possible to hook this up, it won’t be super easy though. Checkout http://stackoverflow.com/questions/10096300/combining-lazyload-and-jquery-masonry
Caleb, did you ever get it working? I’m currently facing the same issue and can’t seem to find a solution.
Unfortunately, no. I’m looking into other options until Photoswipe is fixed, it has some other issues with it now.
Okay, I actually got it working eventually but I didn’t use this particular plugin.
I used Photoswipe Light in combination with jQuery Masonry Image Gallery. The jQuery plugin also has a lazy load built into it so it all worked perfectly.
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
Hi Max. How big is your original image? Did you rebuild the thumbs?
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)?
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.
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! :)
I hope that you soon upgrade the plugin including open single images with photoswipe. Thanks and congratulations for your plugin.
This is a good idea. I’ll try to add that feature soon!
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”
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!
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.
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.
Hi Brian. This is this issue https://wordpress.org/support/topic/javascript-error-not-working?replies=15#post-7238884 Are you using a base theme?
If you can email me a copy of your theme I’d like to try to replicate this error!
Hi Dean,
It was working on my theme previously. I use the X theme by Themco, i would email you a copy but the key for it is tied to the domain it’s installed on. maybe it will let you install it, but never update it. i’ll send it your way to check.
Looking at the link you posted it Looks to be the Yoast plugin, i just installed that recently when i noticed the problem, so i’m guessing Yoast is conflicting with it.
Like others said, Yoast SEO has a higher priority, so i can’t deactivate it.
I’d love to donate if you can get this fixed.
This is fixed in the latest update :)
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?
Is it possible to start/call the lightbox with a rel=”lightbox”? My theme does not use the wordpress built in gallery option..
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
…
I want to use this functionality for a non WP site, how can I do this?
Check out http://photoswipe.com/ If I have time i’ll try to post the code for this :)
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?
I don’t think you can do rows with Masonry. See more here http://masonry.desandro.com/options.html
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.
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!
PS in Touchfolio content width is limited to 640px (style-touchfolio-default.less @content-max-width: 640px;), thats why 2 colums only..
PPS this behaviour is only in desktop mode, view width larger then 850px (js/main.js, line 13: maxW = 850)
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.
On http://photoswipe.com (Dima’s JavaScript library) is a ‘Minimal’ option, is it possible to set it up in your PlugIn?
Any chance of adding pagination to the gallery?
It’s not planned at this stage sorry.
Hmmm. Could you suggest a plugin or any line of code that I may include for now. Or way to compress the images (probably serve a low rez thumbnail) and load the larger image once clicked.
Here’s my URL if required. http://www.digitalkalakari.com/sub/portfolio/funnywitty-designs/
Hi Husain. It should work like that by default. Did you rebuild your thumbs?
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.
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!
Hi Nico. Did you try editing the size in the plugin options? Then you need to rebuild thumbnails.
Oh i hadn’t seen the photoswipe menu in the settings! It works now thanks so much!!
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?!
There have been a couple requests for this. I’ll be working on this soon :)
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.
I tried this in the Css but it’s not taken:
.photoswipe_gallery figure {
padding: 10px;
}
Hey, have you found a fix for this? I’m looking to have two photoswipe galleries with different thumbnail sizes on one page.
Hi. I’ll make an update soon that will make this possible with just css.
New version coming now. Add this to your css.
#photoswipe_gallery_23_1 figure {
width: 200px !important;
}
Replace with your post ID or similar and your width. I hope that helps!
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?
Hi Dominic
Can you post a link to the issue? It may be a theme conflict, a lot of theme have build in gallery systems.
Is there a way to allow for visitor to download the full resolution instead of 1800px wide?
Glad you got it working. For others there are image size settings in the options.
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!
Hi Nico. You might be able to with css. I haven’t tried however. Add something like this to your css.
.page-id-3200 .photoswipe_gallery figure{
width: 150px;
padding: 20px;
}
Adjust as you need. The class .page-id-3200 comes from your body. Each page will have a unique ID.
I’m gonna try thanks!
Hi, FWIW I just posted a note below for how to alter the plugin to deal with this problem.
Great, thanks
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 ?
Hi Jon. Are you only seeing this issue on your site? Can you post a link?
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?
Hi Curt. I’ve quickly hacked out photoswipe for you. Please try this.
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.
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 !
Is the plugin running? I’ll need it on to check it out. Thanks!
Sorry I was doing some tests.
I activated it now.
Thank you !
Thanks. There is an error in IE9 or lower. I will fix this in the next update.
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!
HI Micha. Can you post a link so I can see the issue? You could fix this with some CSS probably.
Hey Dean,
Thanks for getting back to me. I would prefer to not post the link publicly. Can I send it to you via Mail?
Hey Dean, I sent a message to the “contact” mail-address, but I’m not sure you got it?
Hi Dean! I asked about photoswipe when there is only one photo. Has there been any progress? thanks
Another question. Can one have only the photoswipe without mansonery gallery? I just want the lightbox
I’ve been looking into this but I’m thinking it would be best as a seperate plugin. I’ll let you know what happens!
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.
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
cheers, worked like a charm.
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 :-)…
I might try to add a css box to a future version. Otherwise it’s best to use a child theme for customisations.
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?
Sure:
.pswp__caption{
display:none;
}
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!
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
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?
Did you try setting it to 1? You may need to hire a developer to configure the layout to work the way you want.
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
Hi Brian.
“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.”
See more here: https://codex.wordpress.org/The_WordPress_Gallery
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
Hi Nat. Can you post a link to the page please.
I’m working locally so here is a screenshot
https://www.dropbox.com/s/orb9m31lfjcma88/gallery.jpg?dl=0
So only show 6 of thumbnail but when view the callery in full screen mode you can see the all the images.
I hope this makes sense.
For example — like putting a css class (display:none) on the images from no. 6 onwards (not outlined in red in the screen shot)
Thanks. There is no paging built into the plugin sorry. I think that is what you are after.
Dan,
No, not paging.
How best can I apply a css class to some of the thumbnails?
Nat
You would need to edit the plugin code sorry.
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?
Hi Greg. It looks like you can. http://masonry.desandro.com/layout.html – You can edit the plugin and I will try to add it in future versions.
Wonderful, thank you!
Thank You, Great work, it ist realy easy to use
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
Hi Marcel. Yes it should be. Do you see this issue on the original plugin? http://photoswipe.com/
Yes I saw it also there. But now since my update to iOS 9.3 it is working :-)
Seems to be a bug in the browser.
Thanks for your help
Marcel
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.
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
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?
Hi Chris. Can you explain what you are after further?
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!
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.
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!
Hi Chris. Sorry I don’t think this would be easy to do. Check out http://photoswipe.com/ for more info on the gallery code.
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.
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!
Thanks, will take a look.
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!
Not easily sorry. It’s setup like a gallery only.
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 ?
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.
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
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.
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:
https://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.
Replied here https://github.com/thriveweb/photoswipe-masonry/issues/
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!!
OK noted. I will try to add this soon.
That would be awesome! Thank you for your consideration!
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,
Hi Sasha. It should go full screen if your images are large enough. Your images are quite small http://immobiliarevalsecchi.com/wp-content/uploads/2016/06/5-3.jpg
Hello Dean,
Thanks for the prompt reply.
Ok, I understood what you are saying and I made the excercise to use the full width, like this:
for a 1400px wide screen and 5 columns, the width of the thumbnail must be 1400/5=280px.
And it works fine, as it appears here at 1400 px wide window:
http://immobiliarevalsecchi.com/
As i change size, is there a way to keep the span of the image to full width? At the moment it is calculated based on the thumb width I suppose, and therefore for smaller screen sizes i have a margin on the left and right of the gallery.
In other words: is there a way to use % and make the layout fluid?
Thanks again!
Oh you are talking about the grid? This uses http://masonry.desandro.com/ – I will look at adding other grid systems soon :)
It’s not a fluid type system sorry.
Hello Dean,
Ok, thank you very much anyways
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.
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.
Hi Rostislav. Sorry, this would need to be built into your theme most probably.
Hi Dean,
is it possible to link the thumbnails to url’s instead of opening a picture?
Thank you,
Peter
Hi Peter. Not at the moment but I’ll look at adding it in future versions.
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.
http://johntownes.com/test/
This is a test page that should show you.
http://johntownes.com/test/
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.
No worries :)
Hello. Great plugin !! A small Wunch I have. How do I get the arrows in the picture? Looking forward over a response. regards Andreas
Hi Andreas. I’m not sure what you are after. Can you post a link or screen shot?
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.
Hi. I think it’s the best simple solution for retina images. See this comment thread https://thriveweb.com.au/the-lab/photoswipe/#comment-114003
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-landwegThanks!
Link has updated to: http://www.weltgeschichten-fotografie.de/reisen/von-bangkok-nach-bayern-auf-dem-landweg/
Hi Tommy. I’m going to try to add this option soon :)
Hey Dean, thanks for your reply. So you are saying, it’s not possible yet to hide captions in the gallery but show them in the lightbox? The thing is that I can’t show captions in the lightbox even if I enable them in the gallery. This should work since it is the case in the example gallery above, isn’t it? Thanks again, Tommy
Hi Tommy. It should be possible actually. Your theme has .pswp__caption { display none; } line 4131. Remove that!
Hi Dean, how right you are. I don’t know when and why I put this line in the style.css of my parent theme. I searched all my child theme style.css and obviously couldn’t find anything…Thanks for your help!
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.
[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?
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 ?
Hi. The zoom only works when your image is large enough :)
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
just so my second is clear, this example uses the prettyPhoto library, you can click on any photo in the article to browse through the photos instead of reading the article:
http://www.inkston.com/stories/gong-bi-hua-lotus/
(only the prettyPhoto library itself is rather deficient, especially on mobile, hence plan to move off prettyPhoto and others onto the photoswipe)
Hi Jonathan. Thanks for your comment. We will consider these on future updates.
Actually I can see how to do that, I’ll comment on https://github.com/thriveweb/photoswipe-masonry/issues/
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!
Hi Andy
There is probably a css conflict with your theme. Please post a link and I will have a look.
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.
Thank you Dean, fancybox was indeed activated for images. I could solve the problem with one mouse click.
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
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.
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
Hi David. This would need to be built into the plugin. I’ve created a request here https://github.com/thriveweb/photoswipe-masonry/issues/ – I will keep this in mind in future updates.
Thank you.
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.
Sorry for the very slow reply. Can you send me an updated link?
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;
}
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.
http://www.michael-gelfert.com/V5/beauty/
Ah yes that is typical of masonry layouts. I do want to add other layout options in the future.
Dean,
Is there any ETA on the additional layouts, as well on disabling downloading & sharing?
btw., the landscapes are too small after disabling masonry as well, so maybe it IS a bug?
Also, anything new on just using the lightbox without the masonry layout & thumbnails?
Sorry no progress just yet. Please keep an eye on the development here https://github.com/thriveweb/photoswipe-masonry we are adding new features as we can. Feel free to add more feature requests. https://github.com/thriveweb/photoswipe-masonry/issues I’ve addded https://github.com/thriveweb/photoswipe-masonry/issues/
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
It depend on your theme sorry. If they can’t help you may need to hire a developer.
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!
UPDATE: I’ve just resolved this issue with images getting distorted when double-tapping or pinch-zooming. For anyone having the same problem, please refer to https://wordpress.org/support/topic/lightboxed-images-get-distorted-when-double-tapping-or-pinch-zooming/
Thank you!
Thanks for the update :)
Hi Dean,
I had some problems with this plug-in, and after reading the comments here I have solved.
Thanks!
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.
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?
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
Hi there, will i be able to add hyperlinks in the caption?
Thank you for the plugin!
Hi Alison. It’s not possible at the moment sorry but it’s on the todo list https://github.com/thriveweb/photoswipe-masonry/issues/
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
Replied here https://wordpress.org/support/topic/problems-with-responsive/
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
The comment form stripped the html, it should read:
‘p’ tags
This seems to be a WordPress issue with the new rich format text widgets. This little script to place in your functions file, removes the auto formatting and fixed the issue for me!
https://wordpress.org/support/topic/how-to-disable-visual-editor-in-the-text-widget/#post-9219493
Thanks Dean,
Best
Hi Tim. Could you post a screen shot please? I haven’t heard of this before.
Hi Dean, I couldn’t actually reproduce the error. Which is a good sign. WordPress was auto-formatting the text and code I had in the new rich text widget. And was inserting tags into your inline gallery js you output in the page when the swipe gallery is detected.
Weird!
Thanks again :)
Hi Dean, I’m testing the plugin on MAMP, but with debugging turned on, it says as follows.
Warning: A non-numeric value encountered in /Applications/MAMP/htdocs/wp-content/plugins/photoswipe-masonry/photoswipe-masonry.php on line 178
Is there a way to fix this, or it won’t cause any problem by leaving this as it is?
Thank you for your help!
Thanks Joey, I’ll fix this soon!
I see it fixed now, thank you!
Hi Dean.
Is there a way to make it appear only the first photo at mobile? That way one must click on the photo to see all the gallery photos and the page won’t get too vertical.
Cheers,
nice work.
Hi Eduardo,
Yes, you should be able to hide the gallery with CSS and media queries. Something like:
@media screen and (max-width: 600px) {
.thumbnails{ display:none; }
}
Hello, thank you for your plugin, I’m using it on my website since 1 year. I have a problem since the beginning : while all the images are loading the gallery is grey (maybe 50%) and it’s not possible to scroll. When all the images are loaded they take their place and we can use it normally. Is it possible to fix it or not? The user doesn’t know it’s because it’s loading, I can think it’s a bug and leave.
Thank you.
Hi Pierre,
I’m getting this on your site in general. I think your theme has some weird scroll jacking! Sorry I can’t help much more.
Hi Dean,
This is a request/suggestion. Currently, I load this plugin to certain pages/posts only by writing a bit of code in functions.php and updating the file whenever I publish a page/post that requires this plugin. I wonder whether this feature can be added to the plugin itself so that I can update the include (or exclude) list within WP admin page.
Thank you for your consideration!
Hi Dean
I got the masonry effect in the desktop version of the site.
But when I switch to mobile I got one column with 1 image full width: is it possible to get 2 or 3 columns sided images on mobile theme (eg http://www.cinziabruschini.com )
thanks
Hi Roberto. Yes if you make the thumbnail image size small enough this will happen.
Hi there,
I really like the plugin but it conflicts with my media gallery.
I cannot add new media (HTTP error) and I cannot edit existing pictures. When I try to rotate pictures they show up in the gallery up the wrong way.
I am very new to website building and know nothing about computers so please make it simple :)
Ella
Hi Ella,
Do you have another gallery plugin? Can you post a link to demo the issue?
Hi, great plugin.
I’d like to translate the menu “share on facebook, tweet etc” But noway…. i can’t find where modify your code… please give me a clue :)
Hi Andrea. See in the js file photoswipe-masonry/photoswipe-dist/photoswipe-ui-default.js
tx Dean :)
Hi Guys, great job…
i’d like to record with google analytics all the images of the gallery…
and i’d like to define the og:image for sharing on facebook…
any idea?
Andrea
This is a great plugin. Is there any plan to add pagination in the future for large galleries?
Check out v2 :) https://github.com/thriveweb/photoswipe-masonry-v2
Hi,
Great plugin! I notice on the demo that the lightbox modal does not display the share arrow when an image is clicked but the share arrow does display if, while the lightbox modal is invoked, the page is refreshed. The lightbox modal is automatically invoked with the share arrow displayed.
Is this intended? Is it possible to have the share arrow displayed when an image is clicked?
Hey, I posted a question yesterday and the post disappeared, what happened there?
Cheers
The content of a website is the decisive factor for a quality website. Besides, there are also many other factors that can help you to improve the quality of a website like the interface, the links to your site.
A site with a beautiful and eye-catching interface will attract many users. The interface of the website also asserts the professionalism, the brand of the business and the individual.
Hi there,
I am seeing a very strange effect – clicking on an image shrinks the image to a single pixel instead of enlarging it to fit the viewport! A couple of the images behave as expected, but the rest all shrink!
Any idea what has gone wrong? This page did work just fine when it was built.
We have the latest version (1.2.7) installed and it is on WordPress 4.9.8 (ie. also latest version).
No error show up in the browser console and the network monitor does not show any errors (eg. 404 or 403).
Thanks.
Hi there!
Can I turn off the call to the photoswipe on the galleries (to show the standard WordPress gallery)?
To make it look like that: single images in post opens with Photoswipe, but images in galleries opens at new tab (using WordPress gallery)?
Thanks!
Hey there, Great plug in… but how can i change the width of the gallery… by default desktop width is 900px… but my page is wider and id like the gallery to stretch the full width??
look this page http://uplay-account.ru/7526-2/
image get full size, but i indicate in the settings 2 columns and large size !!!! wtf?
Hi there. Beautiful coding and WP adaptation.
I just wonder, is there a way to disable right click in the for the lightbox module? I can hide the share button but the pictures are still available to right click and save.
Sorry for the late reply. I wouldn’t bother doing this as it’s very easy to bypass. But there are other plugins that offer this feature https://wordpress.org/plugins/disable-right-click-for-wp/ or use a couple of lines of jQuery https://stackoverflow.com/a/5618300/397555
Hi! I have been using your plugin for a long time, it is great.
But now I have a problem with loading full resolution images on page load.
Details at https://wordpress.org/support/topic/full-resolution-images-download-on-page-load/
I need your help.
Thanks!