From 0efa0932f98c4f460f476fa33b453b5556847e00 Mon Sep 17 00:00:00 2001
From: "Adolfo R. Brandes" <adolfo@axim.org>
Date: Wed, 11 Dec 2024 17:12:40 -0300
Subject: [PATCH] feat: Reimplement the Zooming Image Tool

This recreates the Zooming Image Tool template for the HTML block.  It
does it in such a way that doesn't depend on any external resources:
both the loupe code and sample image are inlined.

Some benefits to this version are:

* We can now maintain the loupe javascript code properly

* Because the javascript is included in the contents of the block
  itself, the course author can customize it as needed

* As opposed to the previous iteration, the magnified image URL is now
  optional: if it's not present, the regular image will be used for
  magnification

This also removes some CSS left over from the previous iteration.
---
 cms/static/sass/elements/_vendor.scss     |   7 -
 xmodule/templates/html/zooming_image.yaml | 185 +++++-----------------
 2 files changed, 43 insertions(+), 149 deletions(-)

diff --git a/cms/static/sass/elements/_vendor.scss b/cms/static/sass/elements/_vendor.scss
index 5418745922f9..b57fa04175c2 100644
--- a/cms/static/sass/elements/_vendor.scss
+++ b/cms/static/sass/elements/_vendor.scss
@@ -66,13 +66,6 @@
   z-index: 100000 !important;
 }
 
-//jQuery loupeAndLightbox Plugin
-.zooming-image-place {
-  .larger {
-    left: 0 !important;
-    bottom: 100% !important;
-  }
-}
 // ====================
 
 // reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu)
diff --git a/xmodule/templates/html/zooming_image.yaml b/xmodule/templates/html/zooming_image.yaml
index 9798a118399b..599268ed021c 100644
--- a/xmodule/templates/html/zooming_image.yaml
+++ b/xmodule/templates/html/zooming_image.yaml
@@ -2,87 +2,51 @@
 metadata:
     display_name: Zooming Image Tool
 data: |
