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

Comments

Projects
None yet
5 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

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Dec 9, 2014

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@fidoboy

fidoboy 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 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

This comment has been minimized.

Show comment
Hide comment
@fidoboy

fidoboy Dec 9, 2014

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

fidoboy commented Dec 9, 2014

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

@dimsemenov

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Dec 9, 2014

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@fidoboy

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

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

This comment has been minimized.

Show comment
Hide comment
@dimsemenov

dimsemenov Dec 9, 2014

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.

Owner

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 from Prevent default event? to Scrollable caption / Prevent default event? Dec 25, 2014

@rkumarat

This comment has been minimized.

Show comment
Hide comment
@rkumarat

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

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.

@zerodburn

This comment has been minimized.

Show comment
Hide comment
@zerodburn

zerodburn Jun 8, 2015

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.

Contributor

zerodburn 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

This comment has been minimized.

Show comment
Hide comment
@acwolff

acwolff Sep 1, 2017

See my solution: #1408

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