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

by dimsemenov JavaScript Version: v5.3.7 License: MIT

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

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.

Support

Quality

Security

License

Reuse

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

Quality

PhotoSwipe has 0 bugs and 0 code smells.

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.

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.

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

Trending Discussions on PhotoSwipe

nuxt: added client side js is not executed at first page load

Photoswipe (mobile) - image selection (photoswipe open) stops working from time to time

PhotoSwipe, Rails, Coffee doesn't work at all

How do I get Photoswipe caption text?

How to Change FlexSlider options in WooCommerce child theme

Change opacity then hide on swipe up (CSS / JS)

How to implement photoswipe into wordpress custom theme?

Custom downloading image in PhotoSwipe.js

Webpack renames functions

JavaScript gallery gets triggered by click on navigation menu

QUESTION

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:

...

ANSWER

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:

Source https://stackoverflow.com/questions/68558946

QUESTION

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.

...

ANSWER

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.

e.g.:
https://myurl.com/#about - Nightmare
https://myurl.com/ - 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.

Source https://stackoverflow.com/questions/67304855

QUESTION

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

Used this gem: https://github.com/skakri/photoswipe-rails
Step by step reproduced manual: https://photoswipe.com/documentation/getting-started.html#init-add-pswp-to-dom
Wrote 'click' handler But it shows nothing

Code I wrote:

...

ANSWER

Answered 2020-Oct-20 at 13:19

gem is improperly written should add

Source https://stackoverflow.com/questions/64430618

QUESTION

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.

...

ANSWER

Answered 2020-Oct-15 at 02:46

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

Source https://stackoverflow.com/questions/64363881

QUESTION

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:

...

ANSWER

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:

Source https://stackoverflow.com/questions/63503418

QUESTION

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:

https://www.loom.com/share/29741bdadc7846bfbc747d3870815340

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?

...

ANSWER

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:

Source https://stackoverflow.com/questions/62553364

QUESTION

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..

...

ANSWER

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.

Source https://stackoverflow.com/questions/61931085

QUESTION

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:

...

ANSWER

Answered 2020-Apr-22 at 13:54

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

Source https://stackoverflow.com/questions/61303310

QUESTION

Webpack renames functions

Asked 2020-Jan-31 at 15:14

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

...

ANSWER

Answered 2020-Jan-31 at 15:14

I resolved this problem :

Source https://stackoverflow.com/questions/59988316

QUESTION

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:

https://jsfiddle.net/5pw1rem9/

...

ANSWER

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:

Source https://stackoverflow.com/questions/59793970

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

Vulnerabilities

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 https://github.com/dimsemenov/PhotoSwipe.git
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.

Support

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: