add zoom-image modal for clicking on images

README.md

@@ -53,7 +53,7 @@ Install the package from source with pip:
 ```bash
 cd mkdocs-risonia-theme/
 python setup.py sdist bdist_wheel
-pip install dist/mkdocs_risonia_theme-0.1.8-py3-none-any.whl
+pip install dist/mkdocs_risonia_theme-0.1.9-py3-none-any.whl
 ```
 
 ## Configuration
@@ -71,6 +71,7 @@ theme:
     #extlink: true # mark external links with symbol
     #extblank: true # send external links to new browser tab
     #toc_sidebar: true # If display is wide enough, then display TOC on the right side
+    #zoom_img: true # click on images to view them bigger
 
 plugins:
     - search: {}

docs/index.en.md

@@ -42,7 +42,7 @@ Install the package from source with pip:
 ```bash
 cd mkdocs-risonia-theme/
 python setup.py sdist bdist_wheel
-pip install dist/mkdocs_risonia_theme-0.1.8-py3-none-any.whl
+pip install dist/mkdocs_risonia_theme-0.1.9-py3-none-any.whl
 ```
 
 ## Configuration
@@ -60,6 +60,7 @@ theme:
     #extlink: true # mark external links with symbol
     #extblank: true # send external links to new browser tab
     #toc_sidebar: true # If display is wide enough, then display TOC on the right side
+    #zoom_img: true # click on images to view them bigger
 
 plugins:
     - search: {}

docs/index.md

@@ -42,7 +42,7 @@ Oder aus den Quellen bauen mit pip:
 ```bash
 cd mkdocs-risonia-theme/
 python setup.py sdist bdist_wheel
-pip install dist/mkdocs_risonia_theme-0.1.8-py3-none-any.whl
+pip install dist/mkdocs_risonia_theme-0.1.9-py3-none-any.whl
 ```
 
 ## Konfiguration
@@ -60,6 +60,7 @@ theme:
     #extlink: true # externe Links markieren
     #extblank: true # externe Links im neuen Browserfenster öffnen
     #toc_sidebar: true # Wenn Anzeige breit genug, dann Inhaltsverzeichnis rechts anzeigen
+    #zoom_img: true # beim Klicken auf ein Bild wird es größer angezeigt
 
 plugins:
     - search: {}

mkdocs.yml

@@ -11,6 +11,7 @@ theme:
     extblank: true
     manifest: manifest.json
     serviceworker: service-worker.js
+    zoom_img: true
 
 extra_javascript:
   - 'assets/javascripts/highlight.min.js'

risonia_theme/base.html

@@ -350,8 +350,14 @@
   </div>
 </div>
 {%- endif %}
-
 </div>
+{%- if config.theme.zoom_img %}
+<div id="zoom_img_modal" class="w3-modal" onclick="this.style.display='none'">
+  <div class="w3-modal-content w3-animate-zoom">
+    <img id="img_modal" style="width:100%;">
+  </div>
+</div>
+{%- endif %}
 {%- block footer %}
 <footer class="w3-container w3-theme no-print">
   <p class="w3-left w3-tiny">

risonia_theme/js/theme.js

@@ -72,3 +72,7 @@ function closeSearch() {
   document.getElementById('mkdocs_search_modal').style.display='none'
 }
 
+function zoomImg(element) {
+    document.getElementById('img_modal').src=element.src;
+    document.getElementById('zoom_img_modal').style.display='block';
+}

risonia_theme/mkdocs_theme.yml

@@ -10,3 +10,5 @@ extlink: false
 extblank: true
 
 toc_sidebar: true
+
+zoom_img: false

risonia_theme/plugins/classes/plugin.py

@@ -40,6 +40,9 @@ def on_page_content(self, html, page, config, files):
 
         for img_tag in soup.find_all('img'):
             img_tag['class'] = img_tag.get('class', []) + ['w3-image'] #add class to <image>
+            if 'zoom_img' in config['theme']._vars and config['theme']._vars['zoom_img']:
+                img_tag['loading'] = "lazy"
+                img_tag['onclick'] = "zoomImg(this);";
 
         #add extlink svg after external links if configured
         if 'extlink' in config['theme']._vars and config['theme']._vars['extlink']:

setup.py

@@ -1,7 +1,7 @@
 import os
 from setuptools import setup, find_packages
 
-VERSION = '0.1.8'
+VERSION = '0.1.9'
 
 def read(fname):
     file_path = os.path.join(os.path.dirname(__file__), fname)