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:
committed by
Adolfo R. Brandes
parent
7f80c1afa1
commit
f4d110c896
@@ -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)
|
||||
|
||||
239
xmodule/templates/html/zooming_image.yaml
Normal file
239
xmodule/templates/html/zooming_image.yaml
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user