JavaScript image gallery for mobile and desktop, modular, framework independent

Now that is v4.0, have you got any plan on introducing it? I remember that old versions was not doing it. I was hoping that now that you're managing it maybe it could be introduced. See http://brutaldesign.github.io/swipebox/ for an example.

Thanks in advance :)

P.S.: if you need some inputs or user-cases feel free to ask them, since I've already patched swipebox to support a better embedding of video URLs :)

Using the JS from this CodePen http://codepen.io/dimsemenov/pen/ZYbPJM and am trying to add responsive images as functionality to it but I do not know how to do that.

Can I simply replace:

            // create slide object
            item = {
                src: linkEl.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10)
            };

with

var items = [

    // Slide 1
    {
        mediumImage: {
            src: 'path/to/medium-image-1.jpg',
            w:800,
            h:600
        },
        originalImage: {
            src: 'path/to/large-image-1.jpg',
            w: 1400,
            h: 1050
        }
    },

    // Slide 2
    // {
    //     mediumImage: {
    //         src: 'path/to/medium-image-2.jpg',
    //         ...
    //     
    // ...

];

and then add

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;

// beforeResize event fires each time size of gallery viewport updates
gallery.listen('beforeResize', function() {
    // gallery.viewportSize.x - width of PhotoSwipe viewport
    // gallery.viewportSize.y - height of PhotoSwipe viewport
    // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
    //                          1 (regular display), 2 (@2x, retina) ...


    // calculate real pixels when size changes
    realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

    // Code below is needed if you want image to switch dynamically on window.resize

    // Find out if current images need to be changed
    if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;
    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

    // Invalidate items only when source is changed and when it's not the first update
    if(imageSrcWillChange && !firstResize) {
        // invalidateCurrItems sets a flag on slides that are in DOM,
        // which will force update of content (image) on window.resize.
        gallery.invalidateCurrItems();
    }

    if(firstResize) {
        firstResize = false;
    }

    imageSrcWillChange = false;

});


// gettingData event fires each time PhotoSwipe retrieves image source & size
gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here, 
    // as long as item.src, item.w and item.h have valid values.
    // 
    // Just avoid http requests in this listener, as it fires quite often

});


// Note that init() method is called after gettingData event is bound
gallery.init();

in between

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

        // insert responsive image code here 
        gallery.init();

?

I have looked at the index.html from the website folder of this repo and loaded it on the local server with XAMPP but it does not work at all, meaning PhotoSwipe is not initialized. I thought that the website folder is a fully working example, as repsonsive image code is found in the JS section of that index.html file.

Does any one have a working example of how to get responsive images working with PhotoSwipe on a server that does have medium and large images? Or is there a live website perhaps that uses responsive images with PhotoSwipe?

I am really new to JS and trying to put the pieces together. My question is basically how can I get the JS to read the var items = .. for responsive images when using the JS from this CodePen http://codepen.io/dimsemenov/pen/ZYbPJM ?

Since the slide object is parsed with JS from the DOM I have no clue where to add the responsive images object in the JS.

Any help or live example would be awesome.

Hi,

Pretty sweet plugin. Trying to use the exclusive mode with no thumbnails. I'm also using jQuery mobile. It seems no matter what I do, photoswipe always shows a loading indicator for the 3rd image, and it never loads. Your exclusive mode doesn't have an example using jQuery mobile, but I get the idea. I just put the var options in the jQuery document ready. However, even if I use the non-jQuery call, the same exact thing happens. Any ideas?

Thanks, -Jon

Hey dimsemenov,

I saw there was basic work being done on a modal/non-modal option. I'm interested in having a photoswipe gallery embedded in as part of the page rather than taking up the entire space so I went ahead and made the modal option do this. Let me know if this works, and if there's anything else to add!

To use in a non-modal situation, place the template inside a positioned element and the photoswipe gallery will take up the space of the parent when opened.

Currently known bug: two-finger zoom offsets the image as if it were based off the entire screen rather than just the parent. I couldn't find where those calculations happened exactly, so the bug exists in this current state. If you could direct me to how the calculation is done I'll fix the bug. Thanks!

