Pinch Zoom

[prncevince]

This may be more of a function of the internals of remark.js than the xaringan package, but there seems to be more current active development & community involvement on xaringan, thus my justification for posting here.

On my iPhone 7 touchscreen device, pinch zoom registers as a navigation touch event. i.e. zooming in via a pinch will go to the next slide and/or incremental reveal.

It would be ideal if pinch zooming on touchscreen devices:

• Does not trigger a navigation touch event

Here is an example with the following YAML header that can be tested on touchscreen/mobile:

---
title: "Pinch Me!"
subtitle: "⚔<br/>with xaringan"
author: ""
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      navigation:
        scroll: false
        touch: true
---

rmd source

Not a mobile developer myself, so I have entirely no idea how to implement this feature, but just throwing it on the board here as an idea / FR.

In comparison, I find that https://revealjs.com slides do not increment due to pinch zoom.

[kenahoo]

Agree; even viewing on a desktop browser, I would like to be able to zoom in & out to see pictures better sometimes. I already have forward & backward arrows to navigate the slides, so I feel like it would be nice to leave the zooming gestures as they are and not coöpt them for navigation.

[GitHunter0]

Hi folks, @kenahoo , have you discovered how to zoom in & out xaringan html presentation in the browser? ioslides enables it natively but I could not find a way to do that in xaringan

[cderv]

Zooming is indeed something missing from 'remark.js'. I found to Feature request related to that https://github.com/gnab/remark/issues/511 and https://github.com/gnab/remark/issues/635

The first one mentions Zoom.js and it seems this could be added easily into xaringan slide.

Proof of concept:

• Add this chunk in your document

  ```{cat, engine.opts=list(file = "zoom.html")}
  <script src="https://lab.hakim.se/zoom-js/js/zoom.js" type="text/javascript"></script>
  <script type="text/javascript">
  slideshow.on( "beforeHideSlide", function( slide ) {
      zoom.out();
  } );
  slideshow.on( "afterShowSlide", function( slide ) {
      document.querySelector( ".remark-visible" ).addEventListener( "click", function( event ) {
          event.preventDefault();
          zoom.to( {element: event.target} );
      } );
  } );
  </script>

• Add this in in the YAML

  xaringan::moon_reader:
  includes:
    after_body: zoom.html

This will activate zoom on click - should be the same as in

There are other library around there like https://github.com/manuelstofer/pinchzoom specific for Mobile.

@gadenbuie would that be a (another 😉 ) good addition to xaringanExtra for a user to opt-in until remark-js supports it (https://github.com/gnab/remark/issues/511) ?

You may know about another JS lib maybe.

The zoom.js one is indicated as experimental, even if used in Reveal.js I guess.

[GitHunter0]

This is nice, thank you for the feedback @cderv . A built-in support via xaringanExtra would certainly be appreciated.