Photoswipe: Is it possible to rotate the images in PhotoSwipe?

[axelson]

Is it possible to rotate the image that is displayed in PhotoSwipe. This is partially possible with the CSS transform: rotate(90deg) but I'm seeing that the rotated image is no longer centered. This especially happens with extremely portrait or extremely landscape images.

The use-case for this is that I am working on an image uploader and we're attempting to handle multiple different exif orientation values intelligently.

[infeng]

i want add rotate feature too!

[hxfdarling]

+1

[newhuan]

also need, thank you.

[puregardenia]

+1

[caojianfeng]

May you give us a manual api ?
For Example push a rotation param.

pswp.items.push({
    src: "path/to/image.jpg", 
    w:1200,
    h:500,
    rotation:3 
});

[tomdav999]

This is pretty easy to do as long as you know the orientation flag in advance. When building thumbnails I check for existence of EXIF orientation in the original. If it exists I rotate the thumbnail when building it and save "item.rotate" along with the corrected "item.w" and "item.h" (after rotation). The original is unaltered so I need to tell photoswipe to display it rotated. I've seen some unnecessarily complex code posted here to rotate in photoswipe. My code is only a few lines and also rotates at preload so hopefully the end user never sees it before rotation. Also note when rotating images via css it's very important to start with the corrected width and height (after rotation) and use the scale function to transform them. Otherwise the block element in photoswipe will have the wrong dimensions after rotation creating all sorts of issues. It also makes the code much simpler because you don't have to tinker with transform-origin...

_preloadImage = function(item) {
    item.loading = true;
    item.loaded = false;
    var img = item.img = framework.createEl('pswp__img', 'img');
    // after the line above add these lines
    if (item.rotate && _transformKey != 'left') {
        img.style[_transformKey] = item.img.style.transform = 'rotate(' + item.rotate + 'deg)' + (item.rotate == 180 ? '' : ' scale(' + (item.h / item.w) + ', ' + (item.w / item.h) + ')');
    }
.
.
.
    setContent: function(holder, index) {
.
.
.
        // image object is created every time, due to bugs of image loading & delay when switching images
        img = framework.createEl('pswp__img', 'img');
        // after the line above add these lines
        if (item.rotate && _transformKey != 'left') {
            img.style[_transformKey] = 'rotate(' + item.rotate + 'deg)' + (item.rotate == 180 ? '' : ' scale(' + (item.h / item.w) + ', ' + (item.w / item.h) + ')');
        }

[axelson]

Browser support also makes it quite difficult to know the orientation flag correctly: https://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

[tomdav999]

Not sure what you mean. Browser support is excellent. They all ignore the exif rotation flag (and likely always will for historical reasons) when displaying images via img tag. That's why we need to tell the browser to display it rotated. by styling it with css. I'm sure in a few years there will be a css auto-orient flag but until then we need to style it ourselves.

[gunner1095]

+1

[a84605101]

i want add rotate feature too!

[zhangzicao]

I write a javascript library to rotate image.I hope it can help you.
https://zhangzicao.github.io/createPhotoSwipe/

[ffaerian]

adding this to the css will add exif support in the browsers that support it - it is probably the way to go forward.

img {
image-orientation: from-image;
object-fit: contain;
}