Thank you for PhotoSwipe. I am using jquery-1.6.4.min.js,code.photoswipe.jquery-3.0.5.min.js,jquery.mobile-1.0rc2.min.js , there is no error except zooming in android. Pinch and zoom works in ipad,iphone why its not working in android. solutions please.........

When you have a large images in your gallery, for example: 200 images, each image about 70K, so the total load is: 200x70=14,000k = 14 MB

Yeah .... but look at this link: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html,

And we can see some first images in the gallery, in this case I can see first 140 images (140x70 = 9800KB), and other images (141, 142, .... 200) I can't see it ? is this a bug ?

Thanks for a cool framework ......

I was trying to add a basic object-position support.

This approach ~~requires to use additional data attribute data-cropped-position~~:

<a ...
  data-cropped="true">
  <img ../>
</a>

img {
  object-fit: cover;
  object-position: center top;
}

Demo link: https://breezefront.com/screenshots

Having a heckuva time trying to share images from PhotoSwipe in social media. Neither Facebook nor Pinterest shares are working, they both give image url errors. I've tried various things, culled from issue posts here and elsewhere, but can't get anything to work. I know Facebook has changed things. Does anyone have a setup that works?

I'm using the app_id in the Facebook share line, which I believe you need now. The line I'm using now in photoswipe-ui-default.js is: {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/dialog/share?app_id=XXXXXX&href={{url}}&picture={{raw_image_url}}'}, ... with my proper add_id in there, of course. I've also tried image_url instead of raw_image_url, but same result. The Facebook error says: "picture should represent a valid URL". However, the same raw_image_url used in the {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true} line works fine, and returns a valid url, so I don't know why FB can't extract a good url.

When attempting to share via Pinterest, I also get an image url error message, saying: "Parameter 'image_url' (value https:../cartoons/01.jpg) is not a valid URL format", using that abbreviated url in the message. I'm not sure if that's the actual url Pinterest is getting, thus causing the error, or if their error message just shortens it. Again, I can't see why the url would be bad, since it works with the Download image link.

Any help would be much appreciated. Thank you.

Safari on iPad has the feature that if you tap and hold an image you can save it. This seems to work only if you do that to an img element (though I haven't thoroughly checked that). In the photoswipe image gallery this doesn't work as you are hovering over something else apparently. Would it be possible to modify photoswipe accordingly? Would be really cool if you could save images that way.

Thank you for PhotoSwipe.

Pinch and zoom on an image loaded in a gallery, using the jquery example and my own web app, breaks when using jquery-1.7.1.min.js. With no other changes jquery-1.6.4.min.js works beautifully. By breaks I mean the screen goes black, everything disappears and requires a reload of the page to return.

I've already solved the problem, adding here to document the problem, in case someone runs into this as I did

Uncaught TypeError: Cannot read property 'x' of undefined error threw me off for a good 2 hours.

I read almost every line of the Call Stack in chrome debugger, ( it lead _equalizePoints() ), going back and forth until I discovered, that I had specified the images object like this:

image.push({ src: "http://----.jpg", width: 100, height 100 });

As it turns out, the expected keys for width & height are w and h, and not width or height.

I assume that because PhotoSwipe is still in beta, there is no throwing of error helpful error messages, when data is missing. A "No width or height of image found" would have been very helpful, instead I tried to inspect the bounds of my images, try to figure out when and what is called, etc.

I've been trying to implement photoswipe on a site that already uses picture elements. So I had to use the dataSource option and some custom code to build a data source out of the existing list of picture elements. I then implemented the webp code from the documentation so that the lightbox utilized responsive image sets.

I'm having a problem though. When opening the lightbox, the second image viewed (via prev or next) is missing its style="width:x; height:y;" settings. image gets displayed unconstrained and breaks the bounds of the lightbox.

Click an image here https://devsite.santafedrygoods.com/product/alonpi-cashmere-degrade-puka-poncho-with-leather-trim-in-black-brown/

once you cycle thru all the images however, the image shows up fine. Can't figure out why this would be happening.

here is my code to build the options and init photoswipe

``

Source code:

import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.js';

const lightbox = new PhotoSwipeLightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('https://unpkg.com/photoswipe'),
});

