Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
amwpsaa
Experienced
Topic Author
Posts: 53
Joined: 29 Jul 2021, 08:46

The new version cannot find PhotoSwipe.js

17 Nov 2021, 01:59

In the old version, I can modify PhotoSwipe.js myself to meet my needs.

1. Double-click the picture on the phone to zoom in, it will be very large, avoid 100% zoom. I can change it like this:
Code
    isClickableElement: function(el) {
        return el.tagName === 'A';
    },
    getDoubleTapZoom: function(isMouseClick, item) {
    if(isMouseClick) {
            return 1;
    } else {
    if(item.initialZoomLevel <= 0.2) {
            return 0.4;
    }else if(item.initialZoomLevel <= 0.3) {
            return 0.5;
    }else{
            return item.initialZoomLevel < 0.5 ? 0.8 : 1.33;
    }
        }
    },
or 
Code
isClickableElement: function(e) {
 return "A" === e.tagName
},
getDoubleTapZoom: function(e, t) {
 return e ? 1 : t.initialZoomLevel < .2 ? .4 : t.initialZoomLevel < .3 ? .5 : t.initialZoomLevel < .5 ? .8 : 1.33
},
2.  I want to modify it to click on the picture to zoom, instead of the next page. Is there a setting? I want to change PhotoSwipe.js, but I can't find it.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 02:32

In latest Files app, the popup was much improved and although it's built upon the core of photoswipe, we don't use photoswipe options any longer. Besides, I am struggling to see the benefit of your implementation. Do you have an example link where this is used? I was testing this feature before, and couldn't find any good reasons to zoom beyond 1 (original) or offer different steps. Seems unproductive.
 
User avatar
amwpsaa
Experienced
Topic Author
Posts: 53
Joined: 29 Jul 2021, 08:46

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 05:13

mjau-mjau wrote: In latest Files app, the popup was much improved and although it's built upon the core of photoswipe, we don't use photoswipe options any longer. Besides, I am struggling to see the benefit of your implementation. Do you have an example link where this is used? I was testing this feature before, and couldn't find any good reasons to zoom beyond 1 (original) or offer different steps. Seems unproductive.
PhotoSwipe.js Documentation
Code
getDoubleTapZoom: function(isMouseClick, item) {

    // isMouseClick          - true if mouse, false if double-tap
    // item                  - slide object that is zoomed, usually current
    // item.initialZoomLevel - initial scale ratio of image
    //                         e.g. if viewport is 700px and image is 1400px,
    //                              initialZoomLevel will be 0.5

    if(isMouseClick) {

        // is mouse click on image or zoom icon

        // zoom to original
        return 1;

        // e.g. for 1400px image:
        // 0.5 - zooms to 700px
        // 2   - zooms to 2800px

    } else {

        // is double-tap

        // zoom to original if initial zoom is less than 0.7x,
        // otherwise to 1.5x, to make sure that double-tap gesture always zooms image
        return item.initialZoomLevel < 0.7 ? 1 : 1.5;
    }
}
Modify it because if the picture resolution is very large, double-click zooming will appear as the original image, which is very unfriendly, I have to limit the size of the image after double-click zooming in.


I've handled it, I've found that the configuration is in the files .js, I've modified it,

files .js Delete code:
Code
         //   getDoubleTapZoom: function() {
         //       return e.toggle_play(!1),
         //       1
         //   },
modify the code
Code
            getDoubleTapZoom: function(e, t) {
                return e || t.initialZoomLevel < .7 ? 1 : 1.33
            },

//be revised as
            getDoubleTapZoom: function(e, t) {
                return e ? 1 : t.initialZoomLevel < .2 ? .4 : t.initialZoomLevel < .3 ? .5 : t.initialZoomLevel < .5 ? .8 : 1.33
            },
if viewport is 700px and image is 1400px, initialZoomLevel will be 0.5.

Code
<div class="pswp__zoom-wrap" style="transform: translate3d(-633px, 10px, 0px) scale(0.4);"><img class="pswp__img" src="/home/ee217a9c4562cd216bd395b16ce8a252.jpg" style="opacity: 1; width: 2560px; height: 1440px; display: block;"></div>
If it’s a 2560*1920 picture, after the double-tap gesture scale(0.4);
The problem is solved!But there will be a problem, the video double-click is also zoomed.

There is another question: the mouse click on the picture is changed to zoom instead of the page. Is there a setting option for this?
Last edited by amwpsaa on 17 Nov 2021, 05:46, edited 1 time in total.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 05:43

Glad you fixed it. We don't generally support this kind of fine-grain control of functionality. I have looked into the Photoswipe zoom functionality earlier ... First of all, I don't see any usage cases where anyone would want to scaled beyond 1X (as in their example "1.5"). I also don't see how you know what image is "too large", as that depends on the original image size relative to screen size. Finally, I don't think "zoom" is used much in most cases. If you can provide some examples links showing benefits, I will consider future options.
 
