yaquawa / jquery.photoswipe Goto Github PK

This is just a note, you can close it right away :-)

I use photoswipe on top of owl.carousel.

Now, the carousel creates a lot of "clones" for each image. Unfortunately, Photoswipe seems to take in account those "clones" too, producing repeating images and wrong counters in the gallery (e.g. 3/5 instad of 1/1).

The solution was that photoswipe has to be launched BEFORE the gallery, although the user interaction is the other way round:

    $('.photoswipe').photoSwipe();
    $('.owl-carousel').owlCarousel();

Wondering why these 2 photoswipe paths (for OS X) are in your js file?

{"/Applications/MAMP/htdocs/jquery.photoswipe/node_modules/photoswipe/dist/photoswipe-ui-default.js":1,"/Applications/MAMP/htdocs/jquery.photoswipe/node_modules/photoswipe/dist/photoswipe.js":2}

I've tried a few ways to add video but none of them are working. Any help? Images currently working great

if you drag a photo with the mouse and the cursor leaves the browser, an error appears - TypeError: t.getAttribute is not a function

Hi and thank you so much for this! I would have found it too difficult to start with photoswipe without your plugin.

I was wondering: jquery.photoswipe seems to pick the caption from the alt text.
https://github.com/yaquawa/jquery.photoswipe/blob/master/dist/jquery.photoswipe-global.js#L4452

I want it to pick it from somewhere else, like a data-attribute. Can I override that somehow or would I have to fork the plugin for that and edit it directly in the code?

How would I go about accessing the properties of PhotoSwipe after I have initialised it with your plugin? For example how would I get "pswp.getCurrentIndex();"

I tried $.fn.photoSwipe.PhotoSwipe.getCurrentIndex(); and various other things, but got nothing back.

Many thanks, Jake.

Hello, can you please advise how you can destroy an instance of photoswipe? In the original document, you can get the instance by using "var pswp = new PhotoSwipe( /* ... */ );", but how can you do that in your jQuery version? Thanks.

Hello,

I'm using the markup where I have data-original-src but without data-original-src-width or data-original-src-height specified, like in this example:
`

The problem is that when I click on the thumbnail PhotoSwipe opens the data-original-src image with the same width and height as the thumbnail. So basically it loads the big image but with the dimensions of the thumbnail, without any further possibility to zoom it in or out.
Is it somehow possible to get the data-original-src image opened with its original dimensions?

Here is how it works for me now:
http://magicdarvin.github.io/issue.html
The thumbnails width is about 300, the data-original-src images width is about 2000.

There is also a line in the Readme, which made me think that actually this should have worked just out of the box:

If the `data-original-src-width` or `data-original-src-width` not exists, the natural width and height of this image will be used. 

Though, maybe it is just my misinterpretation of what is natural width and height of this image.

Thank you.

My page has this structure

• a block of images (actually an owl.carousel)
• some text
• another block of images
• some text
• maybe a single image
• etc

I've added the class "photoswipe" to the wrapper each image block and triggered it with $('.photoswipe').photoSwipe();

Now this seems to make multiple instances of photoswipe galleries, one for each block.
What I want is one photoswipe gallery over all concerned images of the page.

In older lightboxes, this would be done with a rel="" attribute, assigning a group to each image.
How would this be done with photoswipe?

Firstly, thank you very much for producing this. The documentation for Photoswipe is very daunting.

Secondly, through your interface is it possible to use the responsive images option in photoswipe? (http://photoswipe.com/documentation/responsive-images.html)

Jake

How do I bind a button to open the photoswipe gallery rather than clicking on the image itself?

Thank you for the awesome work! I made one tiny modification to your code to display the image title instead of the alt under image caption when the other options are not present, and this seems to work fine. However, I am unsure as to how to go about inserting a link under the image caption so that it serves as a permalink for the page where the individual photo resides.

Below is the structure of an image in my gallery. How could I insert the <a href="photo.page/'> in the image caption using the title text as the anchor text? Any help would be greatly appreciated.

<figure class="photo " role="img">
<div class="post__content">
<a href="photo.page/'>
<img class="img" width="800" height="500" src="/assets/photo/photo.jpg" alt="description" title="title of photo">
</a>
</div>
</figure>

Hi again!

In a project where I'm already using jquery.photoswipe for "regular" galleries (where you can click each thumbnail to open an image), I'd like to stick to your plugin for the following case also:

There's only a trigger button ("open gallery"). All the gallery's content is hidden. On click, the gallery launches.

Should I use jquery.photoswipe for that at all? If so, (how) would that work?

Or should I rather try to use the vanilla photoswipe directly? Can those two (vanilla pswp and your plugin) run alongside on the same page?

Hello,

is there any way to use the srcset attribute for responsive images?

The plugin will be added in bower?

When I compile the jquery.photoswipe-global.js file with foundation's gulp task, Babel complains about it being too large.

[BABEL] Note: The code generator has deoptimised the styling of "/path/to/node_modules/jquery.photoswipe/dist/jquery.photoswipe-global.js" as it exceeds the max of "100KB".

This doesn't seem to be an issue, just a note. But (among others, to prevent that message) could I also include the original js from photoswipe and just add your code on top – would that be equivalent?

From the docs:

If the file name of src matches the pattern /(\d+)[*×x](\d+)/ (e.g. images/IMG_3012-1200x800.jpg), the plugin will takes width and height from the file name.
(That way you don't need to specify the data-original-src-width and data-original-src-width).

Unfortunately, when using Craft CMS (and probably other cases), Craft adds the dimensions of the transform rules (which differ from the actual image dimensions) to the file name. For example, a transform that would resize the image to fit within a width of 1600px and a height of 900px, gets "1600x900" added to the filename. The actual image could be anything inside those dimensions.

So, even though I'm adding the images dimensions with data-original-src-width and data-original-src-height, it gets overridden by the regex code you have in the plugin and uses the wrong dimensions. It seems like the regex should only come in to play when no other option is available, or if it's enabled through the options. It's very possible I'm just doing something wrong, so if there is a workaround, please let me know. The only way I've been able to get it to work is by commenting out the regex part of the plugin.

Other than that, this sucker works like a charm. 👍