PhotoSwipe | JavaScript image gallery for mobile and desktop modular | Widget library

 by   dimsemenov JavaScript Version: v5.3.7 License: MIT

kandi X-RAY | PhotoSwipe Summary

kandi X-RAY | PhotoSwipe Summary

PhotoSwipe is a JavaScript library typically used in User Interface, Widget applications. PhotoSwipe has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub, Maven.

PhotoSwipe 4.0+ is developed by Dmitry Semenov. But initially script was created in 2011 by Code Computerlove, a digital agency in Manchester, they passed on development in March 2014. You can view source and documentation of old PhotoSwipe (<4.0) in history of this repo.

            kandi-support Support

              PhotoSwipe has a medium active ecosystem.
              It has 22937 star(s) with 3333 fork(s). There are 542 watchers for this library.
              It had no major release in the last 12 months.
              There are 598 open issues and 1178 have been closed. On average issues are closed in 90 days. There are no pull requests.
              It has a neutral sentiment in the developer community.
              The latest version of PhotoSwipe is v5.3.7

            kandi-Quality Quality

              PhotoSwipe has 0 bugs and 0 code smells.

            kandi-Security Security

              PhotoSwipe has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              PhotoSwipe code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              PhotoSwipe is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              PhotoSwipe releases are available to install and integrate.
              Deployable package is available in Maven.
              Installation instructions are available. Examples and code snippets are not available.
              It has 2617 lines of code, 0 functions and 19 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed PhotoSwipe and discovered the below as its top functions. This is intended to give you an instant insight into PhotoSwipe implemented functionality, and help decide if they suit your requirements.
            • Outputs the documentation page for documentation page page
            • This creates new new screen .
            • Disbarbar sidebar mode .
            • Generate a caption template for a props property .
            • Generate a template for a props property .
            • Toggles the secondary top of the secondary sidebar .
            • Generate gallery page preview
            • Gets the thumb bounds for an element .
            • Renders the gallery item
            • Retrieves the bounding box of an element within an image area .
            Get all kandi verified functions for this library.

            PhotoSwipe Key Features

            No Key Features are available at this moment for PhotoSwipe.

            PhotoSwipe Examples and Code Snippets

            No Code Snippets are available at this moment for PhotoSwipe.

            Community Discussions


            nuxt: added client side js is not executed at first page load
            Asked 2021-Sep-08 at 09:37

            I added photoswipe (v5) to a component like this:



            Answered 2021-Sep-08 at 09:37

            I don't think that is a good way to inject scripts in your app. I usually load external packages this way:

            First I create PhotoSwipe.js under plugins folder:



            Photoswipe (mobile) - image selection (photoswipe open) stops working from time to time
            Asked 2021-Apr-29 at 00:27

            This is a shot in the dark, but I'm having an issue with Photoswipe (v4.1.3) using the multi-gallery implementation. The touch-to-open-gallery on mobile stops working after 2-3 touch-and-close's. What I have to do is to move the gallery away from view and bring it back into view to enable touch-to-open-gallery.

            In Chrome's DevTool, the mobile simulator works fine. It's just that when I use Photoswipe on an iPhone, I have this issue.

            Again, a shot in the dark... If you would like me to provide code snippets, I'd be happy to do so.



            Answered 2021-Apr-29 at 00:27

            Ok, if anyone sees this in the future, you'll understand that on mobile (true mobile), opening an image in a Photoswipe gallery can be a nightmare IF there is a hash in your base URL.

   - Nightmare
   - OK

            I solved this issue by simply setting history in options to false. That's it. Now you can be fancy and only target history manipulation for mobile, because having history: true for desktop IS a nice feature.



            PhotoSwipe, Rails, Coffee doesn't work at all
            Asked 2020-Oct-20 at 13:19

            Can't understand why PhotoSwipe doesn't show anything when I'm trying to add it into Rails project

            1. Used this gem:
            2. Step by step reproduced manual:
            3. Wrote 'click' handler But it shows nothing

            Code I wrote:



            Answered 2020-Oct-20 at 13:19

            gem is improperly written should add



            How do I get Photoswipe caption text?
            Asked 2020-Oct-15 at 02:46

            I'm hoping this isn't too silly of a question, but I've been stuck on this problem for hours now and could use some help/guidance with it.

            I'm using ACF Gallery in WP, and I'm now trying to turn this into a popup slider. So I decided to use the Photoswipe plugin to achieve this.

            I have the slider working fine, it's just that I can't figure out how to output the image caption with each image.



            Answered 2020-Oct-15 at 02:46

            caption should be an available key so you can update your code like below:



            How to Change FlexSlider options in WooCommerce child theme
            Asked 2020-Aug-20 at 13:47

            I have just changed this part of class-wc-frontend-scripts.php file which is available in "includes" folder of Woocommerce:



            Answered 2020-Aug-20 at 13:47

            Don't override any core files… Instead you can use woocommerce_single_product_carousel_options filter hook as follow:



            Change opacity then hide on swipe up (CSS / JS)
            Asked 2020-Jul-02 at 14:48

            I'm looking to change opacity and then completely hide div on swipe up on certain threshold, like in the video below or in Photoswipe:


            Unfortunately most off libraries only allow to register actual event start end, but not the amount of swiped pixels. How would I get the actual swiped distance and connect it to the swipe event?



            Answered 2020-Jun-29 at 23:10

            With a lot of event listeners and computed properties; I made a quick code pen using W3's draggable function, but added the opacity change myself:



            How to implement photoswipe into wordpress custom theme?
            Asked 2020-May-25 at 01:32

            I'm trying to implement photoswipe into my site but I'm not sure how to go about it for a wordpress site..

            I'm using acf repeater to display all images in a grid. I'd like to display the photoswipe gallery when an image is clicked.

            I've read the documentation for photoswipe, but I don't understand how to use it with a repeater field.

            Any help would be appreciated..



            Answered 2020-May-25 at 01:32

            In my opinion, sack off photoswipe and use lightgallery.

            Photoswipe is bloated and lightgallery does the same shiz with sweeter options.

            If your outputting your repeater field images grid in semantic fashion then this will do the trick...

            See jsfiddle example.



            Custom downloading image in PhotoSwipe.js
            Asked 2020-Apr-22 at 13:54

            I am using PhotoSwipe gallery for my project.

            On the line 175 there is a code url:items[0].hqImage, I want to use index of current image instead of 0, how can I do that? I've tried to use pswp.listen('afterChange', function() { }); event, like so:



            Answered 2020-Apr-22 at 13:54

            So, I've changed photoswipe-ui-default.js line



            Webpack renames functions
            Asked 2020-Jan-31 at 15:14

            Hello i have some problems with webpack. I have this config for webpack



            Answered 2020-Jan-31 at 15:14

            I resolved this problem :



            JavaScript gallery gets triggered by click on navigation menu
            Asked 2020-Jan-18 at 14:27

            I had combined FixedNav (fixed navigation menu for one page webpages) with PhotoSwipe (JavaScript gallery) on the same webpage.

            After doing that, when a link in the navigation menu is clicked, it scrolls down to the relevant section of the page. It does scroll as it should, but for some reason it also opens the PhotoSwipe gallery.

            Clicking on the menu links should just scroll to the relevant area, not trigger the PhotoSwipe gallery.

            I had used all the default settings from both FixedNav and PhotoSwipe and put them together on a single page to illustrate the issue:




            Answered 2020-Jan-18 at 14:27

            In your function, you have an on-click event for 'a' where a are not exclusively gallery links; the on-click function is affecting your menu links also. This is what is causing your issue.

            To resolve the issue, you need to be more specific in defining which links you want to be affected by the on-click event. In your case, all you have to do is insert the div id "#gallery" before a, as all the links in your gallery div are images, like so:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install PhotoSwipe

            To compile PhotoSwipe by yourself, make sure that you have Node.js, Grunt.js, Ruby and Jekyll installed, then:.
            Clone the repository git clone
            Go inside the PhotoSwipe folder that you fetched and install Node dependencies cd PhotoSwipe && npm install
            Run grunt to generate the JS and CSS files in the dist folder and the site in the _site/ folder grunt
            Run grunt watch to automatically rebuild files (JS, CSS, demo website and documentation) when you change files in src/ or in website/.
            Run grunt nosite to build just JS and CSS files (output is folder dist/).
            Run grunt pswpbuild to build just JS files. Param --pswp-exclude allows to exclude modules, for example grunt pswpbuild --pswp-exclude=history will exclude history module.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone dimsemenov/PhotoSwipe

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link