-      <h3 class="hd hd-2">Zooming Image Tool</h3>
-      <p>Use the Zooming Image Tool to enable learners to see details of large, complex images.</p>
-      <p>With the Zooming Image Tool, the learner can move the mouse pointer over a part of the image to enlarge it and see more detail.</p>
-      <p>To use the Zooming Image Tool, add both the regular and magnified image files to your course.</p>
-      <p>The following HTML code shows the format required to use the Zooming Image tool. For the example in this template, you must replace the values in <i>italics</i>.</p>
-        <pre>
-        &lt;div class="zooming-image-place" style="position: relative;"&gt;
-          &lt;a class="loupe" href="<i>path to the magnified version of the image</i>"&gt;
-            &lt;img alt="<i>Text for screen readers</i>"
-              src="<i>path to the image you want to display in the unit</i>" /&gt;
-          &lt;/a>
-        </pre>
-
-      <p>You can modify the example below for your own use.</p>
-      <ol>
-        <li>Replace the value of the link's <strong>href</strong> attribute with the path to the magnified image. Do not change the value of the class attribute.</li>
-        <li>Replace the value of the image's <strong>src</strong> attribute with the path to the image that will appear in the unit.</li>
-        <li>Replace the value of the image's <strong>alt</strong> attribute with text that both describes the image and the action or destination of clicking on the image. You <strong>must</strong> include alt text to provide an accessible label.</li>
-      </ol>
-      <p>The example below shows a subset of the biochemical reactions that cells carry out. </p>
-      <p>You can view the chemical structures of the molecules by clicking on them. The magnified view also lists the enzymes involved in each step.</p>
-      <p class="sr">Press spacebar to open the magnifier.</p>
-      <div class="zooming-image-place" style="position: relative;">
-        <a class="loupe" href="https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png">
-          <img alt="magnify" src="https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png" />
+      <p>Use the Zooming Image Tool to enable learners to see details of large, complex images. With the tool, the learner can move the mouse pointer over a part of the image to enlarge it and see more detail.</p>
+      <p>To set it up, first upload the regular image file and, optionally, a magnified image file to your course. Then refer to them with the following HTML code, replacing the values in <i>italics</i> accordingly:</p>
+      <pre>
+      &lt;div class="zooming-image-container" style="position: relative;"&gt;
+        &lt;a class="zooming-image" <strong>data-src</strong>="<i style="color: blue">(Optional) URL to the magnified image</i>"&gt;
+          &lt;img <strong>src</strong>="<i style="color: blue">URL to the regular image</i>" /&gt;
+        &lt;/a&gt;
+      &lt;/div&gt;
+      </pre>
+      <p>If a magnified image is not provided, the regular one will be used at its native size.</p>
+      <p>Feel free to modify the example below for your own use, but take care not to remove the included Javascript.</p>
+      <!-- MODIFY HERE: start -->
+      <div class="zooming-image-container" style="position: relative;">
+        <a class="zooming-image" data-src="">
+          <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiCiB3aWR0aD0iMTMwMCIgaGVpZ2h0PSIxMzAwIiB2aWV3Qm94PSItNjUwIC02NTAgMTMwMCAxMzAwIj4KIDxkZWZzPgogPHBhdGggaWQ9ImsiIHN0cm9rZT0iYmx1ZSIgc3Ryb2tlLXdpZHRoPSIzIgogZD0iTTAsMCBoMjAwIGEyMDAsMjAwIDAgMSwwIC00MCwtMTUwIHoiIC8+CgogPGZpbHRlciBpZD0icyIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjMzIiBpbj0iU291cmNlR3JhcGhpYyIgLz4KIDwvZmlsdGVyPgogIDxmaWx0ZXIgaWQ9InMxOSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjgiIGluPSJTb3VyY2VHcmFwaGljIiAvPgogPC9maWx0ZXI+CiA8ZmlsdGVyIGlkPSJzMSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjY0IiBpbj0iU291cmNlR3JhcGhpYyIgLz4KIDwvZmlsdGVyPgogPGZpbHRlciBpZD0iczI3IiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giCiAgICAgICAgICB4PSItMC4yNSIgeT0iLTAuMjUiIHdpZHRoPSIxLjUiIGhlaWdodD0iMS41Ij4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAuNTEiIGluPSJTb3VyY2VHcmFwaGljIiAvPgogPC9maWx0ZXI+CiA8ZmlsdGVyIGlkPSJzMiIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjQxIiBpbj0iU291cmNlR3JhcGhpYyIgLz4KIDwvZmlsdGVyPgogPGZpbHRlciBpZD0iczMiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIKICAgICAgICAgIHg9Ii0wLjI1IiB5PSItMC4yNSIgd2lkdGg9IjEuNSIgaGVpZ2h0PSIxLjUiPgogICAgPGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMC4yNiIgaW49IlNvdXJjZUdyYXBoaWMiIC8+CiA8L2ZpbHRlcj4KIDxmaWx0ZXIgaWQ9InM0MyIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjMiIGluPSJTb3VyY2VHcmFwaGljIiAvPgogPC9maWx0ZXI+CiA8ZmlsdGVyIGlkPSJzNCIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjE3IiBpbj0iU291cmNlR3JhcGhpYyIgLz4KIDwvZmlsdGVyPgoKIDxmaWx0ZXIgaWQ9InM0MSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjEzIiBpbj0iU291cmNlR3JhcGhpYyIgLz4KIDwvZmlsdGVyPgogPGZpbHRlciBpZD0iczUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIKICAgICAgICAgIHg9Ii0wLjI1IiB5PSItMC4yNSIgd2lkdGg9IjEuNSIgaGVpZ2h0PSIxLjUiPgogICAgPGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMC4xMSIgaW49IlNvdXJjZUdyYXBoaWMiIC8+CiA8L2ZpbHRlcj4KIDxmaWx0ZXIgaWQ9InM2IiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giCiAgICAgICAgICB4PSItMC4yNSIgeT0iLTAuMjUiIHdpZHRoPSIxLjUiIGhlaWdodD0iMS41Ij4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAuMDkiIGluPSJTb3VyY2VHcmFwaGljIiAvPgogPC9maWx0ZXI+CiA8ZmlsdGVyIGlkPSJzNjg3IiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giCiAgICAgICAgICB4PSItMC4yNSIgeT0iLTAuMjUiIHdpZHRoPSIxLjUiIGhlaWdodD0iMS41Ij4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAuMDY4NyIgaW49IlNvdXJjZUdyYXBoaWMiIC8+CiA8L2ZpbHRlcj4KIDxmaWx0ZXIgaWQ9InM1NSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjA1NSIgaW49IlNvdXJjZUdyYXBoaWMiIC8+CiA8L2ZpbHRlcj4KIDxmaWx0ZXIgaWQ9InM0NCIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjA0NCIgaW49IlNvdXJjZUdyYXBoaWMiIC8+CiA8L2ZpbHRlcj4KIDxmaWx0ZXIgaWQ9InMzNSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IgogICAgICAgICAgeD0iLTAuMjUiIHk9Ii0wLjI1IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjEuNSI+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwLjAzNSIgaW49IlNvdXJjZUdyYXBoaWMiIC8+CiA8L2ZpbHRlcj4KIDxmaWx0ZXIgaWQ9InMwIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giCiAgICAgICAgICB4PSItMC4yNSIgeT0iLTAuMjUiIHdpZHRoPSIxLjUiIGhlaWdodD0iMS41Ij4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiIGluPSJTb3VyY2VHcmFwaGljIiAvPgogPC9maWx0ZXI+CgogIDxtYXNrIGlkPSJtYXNrZSI+CiAgIDxyZWN0IHg9Ii01MDAiIHk9Ii01MDAiIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjE2MDAiIGZpbGw9IiNmZmYiIC8+CiAgIDx1c2UgeGxpbms6aHJlZj0iI2siIGZpbGw9IiMwMDAiIC8+CiAgIDwhLS11c2UgeGxpbms6aHJlZj0iI2siIHg9IjAiIHk9IjAiIHRyYW5zZm9ybT0icm90YXRlKC0zMCkiIGZpbGw9IiMwMDAiIC8tLT4KICAgPHVzZSB4bGluazpocmVmPSIjayIgdHJhbnNmb3JtPSJyb3RhdGUoLTMwKSIgZmlsbD0iIzAwMCIgLz4KICA8L21hc2s+CiA8L2RlZnM+CiA8ZyBpZD0ic2NoaXJtIiB0cmFuc2Zvcm09InNjYWxlKDEpIj4KICA8dXNlIGZpbGw9InJlZCIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMzApIiBmaWxsPSIjZmY3ZjAwIiB4bGluazpocmVmPSIjayIgLz4KICA8dXNlIHRyYW5zZm9ybT0icm90YXRlKC02MCkiIGZpbGw9IiNmZjAiIHhsaW5rOmhyZWY9IiNrIiAvPgogIDx1c2UgdHJhbnNmb3JtPSJyb3RhdGUoLTkwKSIgZmlsbD0iIzdmZmYwMCIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMTIwKSIgZmlsbD0iIzBmMCIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMTUwKSIgZmlsbD0iIzAwZmY3ZiIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwKSIgZmlsbD0iIzBmZiIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMjEwKSIgZmlsbD0iIzAwN2ZmZiIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMjQwKSIgZmlsbD0iIzAwZiIgeGxpbms6aHJlZj0iI2siIC8+CiAgPHVzZSB0cmFuc2Zvcm09InJvdGF0ZSgtMjcwKSIgZmlsbD0iIzdmMDBmZiIgeGxpbms6aHJlZj0iI2siIC8+CiAgPGcgbWFzaz0idXJsKCNtYXNrZSkiPgogIDx1c2UgdHJhbnNmb3JtPSJyb3RhdGUoNjApIiBmaWxsPSIjZjBmIiB4bGluazpocmVmPSIjayIgLz4KICA8dXNlIHRyYW5zZm9ybT0icm90YXRlKDMwKSIgZmlsbD0iI2ZmMDA3ZiIgeGxpbms6aHJlZj0iI2siIG9wYWNpdHk9IjEiLz4KIDwvZz48L2c+CiA8ZyBpZD0ic2NoaXJtZSIgb3BhY2l0eT0iMSI+CiA8dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC44KSIgZmlsdGVyPSJ1cmwoI3MxOSkiIHhsaW5rOmhyZWY9IiNzY2hpcm0iIC8+CiA8dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC42NCkiIGZpbHRlcj0idXJsKCNzMSkiIHhsaW5rOmhyZWY9IiNzY2hpcm0iIC8+CiA8dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC41MTIpIiBmaWx0ZXI9InVybCgjczI3KSIgeGxpbms6aHJlZj0iI3NjaGlybSIgLz4KIDx1c2UgdHJhbnNmb3JtPSJzY2FsZSgwLjQwOTYpIiBmaWx0ZXI9InVybCgjczIpIiB4bGluazpocmVmPSIjc2NoaXJtIiAvPgogPHVzZSB0cmFuc2Zvcm09InNjYWxlKDAuMzI3NykiIGZpbHRlcj0idXJsKCNzKSIgeGxpbms6aHJlZj0iI3NjaGlybSIgLz4KIDx1c2UgdHJhbnNmb3JtPSJzY2FsZSgwLjI2MjEpIiBmaWx0ZXI9InVybCgjczMpIiB4bGluazpocmVmPSIjc2NoaXJtIiAvPgogPHVzZSB0cmFuc2Zvcm09InNjYWxlKDAuMjA5NykiIGZpbHRlcj0idXJsKCNzNDMpIiB4bGluazpocmVmPSIjc2NoaXJtIiAvPgogPHVzZSB0cmFuc2Zvcm09InNjYWxlKDAuMTY3OCkiIGZpbHRlcj0idXJsKCNzNCkiIHhsaW5rOmhyZWY9IiNzY2hpcm0iIC8+CiA8dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC4xMzQyKSIgZmlsdGVyPSJ1cmwoI3M0MSkiIHhsaW5rOmhyZWY9IiNzY2hpcm0iIC8+CiA8dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC4xMDc0KSIgZmlsdGVyPSJ1cmwoI3M1KSIgeGxpbms6aHJlZj0iI3NjaGlybSIgLz4KIDx1c2UgdHJhbnNmb3JtPSJzY2FsZSgwLjA4NTkpIiBmaWx0ZXI9InVybCgjczYpIiB4bGluazpocmVmPSIjc2NoaXJtIiAvPgogPHVzZSB0cmFuc2Zvcm09InNjYWxlKDAuMDY4NykiIGZpbHRlcj0idXJsKCNzNjg3KSIgeGxpbms6aHJlZj0iI3NjaGlybSIgLz4KIDx1c2UgdHJhbnNmb3JtPSJzY2FsZSgwLjA1NSkiIGZpbHRlcj0idXJsKCNzNTUpIiB4bGluazpocmVmPSIjc2NoaXJtIiAvPgogPHVzZSB0cmFuc2Zvcm09InNjYWxlKDAuMDQ0KSIgZmlsdGVyPSJ1cmwoI3M0NCkiIHhsaW5rOmhyZWY9IiNzY2hpcm0iIC8+CiA8dXNlIHRyYW5zZm9ybT0ic2NhbGUoMC4wMzUpIiBmaWx0ZXI9InVybCgjczM1KSIgeGxpbms6aHJlZj0iI3NjaGlybSIgLz4KIDx1c2UgdHJhbnNmb3JtPSJzY2FsZSgwLjAyOCkiIGZpbHRlcj0idXJsKCNzMCkiIHhsaW5rOmhyZWY9IiNzY2hpcm0iIC8+CiA8L2c+Cjwvc3ZnPg==" />
         </a>
       </div>
