Scrollable caption / Prevent default event? #657

Closed
fidoboy opened this Issue Dec 8, 2014 · 8 comments

Projects

None yet

4 participants

@fidoboy
fidoboy commented Dec 8, 2014

I'm trying to modify the ui javascript. I wan't to prevent default or stop propagation when user drag over the caption, to allow overflow-y scroll... how can i prevent default behaviour to stop image dragging? I suppose that i should use the _listen function to catch the _shout event but i'm not sure about how to do it

@dimsemenov
Owner

I tried making caption text scrollable with overflow-y:scroll & -webkit-overflow-scrolling: touch during the development. There are too much problems with it.

First of, if you disable preventDefault on touchstart and touchmove and try to scroll caption container - page itself starts scrolling.

Secondly, caption covers swiping area. So big part of gallery would be inactive. Especially when phone is in landscape orientation.

So PhotoSwipe always prevents touchmove, and allows to override only touchstart/touchend (to make links and text selection work).

My advice, is that if you have very long captions, try avoiding them in PhotoSwipe, or add some "view more" button that will expand caption to 100% width/height of viewport.

@fidoboy
fidoboy commented Dec 9, 2014

hmm... but i really need any way to allow scrolling using -webkit-overflow-scrolling inside the photoswipe interface; there should be any way to solve it, by temporary disabling background or something....

@fidoboy
fidoboy commented Dec 9, 2014

If is not possible with caption, at least when showing a modal popup...

@dimsemenov
Owner

You can create modal popup just by placing it out side of pswp__scroll-wrap, like so:

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>

        <div class="pswp__scroll-wrap">
          <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
          </div>

          <div class="pswp__ui pswp__ui--hidden">
                 ... UI things ...
          </div>
        </div>

        <div class="your-modal" style="position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.6);">
            Your modal content
        </div>


    </div>

all you need is to toggle display and content of .your-modal element. PhotoSwipe applies touch events only to scroll-wrap.

@fidoboy
fidoboy commented Dec 9, 2014

Ok, good to know that Photoswipe only applies to scroll-wrap. Now i only need to integrate that into the photoswipe-ui.js to manage my modal from outside the wrapper, cause i can't use the global tap events then...

Going off topic, i should say that your photoswipe script is really amazing, i'm loving it more and more on every moment. It's really a good work....

@dimsemenov
Owner

You can just add <A> tag anywhere inside .pswp__scroll-wrap. And just bind click event on it. PhotoSwipe doesn't call preventDefault on A tags.

@dimsemenov dimsemenov closed this Dec 22, 2014
@dimsemenov dimsemenov changed the title from Prevent default event? to Scrollable caption / Prevent default event? Dec 25, 2014
@rkumarat

If you check the link http://staging.internationaltravellermag.com/five-uniquely-salzburgian-experiences/#&gid=1&pid=1

this has the pswp__scroll-wrap as 80% and the caption sa 20% but still it has disabled the mouse wheal scrolling.

Cant figure it out .

Please suggest.

@zerodburn
Contributor

@rkumarat I have been tasked to come up with a design that is extremely similar to that one, thanks for that link. Basically I'd like the photoswipe section to be on the left at around 80% with 20% caption/text desc area, but only when the viewport is wide enough, e.g. min-width: 1024px. I promise to create a codepen after or during my project showing a basic stripped down version of it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment