├── .gitignore
├── galaxy.jpg
├── whatever.png
├── README.md
├── markdown-zoom-demo.Rproj
├── www
    ├── style.css
    └── zoom.js
└── document.Rmd


/.gitignore:
--------------------------------------------------------------------------------
1 | .Rproj.user
2 | .Rhistory
3 | .RData
4 | .Ruserdata
5 | 


--------------------------------------------------------------------------------
/galaxy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DominikRafacz/markdown-zoom-demo/master/galaxy.jpg


--------------------------------------------------------------------------------
/whatever.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DominikRafacz/markdown-zoom-demo/master/whatever.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # markdown-zoom-demo
3 | 
4 | Example of including the code to allow zooming-in images in the markdown document.
5 | 
6 | In order to make this work, css needs to be attached and two tags need to be added at the end of the document, just like in the exemplary document.
7 | 
8 | 


--------------------------------------------------------------------------------
/markdown-zoom-demo.Rproj:
--------------------------------------------------------------------------------
 1 | Version: 1.0
 2 | 
 3 | RestoreWorkspace: Default
 4 | SaveWorkspace: Default
 5 | AlwaysSaveHistory: Default
 6 | 
 7 | EnableCodeIndexing: Yes
 8 | UseSpacesForTab: Yes
 9 | NumSpacesForTab: 2
10 | Encoding: UTF-8
11 | 
12 | RnwWeave: Sweave
13 | LaTeX: pdfLaTeX
14 | 


--------------------------------------------------------------------------------
/www/style.css:
--------------------------------------------------------------------------------
 1 | .modal {
 2 |     display: none;
 3 |     background: rgba(1,1,1,0.25);
 4 |     position: fixed;
 5 |     top: 0;
 6 |     left: 0;
 7 |     width: 100%;
 8 |     height: 100%;
 9 | }
10 | 
11 | .modal .modal-content {
12 |     position: absolute;
13 |     left: 50%;
14 |     top: 50%;
15 |     transform: translate(-50%, -50%);
16 |     color: #fff;
17 | }
18 | 
19 | .modal img, .modal span {
20 |     z-index: 10;
21 |     max-height: 95vh;
22 |     max-width: 95vw;
23 | }
24 | 
25 | .img {
26 |     cursor: zoom-in;
27 | }


--------------------------------------------------------------------------------
/www/zoom.js:
--------------------------------------------------------------------------------
 1 | // code adapted from https://codereview.stackexchange.com/questions/173715/click-on-an-image-to-zoom-in
 2 | 
 3 | let images = document.querySelectorAll('img');
 4 | let modal = document.querySelector('.modal');
 5 | 
 6 | // Loops through the all the images selected...
 7 | images.forEach(function (image) {
 8 |     // When the image is clicked...
 9 |     image.addEventListener('click', function(event) {
10 |         modal.innerHTML = '<div class="modal-content"><img src="' + event.target.src + '"><br><span>' + event.target.alt + '</span></div>';
11 |         modal.style.display = 'block';
12 |     });
13 | });
14 | 
15 | // When the user clicks somewhere in the "modal" area it automatically closes itself
16 | modal.addEventListener('click', function () {
17 |     this.style.display = 'none';
18 | });
19 | 


--------------------------------------------------------------------------------
/document.Rmd:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Random title"
 3 | author: "Dominik Rafacz"
 4 | date: "29 03 2022"
 5 | output: 
 6 |   html_document:
 7 |     css: "www/style.css"
 8 | ---
 9 | 
10 | ```{r setup, include=FALSE}
11 | knitr::opts_chunk$set(echo = TRUE)
12 | ```
13 | 
14 | ## R Markdown
15 | 
16 | This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
17 | 
18 | When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
19 | 
20 | ```{r cars}
21 | summary(cars)
22 | ```
23 | 
24 | ## Including Plots
25 | 
26 | You can also embed plots, for example:
27 | 
28 | ```{r pressure, echo=FALSE}
29 | plot(pressure)
30 | ```
31 | 
32 | Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
33 | 
34 | ![galaxy](galaxy.jpg)
35 | 
36 | ![more whatever](whatever.png)
37 | 
38 | <div class="modal">
39 | </div>
40 | <script src="www/zoom.js">
41 | </script>
42 | 


--------------------------------------------------------------------------------