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

* There can now be two or more instances of the tool in the same unit.

This also removes some CSS left over from the previous iteration.
This commit is contained in:
Adolfo R. Brandes
2024-12-11 09:45:04 -03:00
committed by Adolfo R. Brandes
parent 7f80c1afa1
commit f4d110c896
2 changed files with 239 additions and 7 deletions

View File

@@ -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)

File diff suppressed because one or more lines are too long