xaringan
xaringan copied to clipboard
Pinch Zoom
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
---
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.
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.
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
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.
This is nice, thank you for the feedback @cderv . A built-in support via xaringanExtra
would certainly be appreciated.