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.
openedx · Dec 11, 2024 · 7586e11 · 7586e11
1 parent ee30f1b
commit 7586e11
Show file tree

Hide file tree

Showing 2 changed files with 202 additions and 7 deletions.
diff --git 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
@@ -0,0 +1,202 @@
+---
+metadata:
+    display_name: Zooming Image Tool
+data: |
+      <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>
+      <!-- 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;">'),
+                  $errorMessage = $('<div class="lal_errorMessage">'),
+                  $loader = $('<div class="lal_loader">Loading...</div>');
+
+              $this.css({
+                cursor:'default'
+              });
+
+              $targetImage.css({
+                cursor: 'pointer'
+              });
+
+              $magnifiedImage.css({
+                position: 'absolute',
+                maxWidth: 'none'
+              });
+
+              $loupe.css({
+                cursor: 'none',
+                display: 'none',
+                border: settings.border,
+                height: settings.height,
+                overflow: 'hidden',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: settings.width,
+                zIndex: settings.zIndex,
+                borderRadius: '50%',
+                background: '#FFF',
+              });
+
+              $errorMessage
+                .text(settings.errorMessage)
+                .css({
+                  height:settings.height,
+                  width:settings.width
+                });
+
+              $loader.css({
+                  height:settings.height,
+                  width:settings.width
+                });
+
+              $this.click(function(event) {
+                event.preventDefault();
+              });
+
+              $targetImage.click(function(event) {
+                if(!$loupe.hasClass('visible')) {
+                  var left = event.pageX,
+                      top = event.pageY;
+
+                  if(!$magnifiedImage.hasClass('appended')) {
+                    getMagnifiedImage();
+                  }
+
+                  setTimeout(function() {
+                    appendLoupe();
+                    magnify(left, top);
+                  }, 100);
+                }
+              });
+
+              $targetImage.mousemove(function(event) {
+                var left = event.pageX,
+                    top = event.pageY,
+                    offsetTop = $targetImage.offset().top-($loupe.width()/2),
+                    offsetLeft = $targetImage.offset().left-($loupe.height()/2),
+                    offsetBottom = $targetImage.offset().top+$targetImage.height()+($loupe.height()/2),
+                    offsetRight = $targetImage.offset().left+$targetImage.width()+($loupe.width()/2);
+
+                if(left < offsetLeft || left > offsetRight || top < offsetTop || top > offsetBottom) {
+                  $targetImage.css({cursor:'default'});
+                } else {
+                  $targetImage.css({cursor:'crosshair'});
+                  magnify(left, top);
+                }
+              }).click(function() {
+                detachLoupe();
+              }).mouseleave(function() {
+                pulseLoupe();
+              });
+
+              // Detach when clicking outside of the loupe
+              $(document).click(function(event) {
+                if($loupe.hasClass('visible')) {
+                  detachLoupe();
+                }
+              });
+
+              // Resize with window
+              $(window).resize(function() {
+                if($loupe.is(':visible')) {
+                  $magnifiedImage.css({
+                    left:-($magnifiedImage.width()/2)+($loupe.width()/2),
+                    top:-($magnifiedImage.height()/2)+($loupe.height()/2)
+                  });
+                }
+              });
+
+              function magnify(left, top) {
+                var heightDiff = $magnifiedImage.height()/$targetImage.height(),
+                    widthDiff = $magnifiedImage.width()/$targetImage.width(),
+                    magnifierTop = (-(top - $targetImage.offset().top)*heightDiff)+(settings.height/2),
+                    magnifierLeft = (-(left - $targetImage.offset().left)*widthDiff)+(settings.width/2);
+
+                $magnifiedImage.css({
+                    top:magnifierTop,
+                    left:magnifierLeft
+                });
+              };
+
+              function appendLoupe() {
+                $loupe
+                  .appendTo($('.zooming-image-container'))
+                  .append($magnifiedImage)
+                  .fadeIn(settings.fadeSpeed, function() {
+                    $(this).addClass('visible');
+                  });
+              };
+
+              function getMagnifiedImage() {
+                var src = $this.data('src') ? $this.data('src') : $targetImage.attr('src');
+                $loader.appendTo($loupe);
+
+                $magnifiedImage
+                  .load(function() {
+                    $(this).addClass('appended');
+                    $loader.detach();
+                  })
+                  .error(function () {
+                    $(this).hide();
+                    $loupe
+                      .append($errorMessage)
+                      .addClass('lal_loadError');
+                    $loader.detach();
+                  })
+                  .attr('src', src);
+              };
+
+              function detachLoupe() {
+                $loupe.fadeOut(settings.fadeSpeed, function() {
+                  $(this)
+                    .removeClass('visible')
+                    .detach();
+                });
+              };
+
+              function pulseLoupe() {
+                $loupe.fadeTo(150, 0.25, function() {
+                  $(this).fadeTo(150, 1.0);
+                });
+              };
+            });
+          };
+
+          $.fn.loupe.defaults = {
+            zIndex: 1000,
+            width: 350,
+            height: 350,
+            border: '2px solid #ccc',
+            fadeSpeed: 250,
+            errorMessage: 'Image load error'
+          };
+        })(jQuery);
+
+        $('.zooming-image').loupe();
+      //]]></script>
+      <!-- DO NOT REMOVE: end -->