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 new file mode 100644 index 000000000000..599268ed021c --- /dev/null +++ b/xmodule/templates/html/zooming_image.yaml @@ -0,0 +1,202 @@ +--- +metadata: + display_name: Zooming Image Tool +data: | +
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.
+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 italics accordingly:
++ <div class="zooming-image-container" style="position: relative;"> + <a class="zooming-image" data-src="(Optional) URL to the magnified image"> + <img src="URL to the regular image" /> + </a> + </div> ++
If a magnified image is not provided, the regular one will be used at its native size.
+Feel free to modify the example below for your own use, but take care not to remove the included Javascript.
+ +