lightbox.init();
lightbox.destroy();
lightbox.init();
lightbox.destroy();
lightbox.init();
lightbox.destroy();
lightbox.init();

(Object.keys(this._listeners)).forEach((name) => {

this._listeners is null in this case.

Playground what reproduces the bug: https://codepen.io/tranquility/pen/ExpxEGB

Try to open any image and check the developer console

p.s.: Who faced with this problem on some dynamic data - use dataSource attribute instead of gallery and children combination. Use pswpLightbox.loadAndOpen(index) for opening the image.

Getting below error when you do ionic serve

Repo: https://github.com/indraraj26/ionic-photoswipe-test

[ng] Error: node_modules/photoswipe/dist/types/util/util.d.ts:12:123 - error TS2344: Type 'undefined' does not satisfy the constraint 'Node'.
[ng] 
[ng] 12 export function createElement<T extends Falsy | keyof HTMLElementTagNameMap = "div", NodeToAppendElementTo extends Node = undefined>(className?: string | undefined, tagName?: T, appendToEl?: NodeToAppendElementTo): T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : HTMLDivElement;
[ng]                                                           

ionic info

ionic info

Ionic:

   Ionic CLI                     : 6.20.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.4.0
   @angular-devkit/build-angular : 15.0.3
   @angular-devkit/schematics    : 15.0.3
   @angular/cli                  : 15.0.3
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.6.1
   @capacitor/android : not installed
   @capacitor/core    : 4.6.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

   NodeJS : v18.12.1 (/usr/local/bin/node)
   npm    : 8.19.2
   OS     : macOS Monterey

https://photoswipe.com/options/#clicktoclosenonzoomable

• First I thought my web browser does not follow the clickToCloseNonZoomable option.

• Only to then realize that the demo shows clickToCloseNonZoomable with FALSE so it behaves correctly.

• Then I reflected on myself and realized why I was confused and first thought this was a bug:

  • Showing the demo with clickToCloseNonZoomable: false makes little sense.
  • Everywhere else on that demo page you use rather large images.
  • So you have experienced that option nowhere else, and in the example which is about that option you show it as false.

Recommendation: Showcase this option with the appropriately small imagery as you have it already there with the option clickToCloseNonZoomable once true and once false.

Status Quo

• Alignment for the zoom levels fit and fill is currently hardcoded to mid-center.
• This is a good fit for most content.

Design / Presentation Challenge

• But for some content having full control over alignment matters!
• Most prominent use case: Screenshots or Screen Designs. Sample use case below.
• But also other use cases, e.g. full body model photography, where you want e.g. the initial zoom level to be the total view (= fit) where you see the whole model, and then the zoomed-in-view to be fill-width with an alignment of top-center so that you can cycle through the zoomed in head/torso area of the photo models.

Proposal

Alignment options

Currently hard-coded to mid-center. I propose to offer all 9 alignment anchor points:

• top-left, top-center, top-right,
• mid-left, mid-center, mid-right,
• bottom-left, bottom-center, bottom-right.

Zoom Levels

• https://photoswipe.com/adjusting-zoom-level/#supported-values : fit and fill , which are axis agnostic.
• I propose to add the zoom values fill-width and fill-height with which you can work axis-specific.

Use Case: Presenting screenshot series from a responsive + international app

Given:

• Different width per each device class in the screenshot series
• Possibly different heights per each device class, in case of full page length screenshots (longer than viewport) with different content lengths.
• App which can be LTR or RTL, so the content anchor point may be either top-left or top-right.

Full control with the new parameters:

• If I had the 9 different alignment options and using zoom level 1(=100% = 1 image pixel fills 1 CSS pixel) I could achieve that the screenshots, even if differently sized align perfectly.
  • The viewer can much more easily visually track UI/content elements on the different device classes, when jumping between their screenshots.
• And for the simpler use case of having same width screenshots but with different height, then I would choose fill-width and alignment top-center.
  • This would guarantee that the app-header is always top-aligned, regardless how long the different screenshots in the series may be.

If the max-height CSS property is defined for an img element using a percentage value ( e.g max-height: 100%; ), an empty lightbox appears when this image is clicked. max-width , height (without max-), and using pixels, not percentage (max-height: 100px) properties do not cause this error.