From 7523b610d71fe68e22565e0f6a9b4b7555e8d55c Mon Sep 17 00:00:00 2001
From: "ReEvApp - Re-Evolution Applications, LLC" <admin@reevapp.com>
Date: Tue, 12 Apr 2016 15:59:34 -0400
Subject: [PATCH] Avoid adding multiple loupe DIVs

The current version always add new "ok-loupe" and "ok-listener" divs, the following change will prevent this behavior and allow for the initializer to be called multiple times without creating unnecessary divs. The key is in looking for an already created Div by its id and having one div for each image that supports zooming.
---
 src/okzoom.js | 44 +++++++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/okzoom.js b/src/okzoom.js
index d55a027..28309b6 100644
--- a/src/okzoom.js
+++ b/src/okzoom.js
@@ -16,21 +16,35 @@ $(function($){
       base.$el = $(el);
       base.el = el;
 
-      base.listener = document.createElement('div');
-      base.$listener = $(base.listener).addClass('ok-listener').css({
-        position: 'absolute',
-        zIndex: 10000
-      });
-      $('body').append(base.$listener);
-
-      var loupe = document.createElement("div");
-      loupe.id = "ok-loupe";
-      loupe.style.position = "absolute";
-      loupe.style.backgroundRepeat = "no-repeat";
-      loupe.style.pointerEvents = "none";
-      loupe.style.display = "none";
-      loupe.style.zIndex = 7879;
-      $('body').append(loupe);
+      //Find a pre-existing element for 'ok-listener'
+      base.listener = document.getElementById('ok-listener_' + this.id);
+      base.$listener = $(base.listener);
+
+      if (!base.listener) {
+        base.listener = document.createElement('div');
+        base.listener.id = "ok-listener_" + this.id;
+        base.$listener = $(base.listener).addClass('ok-listener').css({
+          position: 'absolute',
+          zIndex: 10000
+        });
+        $('body').append(base.$listener);
+        okListener = base.listener;
+      }
+
+      //Find a pre-existing element for 'ok-loupe'
+      var loupe = document.getElementById('ok-loupe_' + this.id);
+
+      if (!loupe) {
+        loupe = document.createElement("div");
+        loupe.id = "ok-loupe_" + this.id;
+        loupe.style.position = "absolute";
+        loupe.style.backgroundRepeat = "no-repeat";
+        loupe.style.pointerEvents = "none";
+        loupe.style.display = "none";
+        loupe.style.zIndex = 7879;
+        $('body').append(loupe);
+        okLoupe = loupe;
+      }
       base.loupe = loupe;
 
       base.$el.data("okzoom", base);