User avatar
amwpsaa
Experienced
Topic Author
Posts: 53
Joined: 29 Jul 2021, 08:46

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 05:47

mjau-mjau wrote: Glad you fixed it. We don't generally support this kind of fine-grain control of functionality. I have looked into the Photoswipe zoom functionality earlier ... First of all, I don't see any usage cases where anyone would want to scaled beyond 1X (as in their example "1.5"). I also don't see how you know what image is "too large", as that depends on the original image size relative to screen size. Finally, I don't think "zoom" is used much in most cases. If you can provide some examples links showing benefits, I will consider future options.
There is another problem: the mouse click on the image becomes the zoom instead of the page. Is there this setting option?

Or is it possible to implement mouse scrolling and zooming? 

I really need the zoom function and need to view the details of the photo.


I found that some options are not available, such as: closeOnOutsideClick: !0, 
I hope it is the same as app2.0, click on the outside of the picture to close 
Code
            closeEl: !0,
            captionEl: !0,
            fullscreenEl: U.fullscreen,
            zoomEl: !0,
            downloadEl: !1,
            mapEl: !0,
            playEl: !0,
            counterEl: !0,
            arrowEl: !0,
            preloaderEl: !0,
            closeOnOutsideClick: !0,
            tapToClose: !1,
            clickToCloseNonZoomable: !1,
            clickToShowNextNonZoomable: !1,
            indexIndicatorSep: " / ",
            fitControlsWidth: 1200
//
//
//
            allowPanToNext: !0,
            spacing: .12,
            bgOpacity: 1,
            mouseUsed: U.only_pointer,
            loop: !1,
            pinchToClose: !0,
            closeOnScroll: !1,
            closeOnVerticalDrag: !0,
            verticalDragRange: .75,
            hideAnimationDuration: 333,
            showAnimationDuration: 333,
            showHideOpacity: !1,
            focus: !0,
            escKey: !0,
            arrowKeys: !0,
            mainScrollEndFriction: .35,
            panEndFriction: .35,
            transition: "glide",
            play_transition: "glide",
loop: !1, closeOnScroll: !1,Very useful, I need to set it up like this 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 09:42

amwpsaa wrote:There is another problem: the mouse click on the image becomes the zoom instead of the page. Is there this setting option?
How can I see this "problem"? I am testing from demo.files.gallery, and clicking image definitely navigates to NEXT image. This is how it's supposed to work. Please explain or send link.
amwpsaa wrote:Or is it possible to implement mouse scrolling and zooming?
No. Mouse scroll will CLOSE the popup, and that's how it's supposed to work and what the user expects. It would be annoying if it zooms on scroll.
amwpsaa wrote:I really need the zoom function and need to view the details of the photo.
I could add an option popup_click => 'zoom' (default 'click').
amwpsaa wrote:I found that some options are not available, such as: closeOnOutsideClick: !0,
Why do you need this? User already has so many options to close the popup: 1. Click [X], 2. Escape (keyboard), 3. Scroll down, 4. Drag down (mostly used on touch devices). If you assign "close" on click outside the image, it means that user will mistakingly close the window while clicking through images when the aspect of images changes and suddenly mouse cursor is no longer over an image on click. It's just wrong and pointless ... If you have large images, why would the user want to try to click the small "margin" areas to close when there is already a close button and the can easily close by escape, scroll or drag down. It's not a productive user-pattern.
 
User avatar
amwpsaa
Experienced
Topic Author
Posts: 53
Joined: 29 Jul 2021, 08:46

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 21:20

mjau-mjau wrote: How can I see this "problem"? I am testing from demo.files.gallery, and clicking image definitely navigates to NEXT image. This is how it's supposed to work. Please explain or send link.
I think that when the mouse clicks on the image, the image is zoom, not the NEXT image, (version 0.2.0 is like this.) Hope to provide options.

Thank you Karl for his patient guidance.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 23:19

amwpsaa wrote:I think that when the mouse clicks on the image, the image is zoom, not the NEXT image, (version 0.2.0 is like this.) Hope to provide options.
Ok, I will add an option for this in next release, but it may be a while because I have another task.

I was thinking about adding config.js with advanced javascript-related configuration options, because I don't want to add all these options into index.php and config.php for main settings.
 
User avatar
amwpsaa
Experienced
Topic Author
Posts: 53
Joined: 29 Jul 2021, 08:46

Re: The new version cannot find PhotoSwipe.js

17 Nov 2021, 23:45

mjau-mjau wrote: Ok, I will add an option for this in next release, but it may be a while because I have another task.

I was thinking about adding config.js with advanced javascript-related configuration options, because I don't want to add all these options into index.php and config.php for main settings.
I temporarily add this code, it's fine, double click the mouse to zoom,
Need to cancel the click event,
Code
$(".pswp__item").dblclick(function(){
  $(".pswp__button--zoom").trigger('click');
});