Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollable caption / Prevent default event? #657

Closed
fidoboy opened this issue Dec 8, 2014 · 9 comments
Closed

Scrollable caption / Prevent default event? #657

fidoboy opened this issue Dec 8, 2014 · 9 comments

Comments

@fidoboy
Copy link

@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
Copy link
Owner

@dimsemenov dimsemenov commented Dec 9, 2014

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
Copy link
Author

@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
Copy link
Author

@fidoboy fidoboy commented Dec 9, 2014

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

@dimsemenov
Copy link
Owner

@dimsemenov dimsemenov commented Dec 9, 2014

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
Copy link
Author

@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
Copy link
Owner

@dimsemenov dimsemenov commented Dec 9, 2014

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 Prevent default event? Scrollable caption / Prevent default event? Dec 25, 2014
@rkumarat
Copy link

@rkumarat rkumarat commented May 15, 2015

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.

@patrick-wc
Copy link
Contributor

@patrick-wc patrick-wc commented Jun 8, 2015

@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.

@acwolff
Copy link

@acwolff acwolff commented Sep 1, 2017

See my solution: #1408

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.