-      <script type="text/javascript">// <![CDATA[
-        /*
-        jQuery loupeAndLightbox Plugin
-        * Version 1.0
-        * 05-10-2010
-        * Author: M.Biscan
-        * requires jQuery1.4.2
-        Copyright (c) 2010 M.Biscan
-
-        Permission is hereby granted, free of charge, to any person obtaining
-        a copy of this software and associated documentation files (the
-        "Software"), to deal in the Software without restriction, including
-        without limitation the rights to use, copy, modify, merge, publish,
-        distribute, sublicense, and/or sell copies of the Software, and to
-        permit persons to whom the Software is furnished to do so, subject to
-        the following conditions:
-
-        The above copyright notice and this permission notice shall be
-        included in all copies or substantial portions of the Softwarevent.
-
-        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-        EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-        MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-        NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-        LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-        OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-        WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-        */
-        (function($){
-          $.fn.loupeAndLightbox = function(options) {
-            var settings = $.extend({}, $.fn.loupeAndLightbox.defaults, options);
+      <!-- MODIFY HERE: end -->
+      <!-- DO NOT REMOVE: start -->
+      <script type="text/javascript">//<![CDATA[
+        (function($) {
+          $.fn.loupe = function(options) {
+            var settings = $.extend({}, $.fn.loupe.defaults, options);
 
             return this.each(function() {
               var $this = $(this),
                   $targetImage = $this.find('> img'),
                   $magnifiedImage = $('<img />'),
                   $loupe = $('<div class="larger" style="overflow: hidden;">'),
-                  $lightbox = $('<div class="lal_lightbox">'),
                   $errorMessage = $('<div class="lal_errorMessage">'),
                   $loader = $('<div class="lal_loader">Loading...</div>');
 
-              ///////////
-              // Setup //
-              ///////////
               $this.css({
                 cursor:'default'
               });
+
               $targetImage.css({
                 cursor: 'pointer'
               });
+
               $magnifiedImage.css({
                 position: 'absolute',
-                maxWidth: 'none' // Override Open edX's max-width default
+                maxWidth: 'none'
               });
+
               $loupe.css({
                 cursor: 'none',
                 display: 'none',
@@ -91,38 +55,29 @@ data: |
                 overflow: 'hidden',
                 position: 'absolute',
                 bottom: 0,
-                left: -settings.width,
+                left: 0,
                 width: settings.width,
                 zIndex: settings.zIndex,
                 borderRadius: '50%',
                 background: '#FFF',
               });
-              $lightbox.css({
-                background: '#000',
-                left: 0,
-                position: 'absolute',
-                top: 0,
-                zIndex: settings.zIndex-1,
-                'opacity': 0.75,
-                'filter':' alpha(opacity=75)'
-              });
+
               $errorMessage
                 .text(settings.errorMessage)
                 .css({
                   height:settings.height,
                   width:settings.width
                 });
+
               $loader.css({
                   height:settings.height,
                   width:settings.width
                 });
 
-              ////////////
-              // Events //
-              ////////////
               $this.click(function(event) {
                 event.preventDefault();
               });
+
               $targetImage.click(function(event) {
                 if(!$loupe.hasClass('visible')) {
                   var left = event.pageX,
@@ -135,12 +90,10 @@ data: |
                   setTimeout(function() {
                     appendLoupe();
                     magnify(left, top);
-                    if(settings.lightbox == true) {
-                      appendLightbox();
-                    }
                   }, 100);
                 }
               });
+
               $targetImage.mousemove(function(event) {
                 var left = event.pageX,
                     top = event.pageY,
@@ -157,9 +110,6 @@ data: |
                 }
               }).click(function() {
                 detachLoupe();
-                if(settings.lightbox == true) {
-                  detachLightbox();
-                }
               }).mouseleave(function() {
                 pulseLoupe();
               });
@@ -168,43 +118,20 @@ data: |
               $(document).click(function(event) {
                 if($loupe.hasClass('visible')) {
                   detachLoupe();
-
-                  if(settings.lightbox == true) {
-                    detachLightbox();
-                  }
                 }
               });
 
-              // Resizes lightbox with window
+              // Resize with window
               $(window).resize(function() {
                 if($loupe.is(':visible')) {
-                  $loupe.css({
-                    left:$targetImage.offset().left+($targetImage.width()/2)-($loupe.width()/2),
-                    top:$targetImage.offset().top+($targetImage.height()/2)-($loupe.height()/2)
-                  });
-
                   $magnifiedImage.css({
                     left:-($magnifiedImage.width()/2)+($loupe.width()/2),
                     top:-($magnifiedImage.height()/2)+($loupe.height()/2)
                   });
-
-                  $lightbox.css({
-                    height:$(document).height(),
-                    width:$(document).width()
-                  });
                 }
               });
 
-              ///////////////////////
-              // Private functions //
-              ///////////////////////
               function magnify(left, top) {
-                $loupe
-                  .css({
-                    left:left-(settings.width/2),
-                    top:top-(settings.height/2)
-                  });
-
                 var heightDiff = $magnifiedImage.height()/$targetImage.height(),
                     widthDiff = $magnifiedImage.width()/$targetImage.width(),
                     magnifierTop = (-(top - $targetImage.offset().top)*heightDiff)+(settings.height/2),
@@ -218,7 +145,7 @@ data: |
 
               function appendLoupe() {
                 $loupe
-                  .appendTo($('div.zooming-image-place'))
+                  .appendTo($('.zooming-image-container'))
                   .append($magnifiedImage)
                   .fadeIn(settings.fadeSpeed, function() {
                     $(this).addClass('visible');
@@ -226,7 +153,7 @@ data: |
               };
 
               function getMagnifiedImage() {
-                var src = $this.attr('href');
+                var src = $this.data('src') ? $this.data('src') : $targetImage.attr('src');
                 $loader.appendTo($loupe);
 
                 $magnifiedImage
@@ -252,22 +179,6 @@ data: |
                 });
               };
 
-              function appendLightbox() {
-                $lightbox
-                  .appendTo('body')
-                  .css({
-                    height:$(document).height(),
-                    width:$(document).width()
-                  })
-                  .fadeIn(settings.fadeSpeed);
-              };
-
-              function detachLightbox() {
-                $lightbox.fadeOut(settings.fadeSpeed, function() {
-                  $(this).detach();
-                });
-              };
-
               function pulseLoupe() {
                 $loupe.fadeTo(150, 0.25, function() {
                   $(this).fadeTo(150, 1.0);
@@ -276,26 +187,16 @@ data: |
             });
           };
 
-          ////////////////////
-          // Default optons //
-          ////////////////////
-          $.fn.loupeAndLightbox.defaults = {
-            zIndex:1000,
-            width:150,
-            height:150,
-            border:'2px solid #ccc',
-            fadeSpeed:250,
-            lightbox:true,
-            errorMessage:'Image load error'
+          $.fn.loupe.defaults = {
+            zIndex: 1000,
+            width: 350,
+            height: 350,
+            border: '2px solid #ccc',
+            fadeSpeed: 250,
+            errorMessage: 'Image load error'
           };
         })(jQuery);
 
-        JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {
-          $('.loupe').loupeAndLightbox({
-            width: 350,
-            height: 350,
-            lightbox: false
-          });
-        });
-      // ]]></script>
-      <div id="ap_listener_added"></div>
+        $('.zooming-image').loupe();
+      //]]></script>
+      <!-- DO NOT REMOVE: end -->