From e0b5c527fffa16e0ff26e21872fffd9f80abdb08 Mon Sep 17 00:00:00 2001
From: mmattel <github@diemattels.at>
Date: Tue, 30 Jan 2024 17:20:15 +0100
Subject: [PATCH] Add Divi as framework example

---
 README.md               |  3 ++-
 examples/Divi/README.md | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 examples/Divi/README.md

diff --git a/README.md b/README.md
index 5d6fd60..424c112 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,7 @@ npx doctoc README.md --maxlevel 3
 - 📦 **Customization** — set your own margin, background and scroll offset
 - 🔧 **Pluggable** — add your own features to the zoom
 - 💎 **Custom templates** — extend the default look to match the UI of your app
-- 🔌 [**Framework agnostic**](#framework-integrations) — works with React, Vue, Angular, Svelte, Solid, etc.
+- 🔌 [**Framework agnostic**](#framework-integrations) — works with React, Vue, Angular, Svelte, Solid, Divi, etc.
 
 ## Installation
 
@@ -397,6 +397,7 @@ Medium Zoom is a JavaScript library that can be used with any framework. Here ar
 - [React Markdown](./examples/react-markdown)
 - [Vue](./examples/vue)
 - [Svelte](./examples/svelte)
+- [Divi](./examples/Divi/README.md)
 
 ## Examples
 
diff --git a/examples/Divi/README.md b/examples/Divi/README.md
new file mode 100644
index 0000000..8ab2f0f
--- /dev/null
+++ b/examples/Divi/README.md
@@ -0,0 +1,36 @@
+# Divi Integration
+
+[Divi](https://www.elegantthemes.com/gallery/divi/) is a WordPress based Page Builder. See the following description how to integrate `meduim-zoom` into Divi. Note that you already must have Wordpress and Divi installed to proceed. You can select any other supported CDN or a local installation if required.
+
+## Usage
+
+* Add the following javascript code via `Divi/Team Options/Integration/Body`:
+  ```
+  <script src=https://unpkg.com/medium-zoom@1.1.0/dist/medium-zoom.min.js>
+  </script>
+
+  <script>
+    jQuery(function($){
+      const images = Array.from(document.querySelectorAll(".data-zoomable img"));
+        images.forEach(img => {
+          mediumZoom(img, {
+          background: '#fff',
+          margin: 10
+          }
+        );
+      });
+    });
+  </script>
+  ```
+  Note that if you want to make _every_ image in your site zoomable, replace `.data-zoomable` with `.et_pb_image_wrap`. In that case, no custom CSS Class is needed, see below.
+
+* Add the following custom css via `Divi/Team Options/General/Custom CSS`.  
+  Note that the high value of `z-index` numbers are necessary as Divi already uses in some cases high numbers. Else, zoomed images may not show up:
+  ```
+  .medium-zoom-overlay { z-index: 99999; }
+  .medium-zoom-image--opened { z-index: 100000;}
+  ```
+
+* Finally, for every image you want to make zoomable, go to:  
+  `EditPage/select image container/Image Settings/Advanced/CSS Class`  
+  and enter/add as value `data-zoomable`.