Skip to content

Commit

Permalink
feat: Reimplement the Zooming Image Tool
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@arbrandes
arbrandes committed Dec 11, 2024
1 parent f96f926 commit b2aa1fe
Show file tree
Hide file tree
Showing 2 changed files with 202 additions and 7 deletions.
7 changes: 0 additions & 7 deletions cms/static/sass/elements/_vendor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
202 changes: 202 additions & 0 deletions xmodule/templates/html/zooming_image.yaml
View file
Original file line number Diff line number Diff line change
@@ -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 -->

0 comments on commit b2aa1fe

Please sign in to comment.