From 059f6aa866159bca087d9eb3e499495af2e57a32 Mon Sep 17 00:00:00 2001
From: Nosolored <nosolored@gmail.com>
Date: Mon, 17 Feb 2020 10:04:06 +0100
Subject: [PATCH] Add jquery.elevatezoom.js to exercises

---
 main/exercise/UniqueAnswerImage.php           |   73 +-
 main/exercise/exercise_submit.php             |   32 +
 main/exercise/question.class.php              |   62 +
 main/inc/lib/exercise.lib.php                 |    4 +-
 main/inc/lib/javascript/jquery.elevatezoom.js | 1790 +++++++++++++++++
 main/lp/lp_view.php                           |   26 +
 6 files changed, 1983 insertions(+), 4 deletions(-)
 create mode 100644 main/inc/lib/javascript/jquery.elevatezoom.js

diff --git a/main/exercise/UniqueAnswerImage.php b/main/exercise/UniqueAnswerImage.php
index bfd3ee02fc..965f964a38 100644
--- a/main/exercise/UniqueAnswerImage.php
+++ b/main/exercise/UniqueAnswerImage.php
@@ -59,6 +59,64 @@ class UniqueAnswerImage extends UniqueAnswer
 
         $html = '<div class="alert alert-success" role="alert">'.
                 get_lang('UniqueAnswerImagePreferredSize200x150').'</div>';
+        
+        $zoomOptions = api_get_configuration_value('zoom_images_quiz');
+        if (isset($zoomOptions['options'])) {
+            $finderFolder = api_get_path(WEB_PATH).'vendor/studio-42/elfinder/';
+            $html .= '<!-- elFinder CSS (REQUIRED) -->';
+            $html .= '<link rel="stylesheet" type="text/css" media="screen" href="'.$finderFolder.'css/elfinder.full.css">';
+            $html .= '<link rel="stylesheet" type="text/css" media="screen" href="'.$finderFolder.'css/theme.css">';
+            
+            $html .= '<!-- elFinder JS (REQUIRED) -->';
+            $html .= '<script type="text/javascript" src="'.$finderFolder.'js/elfinder.full.js"></script>';
+            
+            $html .= '<!-- elFinder translation (OPTIONAL) -->';
+            $language = 'en';
+            $platformLanguage = api_get_interface_language();
+            $iso = api_get_language_isocode($platformLanguage);
+            $filePart = "vendor/studio-42/elfinder/js/i18n/elfinder.$iso.js";
+            $file = api_get_path(SYS_PATH).$filePart;
+            $includeFile = '';
+            if (file_exists($file)) {
+                $includeFile = '<script type="text/javascript" src="'.api_get_path(WEB_PATH).$filePart.'"></script>';
+                $language = $iso;
+            }
+            $html .= $includeFile;
+
+            $html .= '<script type="text/javascript" charset="utf-8">
+            $(document).ready(function () {
+                $(".add_img_link").on("click", function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    var name = $(this).prop("name");
+                    var id = parseInt(name.match(/[0-9]+/));
+
+                    $([document.documentElement, document.body]).animate({
+                        scrollTop: $("#elfinder").offset().top
+                    }, 1000);
+
+                    var elf = $("#elfinder").elfinder({
+                        url : "'.api_get_path(WEB_LIBRARY_PATH).'elfinder/connectorAction.php?'.api_get_cidreq().'",
+                        getFileCallback: function(file) {
+                            var filePath = file; //file contains the relative url.
+                            var imageZoom = filePath.url;
+                            var iname = "answer["+id+"]";
+
+                            CKEDITOR.instances[iname].insertHtml(\'<img id="zoom_picture" class="zoom_picture" src="\'+imageZoom+\'" data-zoom-image="\'+imageZoom+\'" width="200px" height="150px" />\');
+
+                            $("#elfinder").elfinder("destroy"); //close the window after image is selected
+                        },
+                        startPathHash: "l2_Lw", // Sets the course driver as default
+                        resizable: false,
+                        lang: "'.$language.'"
+                    }).elfinder("instance"+id);
+                });
+            });
+            </script>';
+            $html .= '<div id="elfinder"></div>';
+        }
+
         $html .= '<table class="table table-striped table-hover">
             <thead>
                 <tr style="text-align: center;">
@@ -180,7 +238,15 @@ class UniqueAnswerImage extends UniqueAnswer
                 'counter['.$i.']'
             );
             $renderer->setElementTemplate(
-                '<td><!-- BEGIN error --><span class="form_error">{error}</span><!-- END error --><br/>{element}</td>',
+                '<td><!-- BEGIN error --><span class="form_error">{error}</span><!-- END error --><br/>{element}'.
+                    (isset($zoomOptions['options']) ?
+                    '<br><div class="form-group ">
+                        <label for="question_admin_form_btn_add_img['.$i.']" class="col-sm-2 control-label"></label>
+                        <div class="col-sm-8">
+                            <button class="add_img_link btn btn-info btn-sm" name="btn_add_img['.$i.']" type="submit" id="question_admin_form_btn_add_img['.$i.']"><em class="fa fa-plus"></em> Agregar imagen con zoom</button>
+                        </div>
+                        <div class="col-sm-2"></div>
+                    </div>' : '').'</td>',
                 'answer['.$i.']'
             );
             $renderer->setElementTemplate(
@@ -196,14 +262,15 @@ class UniqueAnswerImage extends UniqueAnswer
             $answerNumber->freeze();
 
             $form->addElement('radio', 'correct', null, null, $i, 'class="checkbox"');
+
             $form->addHtmlEditor('answer['.$i.']', null, null, false, $editorConfig);
 
             $form->addRule('answer['.$i.']', get_lang('ThisFieldIsRequired'), 'required');
 
             switch ($objExercise->getFeedbackType()) {
                 case EXERCISE_FEEDBACK_TYPE_DIRECT:
-                    $this->setDirectOptions($i, $form, $renderer, $selectLpId, $selectQuestion);
-                    break;
+                    //$this->setDirectOptions($i, $form, $renderer, $selectLpId, $selectQuestion);
+                    //break;
                 case EXERCISE_FEEDBACK_TYPE_POPUP:
                 default:
                     $form->addHtmlEditor('comment['.$i.']', null, null, false, $editorConfig);
diff --git a/main/exercise/exercise_submit.php b/main/exercise/exercise_submit.php
index 997b311475..ce5a021c29 100755
--- a/main/exercise/exercise_submit.php
+++ b/main/exercise/exercise_submit.php
@@ -79,6 +79,38 @@ if (api_get_setting('enable_record_audio') === 'true') {
     $htmlHeadXtra[] = api_get_js('record_audio/record_audio.js');
 }
 
+$zoomOptions = api_get_configuration_value('zoom_images_quiz');
+if (isset($zoomOptions['options']) && !in_array($origin, ['embeddable', 'noheader'])) {
+    $options = $zoomOptions['options'];
+    $htmlHeadXtra[] = '<script src="'.api_get_path(WEB_LIBRARY_JS_PATH).'jquery.elevatezoom.js"></script>';
+    $htmlHeadXtra[] = '<script>
+        $(document).ready(function() {
+            $("img").each(function() {
+                var attr = $(this).attr("data-zoom-image");
+                // For some browsers, `attr` is undefined; for others,
+                // `attr` is false.  Check for both.
+                if (typeof attr !== typeof undefined && attr !== false) {
+                    $(this).elevateZoom({
+                        scrollZoom : true,
+                        cursor: "crosshair",
+                        tint:true,
+                        tintColour:\'#CCC\',
+                        tintOpacity:0.5,
+                        zoomWindowWidth:'.$options['zoomWindowWidth'].',
+                        zoomWindowHeight:'.$options['zoomWindowHeight'].',
+                        zoomWindowPosition: 7
+                    });
+                }
+            });
+
+            $(document).contextmenu(function() {
+                return false;
+            })
+
+        });
+    </script>';
+}
+
 $template = new Template();
 
 // General parameters passed via POST/GET
diff --git a/main/exercise/question.class.php b/main/exercise/question.class.php
index f26d63ff1c..da79b6568a 100755
--- a/main/exercise/question.class.php
+++ b/main/exercise/question.class.php
@@ -1608,6 +1608,60 @@ abstract class Question
                 .media { display:none;}
             </style>';
 
+        $zoomOptions = api_get_configuration_value('zoom_images_quiz');
+        if (isset($zoomOptions['options'])) {
+            $finderFolder = api_get_path(WEB_PATH).'vendor/studio-42/elfinder/';
+            echo '<!-- elFinder CSS (REQUIRED) -->';
+            echo '<link rel="stylesheet" type="text/css" media="screen" href="'.$finderFolder.'css/elfinder.full.css">';
+            echo '<link rel="stylesheet" type="text/css" media="screen" href="'.$finderFolder.'css/theme.css">';
+
+            echo '<!-- elFinder JS (REQUIRED) -->';
+            echo '<script type="text/javascript" src="'.$finderFolder.'js/elfinder.full.js"></script>';
+
+            echo '<!-- elFinder translation (OPTIONAL) -->';
+            $language = 'en';
+            $platformLanguage = api_get_interface_language();
+            $iso = api_get_language_isocode($platformLanguage);
+            $filePart = "vendor/studio-42/elfinder/js/i18n/elfinder.$iso.js";
+            $file = api_get_path(SYS_PATH).$filePart;
+            $includeFile = '';
+            if (file_exists($file)) {
+                $includeFile = '<script type="text/javascript" src="'.api_get_path(WEB_PATH).$filePart.'"></script>';
+                $language = $iso;
+            }
+            echo $includeFile;
+
+            echo '<script type="text/javascript" charset="utf-8">
+            $(document).ready(function () {
+                $(".create_img_link").click(function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+                    var imageZoom = $("input[name=\'imageZoom\']").val();
+                    var imageWidth = $("input[name=\'imageWidth\']").val();
+                    CKEDITOR.instances.questionDescription.insertHtml(\'<img id="zoom_picture" class="zoom_picture" src="\'+imageZoom+\'" data-zoom-image="\'+imageZoom+\'" width="\'+imageWidth+\'px"/>\');
+                });
+
+                $("input[name=\'imageZoom\']").on("click", function(){
+                    console.log("click en campo");
+                    var elf = $("#elfinder").elfinder({
+                        url : "'.api_get_path(WEB_LIBRARY_PATH).'elfinder/connectorAction.php?'.api_get_cidreq().'",
+                        getFileCallback: function(file) {
+                            var filePath = file; //file contains the relative url.
+                            console.log(filePath);
+                            var imgPath = "<img src = \'"+filePath+"\'/>";
+                            $("input[name=\'imageZoom\']").val(filePath.url);
+                            $("#elfinder").remove(); //close the window after image is selected
+                        },
+                        startPathHash: "l2_Lw", // Sets the course driver as default
+                        resizable: false,
+                        lang: "'.$language.'"
+                    }).elfinder("instance");
+                });
+            });
+            </script>';
+            echo '<div id="elfinder"></div>';
+        }
+
         // question name
         if (api_get_configuration_value('save_titles_as_html')) {
             $editorConfig = ['ToolbarSet' => 'TitleAsHtml'];
@@ -1644,6 +1698,14 @@ abstract class Question
 
         $form->addButtonAdvancedSettings('advanced_params');
         $form->addElement('html', '<div id="advanced_params_options" style="display:none">');
+        
+        if (isset($zoomOptions['options'])) {
+            $form->addElement('text', 'imageZoom', 'URL imagen');
+            $form->addElement('text', 'imageWidth', 'Ancho en px');
+
+            $form->addButton('btn_create_img','Añadir al editor', 'plus', 'info', 'small', 'create_img_link');
+        }
+
         $form->addHtmlEditor(
             'questionDescription',
             get_lang('QuestionDescription'),
diff --git a/main/inc/lib/exercise.lib.php b/main/inc/lib/exercise.lib.php
index 818fa7154a..89be18189a 100644
--- a/main/inc/lib/exercise.lib.php
+++ b/main/inc/lib/exercise.lib.php
@@ -523,7 +523,9 @@ class ExerciseLib
                             }
                         }
 
-                        $answer = Security::remove_XSS($answer, STUDENT);
+                        if ($answerType != UNIQUE_ANSWER_IMAGE) {
+                            $answer = Security::remove_XSS($answer, STUDENT);
+                        }
                         $s .= Display::input(
                             'hidden',
                             'choice2['.$questionId.']',
diff --git a/main/inc/lib/javascript/jquery.elevatezoom.js b/main/inc/lib/javascript/jquery.elevatezoom.js
new file mode 100644
index 0000000000..343a886e47
--- /dev/null
+++ b/main/inc/lib/javascript/jquery.elevatezoom.js
@@ -0,0 +1,1790 @@
+/*
+ *	jQuery elevateZoom 3.0.8
+ *	Demo's and documentation:
+ *	www.elevateweb.co.uk/image-zoom
+ *
+ *	Copyright (c) 2012 Andrew Eades
+ *	www.elevateweb.co.uk
+ *
+ *	Dual licensed under the GPL and MIT licenses.
+ *	http://en.wikipedia.org/wiki/MIT_License
+ *	http://en.wikipedia.org/wiki/GNU_General_Public_License
+ *
+
+/*
+ *	jQuery elevateZoom 3.0.3
+ *	Demo's and documentation:
+ *	www.elevateweb.co.uk/image-zoom
+ *
+ *	Copyright (c) 2012 Andrew Eades
+ *	www.elevateweb.co.uk
+ *
+ *	Dual licensed under the GPL and MIT licenses.
+ *	http://en.wikipedia.org/wiki/MIT_License
+ *	http://en.wikipedia.org/wiki/GNU_General_Public_License
+ */
+
+
+if ( typeof Object.create !== 'function' ) {
+	Object.create = function( obj ) {
+		function F() {};
+		F.prototype = obj;
+		return new F();
+	};
+}
+
+(function( $, window, document, undefined ) {
+	var ElevateZoom = {
+			init: function( options, elem ) {
+				var self = this;
+
+				self.elem = elem;
+				self.$elem = $( elem );
+
+				self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src");
+
+				self.options = $.extend( {}, $.fn.elevateZoom.options, options );
+
+				//TINT OVERRIDE SETTINGS
+				if(self.options.tint) {
+					self.options.lensColour = "none", //colour of the lens background
+					self.options.lensOpacity =  "1" //opacity of the lens
+				}
+				//INNER OVERRIDE SETTINGS
+				if(self.options.zoomType == "inner") {self.options.showLens = false;}
+
+
+				//Remove alt on hover
+
+				self.$elem.parent().removeAttr('title').removeAttr('alt');
+
+				self.zoomImage = self.imageSrc;
+
+				self.refresh( 1 );
+
+
+
+				//Create the image swap from the gallery 
+				$('#'+self.options.gallery + ' a').click( function(e) { 
+
+					//Set a class on the currently active gallery image
+					if(self.options.galleryActiveClass){
+						$('#'+self.options.gallery + ' a').removeClass(self.options.galleryActiveClass);
+						$(this).addClass(self.options.galleryActiveClass);
+					}
+					//stop any link on the a tag from working
+					e.preventDefault();
+
+					//call the swap image function            
+					if($(this).data("zoom-image")){self.zoomImagePre = $(this).data("zoom-image")}
+					else{self.zoomImagePre = $(this).data("image");}
+					self.swaptheimage($(this).data("image"), self.zoomImagePre);
+					return false;
+				});
+
+			},
+
+			refresh: function( length ) {
+				var self = this;
+
+				setTimeout(function() {
+					self.fetch(self.imageSrc);
+
+				}, length || self.options.refresh );
+			},
+
+			fetch: function(imgsrc) {
+				//get the image
+				var self = this;
+				var newImg = new Image();
+				newImg.onload = function() {
+					//set the large image dimensions - used to calculte ratio's
+					self.largeWidth = newImg.width;
+					self.largeHeight = newImg.height;
+					//once image is loaded start the calls
+					self.startZoom();
+					self.currentImage = self.imageSrc;
+					//let caller know image has been loaded
+					self.options.onZoomedImageLoaded(self.$elem);
+				}
+				newImg.src = imgsrc; // this must be done AFTER setting onload
+
+				return;
+
+			},
+
+			startZoom: function( ) {
+				var self = this;
+				//get dimensions of the non zoomed image
+				self.nzWidth = self.$elem.width();
+				self.nzHeight = self.$elem.height();
+
+				//activated elements
+				self.isWindowActive = false;
+				self.isLensActive = false;
+				self.isTintActive = false;
+				self.overWindow = false;    
+
+				//CrossFade Wrappe
+				if(self.options.imageCrossfade){
+					self.zoomWrap = self.$elem.wrap('<div style="height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;" class="zoomWrapper" />');        
+					self.$elem.css('position', 'absolute'); 
+				}
+
+				self.zoomLock = 1;
+				self.scrollingLock = false;
+				self.changeBgSize = false;
+				self.currentZoomLevel = self.options.zoomLevel;
+
+
+				//get offset of the non zoomed image
+				self.nzOffset = self.$elem.offset();
+				//calculate the width ratio of the large/small image
+				self.widthRatio = (self.largeWidth/self.currentZoomLevel) / self.nzWidth;
+				self.heightRatio = (self.largeHeight/self.currentZoomLevel) / self.nzHeight; 
+
+
+				//if window zoom        
+				if(self.options.zoomType == "window") {
+					self.zoomWindowStyle = "overflow: hidden;"
+						+ "background-position: 0px 0px;text-align:center;"  
+						+ "background-color: " + String(self.options.zoomWindowBgColour)            
+						+ ";width: " + String(self.options.zoomWindowWidth) + "px;"
+						+ "height: " + String(self.options.zoomWindowHeight)
+						+ "px;float: left;"
+						+ "background-size: "+ self.largeWidth/self.currentZoomLevel+ "px " +self.largeHeight/self.currentZoomLevel + "px;"
+						+ "display: none;z-index:100;"
+						+ "border: " + String(self.options.borderSize) 
+						+ "px solid " + self.options.borderColour 
+						+ ";background-repeat: no-repeat;"
+						+ "position: absolute;";
+				}    
+
+
+				//if inner  zoom    
+				if(self.options.zoomType == "inner") {
+					//has a border been put on the image? Lets cater for this
+
+					var borderWidth = self.$elem.css("border-left-width");
+
+					self.zoomWindowStyle = "overflow: hidden;"
+						+ "margin-left: " + String(borderWidth) + ";" 
+						+ "margin-top: " + String(borderWidth) + ";"         
+						+ "background-position: 0px 0px;"
+						+ "width: " + String(self.nzWidth) + "px;"
+						+ "height: " + String(self.nzHeight) + "px;"
+						+ "px;float: left;"
+						+ "display: none;"
+						+ "cursor:"+(self.options.cursor)+";"
+						+ "px solid " + self.options.borderColour 
+						+ ";background-repeat: no-repeat;"
+						+ "position: absolute;";
+				}    
+
+
+
+				//lens style for window zoom
+				if(self.options.zoomType == "window") {
+
+
+					// adjust images less than the window height
+
+					if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
+						lensHeight = self.nzHeight;              
+					}
+					else{
+						lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
+					}
+					if(self.largeWidth < self.options.zoomWindowWidth){
+						lensWidth = self.nzWidth;
+					}       
+					else{
+						lensWidth =  (self.options.zoomWindowWidth/self.widthRatio);
+					}
+
+
+					self.lensStyle = "background-position: 0px 0px;width: " + String((self.options.zoomWindowWidth)/self.widthRatio) + "px;height: " + String((self.options.zoomWindowHeight)/self.heightRatio)
+					+ "px;float: right;display: none;"
+					+ "overflow: hidden;"
+					+ "z-index: 999;"   
+					+ "-webkit-transform: translateZ(0);"               
+					+ "opacity:"+(self.options.lensOpacity)+";filter: alpha(opacity = "+(self.options.lensOpacity*100)+"); zoom:1;"
+					+ "width:"+lensWidth+"px;"
+					+ "height:"+lensHeight+"px;"
+					+ "background-color:"+(self.options.lensColour)+";"					
+					+ "cursor:"+(self.options.cursor)+";"
+					+ "border: "+(self.options.lensBorderSize)+"px" +
+					" solid "+(self.options.lensBorderColour)+";background-repeat: no-repeat;position: absolute;";
+				} 
+
+
+				//tint style
+				self.tintStyle = "display: block;"
+					+ "position: absolute;"
+					+ "background-color: "+self.options.tintColour+";"	
+					+ "filter:alpha(opacity=0);"		
+					+ "opacity: 0;"	
+					+ "width: " + self.nzWidth + "px;"
+					+ "height: " + self.nzHeight + "px;"
+
+					;
+
+				//lens style for lens zoom with optional round for modern browsers
+				self.lensRound = '';
+
+				if(self.options.zoomType == "lens") {
+
+					self.lensStyle = "background-position: 0px 0px;"
+						+ "float: left;display: none;"
+						+ "border: " + String(self.options.borderSize) + "px solid " + self.options.borderColour+";"
+						+ "width:"+ String(self.options.lensSize) +"px;"
+						+ "height:"+ String(self.options.lensSize)+"px;"
+						+ "background-repeat: no-repeat;position: absolute;";
+
+
+				}
+
+
+				//does not round in all browsers
+				if(self.options.lensShape == "round") {
+					self.lensRound = "border-top-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
+					+ "border-top-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
+					+ "border-bottom-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
+					+ "border-bottom-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;";
+
+				}
+
+				//create the div's                                                + ""
+				//self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
+
+				self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');
+				$('body').append(self.zoomContainer);	
+
+
+				//this will add overflow hidden and contrain the lens on lens mode       
+				if(self.options.containLensZoom && self.options.zoomType == "lens"){
+					self.zoomContainer.css("overflow", "hidden");
+				}
+				if(self.options.zoomType != "inner") {
+					self.zoomLens = $("<div class='zoomLens' style='" + self.lensStyle + self.lensRound +"'>&nbsp;</div>")
+					.appendTo(self.zoomContainer)
+					.click(function () {
+						self.$elem.trigger('click');
+					});
+
+
+					if(self.options.tint) {
+						self.tintContainer = $('<div/>').addClass('tintContainer');	
+						self.zoomTint = $("<div class='zoomTint' style='"+self.tintStyle+"'></div>");
+
+
+						self.zoomLens.wrap(self.tintContainer);
+
+
+						self.zoomTintcss = self.zoomLens.after(self.zoomTint);	
+
+						//if tint enabled - set an image to show over the tint
+
+						self.zoomTintImage = $('<img style="position: absolute; left: 0px; top: 0px; max-width: none; width: '+self.nzWidth+'px; height: '+self.nzHeight+'px;" src="'+self.imageSrc+'">')
+						.appendTo(self.zoomLens)
+						.click(function () {
+
+							self.$elem.trigger('click');
+						});
+
+					}          
+
+				}
+
+
+
+
+
+
+
+				//create zoom window 
+				if(isNaN(self.options.zoomWindowPosition)){
+					self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'>&nbsp;</div>")
+					.appendTo('body')
+					.click(function () {
+						self.$elem.trigger('click');
+					});
+				}else{
+					self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'>&nbsp;</div>")
+					.appendTo(self.zoomContainer)
+					.click(function () {
+						self.$elem.trigger('click');
+					});
+				}              
+				self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);
+				self.zoomWindow.wrap(self.zoomWindowContainer);
+
+
+				//  self.captionStyle = "text-align: left;background-color: black;color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px";                                                                                                                                                                                                                                          
+				// self.zoomCaption = $('<div class="elevatezoom-caption" style="'+self.captionStyle+'display: block; width: 280px;">INSERT ALT TAG</div>').appendTo(self.zoomWindow.parent());
+
+				if(self.options.zoomType == "lens") {
+					self.zoomLens.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 
+				}
+				if(self.options.zoomType == "window") {
+					self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 
+				}
+				if(self.options.zoomType == "inner") {
+					self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 
+				}
+				/*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/
+				//touch events
+				self.$elem.bind('touchmove', function(e){    
+					e.preventDefault();
+					var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
+					self.setPosition(touch);
+
+				});  
+				self.zoomContainer.bind('touchmove', function(e){ 
+					if(self.options.zoomType == "inner") {
+						self.showHideWindow("show");
+
+					}
+					e.preventDefault();
+					var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
+					self.setPosition(touch); 
+
+				});  	
+				self.zoomContainer.bind('touchend', function(e){ 
+					self.showHideWindow("hide");
+					if(self.options.showLens) {self.showHideLens("hide");}
+					if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
+				});  	
+
+				self.$elem.bind('touchend', function(e){ 
+					self.showHideWindow("hide");
+					if(self.options.showLens) {self.showHideLens("hide");}
+					if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
+				});  	
+				if(self.options.showLens) {
+					self.zoomLens.bind('touchmove', function(e){ 
+
+						e.preventDefault();
+						var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
+						self.setPosition(touch); 
+					});    
+
+
+					self.zoomLens.bind('touchend', function(e){ 
+						self.showHideWindow("hide");
+						if(self.options.showLens) {self.showHideLens("hide");}
+						if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
+					});  
+				}
+				//Needed to work in IE
+				self.$elem.bind('mousemove', function(e){   
+					if(self.overWindow == false){self.setElements("show");}
+					//make sure on orientation change the setposition is not fired
+					if(self.lastX !== e.clientX || self.lastY !== e.clientY){
+						self.setPosition(e);
+						self.currentLoc = e;
+					}   
+					self.lastX = e.clientX;
+					self.lastY = e.clientY;    
+
+				});  	
+
+				self.zoomContainer.bind('mousemove', function(e){ 
+
+					if(self.overWindow == false){self.setElements("show");} 
+
+					//make sure on orientation change the setposition is not fired 
+					if(self.lastX !== e.clientX || self.lastY !== e.clientY){
+						self.setPosition(e);
+						self.currentLoc = e;
+					}   
+					self.lastX = e.clientX;
+					self.lastY = e.clientY;    
+				});  	
+				if(self.options.zoomType != "inner") {
+					self.zoomLens.bind('mousemove', function(e){      
+						//make sure on orientation change the setposition is not fired
+						if(self.lastX !== e.clientX || self.lastY !== e.clientY){
+							self.setPosition(e);
+							self.currentLoc = e;
+						}   
+						self.lastX = e.clientX;
+						self.lastY = e.clientY;    
+					});
+				}
+				if(self.options.tint && self.options.zoomType != "inner") {
+					self.zoomTint.bind('mousemove', function(e){ 
+						//make sure on orientation change the setposition is not fired
+						if(self.lastX !== e.clientX || self.lastY !== e.clientY){
+							self.setPosition(e);
+							self.currentLoc = e;
+						}   
+						self.lastX = e.clientX;
+						self.lastY = e.clientY;    
+					});
+
+				}
+				if(self.options.zoomType == "inner") {
+					self.zoomWindow.bind('mousemove', function(e) {
+						//self.overWindow = true;
+						//make sure on orientation change the setposition is not fired
+						if(self.lastX !== e.clientX || self.lastY !== e.clientY){
+							self.setPosition(e);
+							self.currentLoc = e;
+						}   
+						self.lastX = e.clientX;
+						self.lastY = e.clientY;    
+					});
+
+				}
+
+
+				//  lensFadeOut: 500,  zoomTintFadeIn
+				self.zoomContainer.add(self.$elem).mouseenter(function(){
+
+					if(self.overWindow == false){self.setElements("show");} 
+
+
+				}).mouseleave(function(){
+					if(!self.scrollLock){
+						self.setElements("hide");
+            self.options.onDestroy(self.$elem);
+					}
+				});
+				//end ove image
+
+
+
+
+
+				if(self.options.zoomType != "inner") {
+					self.zoomWindow.mouseenter(function(){
+						self.overWindow = true;   
+						self.setElements("hide");                  
+					}).mouseleave(function(){
+
+						self.overWindow = false;
+					});
+				}
+				//end ove image
+
+
+
+//				var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
+
+				//      $(this).empty();    
+				//    return false;
+
+				//fix for initial zoom setting
+				if (self.options.zoomLevel != 1){
+					//	self.changeZoomLevel(self.currentZoomLevel);
+				}
+				//set the min zoomlevel
+				if(self.options.minZoomLevel){
+					self.minZoomLevel = self.options.minZoomLevel;
+				}
+				else{
+					self.minZoomLevel = self.options.scrollZoomIncrement * 2;
+				}
+
+
+				if(self.options.scrollZoom){
+
+
+					self.zoomContainer.add(self.$elem).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e){
+
+
+//						in IE there is issue with firing of mouseleave - So check whether still scrolling
+//						and on mouseleave check if scrolllock          
+						self.scrollLock = true;
+						clearTimeout($.data(this, 'timer'));
+						$.data(this, 'timer', setTimeout(function() {
+							self.scrollLock = false;
+							//do something
+						}, 250));
+
+						var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1
+
+
+						//this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
+						//   e.preventDefault();
+
+
+						e.stopImmediatePropagation();
+						e.stopPropagation();
+						e.preventDefault();
+
+
+						if(theEvent /120 > 0) {
+							//scrolling up
+							if(self.currentZoomLevel >= self.minZoomLevel){ 
+								self.changeZoomLevel(self.currentZoomLevel-self.options.scrollZoomIncrement);        
+							}
+
+						}
+						else{
+							//scrolling down
+
+
+							if(self.options.maxZoomLevel){
+								if(self.currentZoomLevel <= self.options.maxZoomLevel){           
+									self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
+								}
+							}
+							else{
+								//andy 
+
+								self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
+							}
+
+						}
+						return false;
+					});
+				}
+
+
+			},
+			setElements: function(type) {
+				var self = this;
+        if(!self.options.zoomEnabled){return false;}
+				if(type=="show"){
+					if(self.isWindowSet){
+						if(self.options.zoomType == "inner") {self.showHideWindow("show");}
+						if(self.options.zoomType == "window") {self.showHideWindow("show");}
+						if(self.options.showLens) {self.showHideLens("show");}
+						if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("show");
+						}
+					}
+				}
+
+				if(type=="hide"){
+					if(self.options.zoomType == "window") {self.showHideWindow("hide");}
+					if(!self.options.tint) {self.showHideWindow("hide");}
+					if(self.options.showLens) {self.showHideLens("hide");}
+					if(self.options.tint) {	self.showHideTint("hide");}
+				}   
+			},
+			setPosition: function(e) {
+      
+				var self = this;
+        
+        if(!self.options.zoomEnabled){return false;}
+
+				//recaclc offset each time in case the image moves
+				//this can be caused by other on page elements
+				self.nzHeight = self.$elem.height();
+				self.nzWidth = self.$elem.width();
+				self.nzOffset = self.$elem.offset();
+
+				if(self.options.tint && self.options.zoomType != "inner") {
+					self.zoomTint.css({ top: 0});
+					self.zoomTint.css({ left: 0});
+				}
+				//set responsive       
+				//will checking if the image needs changing before running this code work faster?
+				if(self.options.responsive && !self.options.scrollZoom){
+					if(self.options.showLens){ 
+						if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
+							lensHeight = self.nzHeight;              
+						}
+						else{
+							lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
+						}
+						if(self.largeWidth < self.options.zoomWindowWidth){
+							lensWidth = self.nzWidth;
+						}       
+						else{
+							lensWidth =  (self.options.zoomWindowWidth/self.widthRatio);
+						}
+						self.widthRatio = self.largeWidth / self.nzWidth;
+						self.heightRatio = self.largeHeight / self.nzHeight;        
+						if(self.options.zoomType != "lens") {
+
+
+							//possibly dont need to keep recalcalculating
+							//if the lens is heigher than the image, then set lens size to image size
+							if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
+								lensHeight = self.nzHeight;  
+
+							}
+							else{
+								lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
+							}
+
+							if(self.nzWidth < self.options.zoomWindowHeight/self.heightRatio){
+								lensWidth = self.nzWidth;
+							}       
+							else{
+								lensWidth =  String((self.options.zoomWindowWidth/self.widthRatio));
+							}            
+
+							self.zoomLens.css('width', lensWidth);    
+							self.zoomLens.css('height', lensHeight); 
+
+							if(self.options.tint){    
+								self.zoomTintImage.css('width', self.nzWidth);    
+								self.zoomTintImage.css('height', self.nzHeight); 
+							}
+
+						}                     
+						if(self.options.zoomType == "lens") {  
+
+							self.zoomLens.css({ width: String(self.options.lensSize) + 'px', height: String(self.options.lensSize) + 'px' })      
+
+
+						}        
+						//end responsive image change
+					}
+				}
+
+				//container fix
+				self.zoomContainer.css({ top: self.nzOffset.top});
+				self.zoomContainer.css({ left: self.nzOffset.left});
+				self.mouseLeft = parseInt(e.pageX - self.nzOffset.left);
+				self.mouseTop = parseInt(e.pageY - self.nzOffset.top);
+				//calculate the Location of the Lens
+
+				//calculate the bound regions - but only if zoom window
+				if(self.options.zoomType == "window") {
+					self.Etoppos = (self.mouseTop < (self.zoomLens.height()/2));
+					self.Eboppos = (self.mouseTop > self.nzHeight - (self.zoomLens.height()/2)-(self.options.lensBorderSize*2));
+					self.Eloppos = (self.mouseLeft < 0+((self.zoomLens.width()/2))); 
+					self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.zoomLens.width()/2)-(self.options.lensBorderSize*2)));  
+				}
+				//calculate the bound regions - but only for inner zoom
+				if(self.options.zoomType == "inner"){ 
+					self.Etoppos = (self.mouseTop < ((self.nzHeight/2)/self.heightRatio) );
+					self.Eboppos = (self.mouseTop > (self.nzHeight - ((self.nzHeight/2)/self.heightRatio)));
+					self.Eloppos = (self.mouseLeft < 0+(((self.nzWidth/2)/self.widthRatio)));
+					self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth/2)/self.widthRatio-(self.options.lensBorderSize*2)));  
+				}
+
+				// if the mouse position of the slider is one of the outerbounds, then hide  window and lens
+				if (self.mouseLeft < 0 || self.mouseTop < 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight ) {				          
+					self.setElements("hide");
+					return;
+				}
+				//else continue with operations
+				else {
+
+
+					//lens options
+					if(self.options.showLens) {
+						//		self.showHideLens("show");
+						//set background position of lens
+						self.lensLeftPos = String(Math.floor(self.mouseLeft - self.zoomLens.width() / 2));
+						self.lensTopPos = String(Math.floor(self.mouseTop - self.zoomLens.height() / 2));
+
+
+					}
+					//adjust the background position if the mouse is in one of the outer regions 
+
+					//Top region
+					if(self.Etoppos){
+						self.lensTopPos = 0;
+					}
+					//Left Region
+					if(self.Eloppos){
+						self.windowLeftPos = 0;
+						self.lensLeftPos = 0;
+						self.tintpos=0;
+					}     
+					//Set bottom and right region for window mode
+					if(self.options.zoomType == "window") {
+						if(self.Eboppos){
+							self.lensTopPos = Math.max( (self.nzHeight)-self.zoomLens.height()-(self.options.lensBorderSize*2), 0 );
+						} 
+						if(self.Eroppos){
+							self.lensLeftPos = (self.nzWidth-(self.zoomLens.width())-(self.options.lensBorderSize*2));
+						}  
+					}  
+					//Set bottom and right region for inner mode
+					if(self.options.zoomType == "inner") {
+						if(self.Eboppos){
+							self.lensTopPos = Math.max( ((self.nzHeight)-(self.options.lensBorderSize*2)), 0 );
+						} 
+						if(self.Eroppos){
+							self.lensLeftPos = (self.nzWidth-(self.nzWidth)-(self.options.lensBorderSize*2));
+						}  
+
+					}
+					//if lens zoom
+					if(self.options.zoomType == "lens") {  
+						self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1));   
+						self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1));
+
+						self.zoomLens.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
+
+						if(self.changeBgSize){  
+
+							if(self.nzHeight>self.nzWidth){  
+								if(self.options.zoomType == "lens"){       
+									self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+								}   
+
+								self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+							}
+							else{     
+								if(self.options.zoomType == "lens"){       
+									self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
+								}   
+								self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });            
+							}
+							self.changeBgSize = false;
+						}    
+
+						self.setWindowPostition(e);  
+					}
+					//if tint zoom   
+					if(self.options.tint && self.options.zoomType != "inner") {
+						self.setTintPosition(e);
+
+					}
+					//set the css background position 
+					if(self.options.zoomType == "window") {
+						self.setWindowPostition(e);   
+					}
+					if(self.options.zoomType == "inner") {
+						self.setWindowPostition(e);   
+					}
+					if(self.options.showLens) {
+
+						if(self.fullwidth && self.options.zoomType != "lens"){
+							self.lensLeftPos = 0;
+
+						}
+						self.zoomLens.css({ left: self.lensLeftPos + 'px', top: self.lensTopPos + 'px' })  
+					}
+
+				} //end else
+
+
+
+			},
+			showHideWindow: function(change) {
+				var self = this;              
+				if(change == "show"){      
+					if(!self.isWindowActive){
+						if(self.options.zoomWindowFadeIn){
+							self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn);
+						}
+						else{self.zoomWindow.show();}
+						self.isWindowActive = true;
+					}            
+				}
+				if(change == "hide"){
+					if(self.isWindowActive){
+						if(self.options.zoomWindowFadeOut){
+							self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut, function () {
+								if (self.loop) {
+									//stop moving the zoom window when zoom window is faded out
+									clearInterval(self.loop);
+									self.loop = false;
+								}
+							});
+						}
+						else{self.zoomWindow.hide();}
+						self.isWindowActive = false;        
+					}      
+				}
+			},
+			showHideLens: function(change) {
+				var self = this;              
+				if(change == "show"){      
+					if(!self.isLensActive){
+						if(self.options.lensFadeIn){
+							self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn);
+						}
+						else{self.zoomLens.show();}
+						self.isLensActive = true;
+					}            
+				}
+				if(change == "hide"){
+					if(self.isLensActive){
+						if(self.options.lensFadeOut){
+							self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut);
+						}
+						else{self.zoomLens.hide();}
+						self.isLensActive = false;        
+					}      
+				}
+			},
+			showHideTint: function(change) {
+				var self = this;              
+				if(change == "show"){      
+					if(!self.isTintActive){
+
+						if(self.options.zoomTintFadeIn){
+							self.zoomTint.css({opacity:self.options.tintOpacity}).animate().stop(true, true).fadeIn("slow");
+						}
+						else{
+							self.zoomTint.css({opacity:self.options.tintOpacity}).animate();
+							self.zoomTint.show();
+
+
+						}
+						self.isTintActive = true;
+					}            
+				}
+				if(change == "hide"){      
+					if(self.isTintActive){ 
+
+						if(self.options.zoomTintFadeOut){
+							self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut);
+						}
+						else{self.zoomTint.hide();}
+						self.isTintActive = false;        
+					}      
+				}
+			},
+			setLensPostition: function( e ) {
+
+
+			},
+			setWindowPostition: function( e ) {
+				//return obj.slice( 0, count );
+				var self = this;
+
+				if(!isNaN(self.options.zoomWindowPosition)){
+
+					switch (self.options.zoomWindowPosition) { 
+					case 1: //done         
+						self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
+						self.windowOffsetLeft =(+self.nzWidth); //DONE 1, 2, 3, 4, 16
+						break;
+					case 2:
+						if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
+
+							self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
+							self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
+						}
+						else{ //negative margin
+
+						}
+						break;
+					case 3: //done        
+						self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9
+						self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
+						break;      
+					case 4: //done  
+						self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
+						self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
+						break;
+					case 5: //done  
+						self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
+						self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15
+						break;
+					case 6: 
+						if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
+							self.windowOffsetTop = (self.nzHeight);  //DONE - 4,5,6,7,8
+
+							self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);  
+						}
+						else{ //negative margin
+
+						}
+
+
+						break;
+					case 7: //done  
+						self.windowOffsetTop = (self.nzHeight);  //DONE - 4,5,6,7,8
+						self.windowOffsetLeft = 0; //DONE 7, 13
+						break;
+					case 8: //done  
+						self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
+						self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1);  //DONE 8,9,10,11,12
+						break;
+					case 9:  //done  
+						self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9
+						self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1);  //DONE 8,9,10,11,12
+						break;
+					case 10: 
+						if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
+
+							self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
+							self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1);  //DONE 8,9,10,11,12
+						}
+						else{ //negative margin
+
+						}
+						break;
+					case 11: 
+						self.windowOffsetTop = (self.options.zoomWindowOffety);
+						self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1);  //DONE 8,9,10,11,12
+						break;
+					case 12: //done  
+						self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
+						self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1);  //DONE 8,9,10,11,12
+						break;
+					case 13: //done  
+						self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
+						self.windowOffsetLeft =(0); //DONE 7, 13
+						break;
+					case 14: 
+						if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
+							self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
+
+							self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);  
+						}
+						else{ //negative margin
+
+						}
+
+						break;
+					case 15://done   
+						self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
+						self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15
+						break;
+					case 16:  //done  
+						self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
+						self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
+						break;            
+					default: //done  
+						self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
+					self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
+					} 
+				} //end isNAN
+				else{
+					//WE CAN POSITION IN A CLASS - ASSUME THAT ANY STRING PASSED IS
+					self.externalContainer = $('#'+self.options.zoomWindowPosition);
+					self.externalContainerWidth = self.externalContainer.width();
+					self.externalContainerHeight = self.externalContainer.height();
+					self.externalContainerOffset = self.externalContainer.offset();
+
+					self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1
+					self.windowOffsetLeft =self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16
+
+				}
+				self.isWindowSet = true;
+				self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffety;
+				self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffetx;
+
+				self.zoomWindow.css({ top: self.windowOffsetTop});
+				self.zoomWindow.css({ left: self.windowOffsetLeft});
+
+				if(self.options.zoomType == "inner") {
+					self.zoomWindow.css({ top: 0});
+					self.zoomWindow.css({ left: 0});
+
+				}   
+
+
+				self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1));   
+				self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1));
+				if(self.Etoppos){self.windowTopPos = 0;}
+				if(self.Eloppos){self.windowLeftPos = 0;}     
+				if(self.Eboppos){self.windowTopPos = (self.largeHeight/self.currentZoomLevel-self.zoomWindow.height())*(-1);  } 
+				if(self.Eroppos){self.windowLeftPos = ((self.largeWidth/self.currentZoomLevel-self.zoomWindow.width())*(-1));}    
+
+				//stops micro movements
+				if(self.fullheight){
+					self.windowTopPos = 0;
+
+				}
+				if(self.fullwidth){
+					self.windowLeftPos = 0;
+
+				}
+				//set the css background position 
+
+
+				if(self.options.zoomType == "window" || self.options.zoomType == "inner") {
+
+					if(self.zoomLock == 1){
+						//overrides for images not zoomable
+						if(self.widthRatio <= 1){
+
+							self.windowLeftPos = 0;
+						}
+						if(self.heightRatio <= 1){ 
+							self.windowTopPos = 0;
+						}
+					}
+					// adjust images less than the window height
+
+					if (self.options.zoomType == "window") {
+						if (self.largeHeight < self.options.zoomWindowHeight) {
+
+							self.windowTopPos = 0;
+						}
+						if (self.largeWidth < self.options.zoomWindowWidth) {
+							self.windowLeftPos = 0;
+						}
+					}
+
+					//set the zoomwindow background position
+					if (self.options.easing){
+
+						//     if(self.changeZoom){
+						//           clearInterval(self.loop);
+						//           self.changeZoom = false;
+						//           self.loop = false;
+
+						//            }
+						//set the pos to 0 if not set
+						if(!self.xp){self.xp = 0;}
+						if(!self.yp){self.yp = 0;}  
+						//if loop not already started, then run it 
+						if (!self.loop){           
+							self.loop = setInterval(function(){                
+								//using zeno's paradox    
+
+								self.xp += (self.windowLeftPos  - self.xp) / self.options.easingAmount; 
+								self.yp += (self.windowTopPos  - self.yp) / self.options.easingAmount;
+								if(self.scrollingLock){
+
+
+									clearInterval(self.loop);
+									self.xp = self.windowLeftPos;
+									self.yp = self.windowTopPos            
+
+									self.xp = ((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1);
+									self.yp = (((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1));                         
+
+									if(self.changeBgSize){    
+										if(self.nzHeight>self.nzWidth){  
+											if(self.options.zoomType == "lens"){      
+												self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+											}   
+											self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+										}
+										else{   
+											if(self.options.zoomType != "lens"){      
+												self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+											}            
+											self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });            
+
+										}
+
+										/*
+             if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;}
+						if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;}  
+                 if (!self.bgloop){   
+                 	self.bgloop = setInterval(function(){   
+
+                 self.bgxp += (self.largeWidth/self.newvalue  - self.bgxp) / self.options.easingAmount; 
+								self.bgyp += (self.largeHeight/self.newvalue  - self.bgyp) / self.options.easingAmount;
+
+           self.zoomWindow.css({ "background-size": self.bgxp + 'px ' + self.bgyp + 'px' });
+
+
+                  }, 16);
+
+                 }
+										 */
+										self.changeBgSize = false;
+									}
+
+									self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
+									self.scrollingLock = false;
+									self.loop = false;
+
+								}
+								else if (Math.round(Math.abs(self.xp - self.windowLeftPos) + Math.abs(self.yp - self.windowTopPos)) < 1) {
+									//stops micro movements
+									clearInterval(self.loop);
+									self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
+									self.loop = false;
+								}
+								else{
+									if(self.changeBgSize){    
+										if(self.nzHeight>self.nzWidth){ 
+											if(self.options.zoomType == "lens"){      
+												self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+											}         
+											self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+										}
+										else{                 
+											if(self.options.zoomType != "lens"){     
+												self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
+											}      
+											self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });            
+										}
+										self.changeBgSize = false;
+									}                   
+
+									self.zoomWindow.css({ backgroundPosition: self.xp + 'px ' + self.yp + 'px' });
+								}       
+							}, 16);
+						}
+					}   
+					else{    
+						if(self.changeBgSize){  
+							if(self.nzHeight>self.nzWidth){  
+								if(self.options.zoomType == "lens"){      
+									self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+								} 
+
+								self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
+							}
+							else{     
+								if(self.options.zoomType == "lens"){      
+									self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
+								} 
+								if((self.largeHeight/self.newvaluewidth) < self.options.zoomWindowHeight){ 
+
+									self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });            
+								}
+								else{
+
+									self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });   
+								}
+
+							}
+							self.changeBgSize = false;
+						}     
+
+						self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });       
+					}
+				} 
+			},
+			setTintPosition: function(e){
+				var self = this;
+				self.nzOffset = self.$elem.offset();
+				self.tintpos = String(((e.pageX - self.nzOffset.left)-(self.zoomLens.width() / 2)) * (-1)); 
+				self.tintposy = String(((e.pageY - self.nzOffset.top) - self.zoomLens.height() / 2) * (-1));	
+				if(self.Etoppos){
+					self.tintposy = 0;
+				}
+				if(self.Eloppos){
+					self.tintpos=0;
+				}     
+				if(self.Eboppos){
+					self.tintposy = (self.nzHeight-self.zoomLens.height()-(self.options.lensBorderSize*2))*(-1);
+				} 
+				if(self.Eroppos){
+					self.tintpos = ((self.nzWidth-self.zoomLens.width()-(self.options.lensBorderSize*2))*(-1));
+				}    
+				if(self.options.tint) {
+					//stops micro movements
+					if(self.fullheight){
+						self.tintposy = 0;
+
+					}
+					if(self.fullwidth){ 
+						self.tintpos = 0;
+
+					}   
+					self.zoomTintImage.css({'left': self.tintpos+'px'});
+					self.zoomTintImage.css({'top': self.tintposy+'px'});
+				}
+			},
+
+			swaptheimage: function(smallimage, largeimage){
+				var self = this;
+				var newImg = new Image(); 
+
+				if(self.options.loadingIcon){
+					self.spinner = $('<div style="background: url(\''+self.options.loadingIcon+'\') no-repeat center;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;z-index: 2000;position: absolute; background-position: center center;"></div>');
+					self.$elem.after(self.spinner);
+				}
+
+				self.options.onImageSwap(self.$elem);
+
+				newImg.onload = function() {
+					self.largeWidth = newImg.width;
+					self.largeHeight = newImg.height;
+					self.zoomImage = largeimage;
+					self.zoomWindow.css({ "background-size": self.largeWidth + 'px ' + self.largeHeight + 'px' });
+					self.swapAction(smallimage, largeimage);
+					return;              
+				}          
+				newImg.src = largeimage; // this must be done AFTER setting onload
+
+			},
+			swapAction: function(smallimage, largeimage){
+
+
+				var self = this;    
+
+				var newImg2 = new Image(); 
+				newImg2.onload = function() {
+					//re-calculate values
+					self.nzHeight = newImg2.height;
+					self.nzWidth = newImg2.width;
+					self.options.onImageSwapComplete(self.$elem);
+
+					self.doneCallback();  
+					return;      
+				}          
+				newImg2.src = smallimage; 
+
+				//reset the zoomlevel to that initially set in options
+				self.currentZoomLevel = self.options.zoomLevel;
+				self.options.maxZoomLevel = false;
+
+				//swaps the main image
+				//self.$elem.attr("src",smallimage);
+				//swaps the zoom image     
+				if(self.options.zoomType == "lens") {
+					self.zoomLens.css({ backgroundImage: "url('" + largeimage + "')" }); 
+				}
+				if(self.options.zoomType == "window") {
+					self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" }); 
+				}
+				if(self.options.zoomType == "inner") {
+					self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" }); 
+				} 
+
+
+
+				self.currentImage = largeimage;
+
+				if(self.options.imageCrossfade){
+					var oldImg = self.$elem;
+					var newImg = oldImg.clone();         
+					self.$elem.attr("src",smallimage)
+					self.$elem.after(newImg);
+					newImg.stop(true).fadeOut(self.options.imageCrossfade, function() {
+						$(this).remove();         
+					});
+
+					//       				if(self.options.zoomType == "inner"){
+					//remove any attributes on the cloned image so we can resize later
+					self.$elem.width("auto").removeAttr("width");
+					self.$elem.height("auto").removeAttr("height");
+					//   }
+
+					oldImg.fadeIn(self.options.imageCrossfade);
+
+					if(self.options.tint && self.options.zoomType != "inner") {
+
+						var oldImgTint = self.zoomTintImage;
+						var newImgTint = oldImgTint.clone();         
+						self.zoomTintImage.attr("src",largeimage)
+						self.zoomTintImage.after(newImgTint);
+						newImgTint.stop(true).fadeOut(self.options.imageCrossfade, function() {
+							$(this).remove();         
+						});
+
+
+
+						oldImgTint.fadeIn(self.options.imageCrossfade);
+
+
+						//self.zoomTintImage.attr("width",elem.data("image"));
+
+						//resize the tint window
+						self.zoomTint.css({ height: self.$elem.height()});
+						self.zoomTint.css({ width: self.$elem.width()});
+					}    
+
+					self.zoomContainer.css("height", self.$elem.height());
+					self.zoomContainer.css("width", self.$elem.width());
+
+					if(self.options.zoomType == "inner"){ 
+						if(!self.options.constrainType){
+							self.zoomWrap.parent().css("height", self.$elem.height());
+							self.zoomWrap.parent().css("width", self.$elem.width());
+
+							self.zoomWindow.css("height", self.$elem.height());
+							self.zoomWindow.css("width", self.$elem.width());
+						}
+					} 
+
+					if(self.options.imageCrossfade){  
+						self.zoomWrap.css("height", self.$elem.height());
+						self.zoomWrap.css("width", self.$elem.width());
+					} 
+				}
+				else{
+					self.$elem.attr("src",smallimage); 
+					if(self.options.tint) {
+						self.zoomTintImage.attr("src",largeimage);
+						//self.zoomTintImage.attr("width",elem.data("image"));
+						self.zoomTintImage.attr("height",self.$elem.height());
+						//self.zoomTintImage.attr('src') = elem.data("image");
+						self.zoomTintImage.css({ height: self.$elem.height()}); 
+						self.zoomTint.css({ height: self.$elem.height()});
+
+					}
+					self.zoomContainer.css("height", self.$elem.height());
+					self.zoomContainer.css("width", self.$elem.width());
+
+					if(self.options.imageCrossfade){  
+						self.zoomWrap.css("height", self.$elem.height());
+						self.zoomWrap.css("width", self.$elem.width());
+					} 
+				}              
+				if(self.options.constrainType){     
+
+					//This will contrain the image proportions
+					if(self.options.constrainType == "height"){ 
+
+						self.zoomContainer.css("height", self.options.constrainSize);
+						self.zoomContainer.css("width", "auto");
+
+						if(self.options.imageCrossfade){  
+							self.zoomWrap.css("height", self.options.constrainSize);
+							self.zoomWrap.css("width", "auto"); 
+							self.constwidth = self.zoomWrap.width();
+
+
+						}
+						else{                  
+							self.$elem.css("height", self.options.constrainSize);
+							self.$elem.css("width", "auto");
+							self.constwidth = self.$elem.width();
+						} 
+
+						if(self.options.zoomType == "inner"){
+
+							self.zoomWrap.parent().css("height", self.options.constrainSize);
+							self.zoomWrap.parent().css("width", self.constwidth);   
+							self.zoomWindow.css("height", self.options.constrainSize);
+							self.zoomWindow.css("width", self.constwidth);    
+						}        
+						if(self.options.tint){
+							self.tintContainer.css("height", self.options.constrainSize);
+							self.tintContainer.css("width", self.constwidth);
+							self.zoomTint.css("height", self.options.constrainSize);
+							self.zoomTint.css("width", self.constwidth);
+							self.zoomTintImage.css("height", self.options.constrainSize);
+							self.zoomTintImage.css("width", self.constwidth); 
+						} 
+
+					}
+					if(self.options.constrainType == "width"){       
+						self.zoomContainer.css("height", "auto");
+						self.zoomContainer.css("width", self.options.constrainSize);
+
+						if(self.options.imageCrossfade){
+							self.zoomWrap.css("height", "auto");
+							self.zoomWrap.css("width", self.options.constrainSize);
+							self.constheight = self.zoomWrap.height();
+						}
+						else{            
+							self.$elem.css("height", "auto");
+							self.$elem.css("width", self.options.constrainSize); 
+							self.constheight = self.$elem.height();              
+						} 
+						if(self.options.zoomType == "inner"){
+							self.zoomWrap.parent().css("height", self.constheight);
+							self.zoomWrap.parent().css("width", self.options.constrainSize);   
+							self.zoomWindow.css("height", self.constheight);
+							self.zoomWindow.css("width", self.options.constrainSize);    
+						} 
+						if(self.options.tint){
+							self.tintContainer.css("height", self.constheight);
+							self.tintContainer.css("width", self.options.constrainSize);
+							self.zoomTint.css("height", self.constheight);
+							self.zoomTint.css("width", self.options.constrainSize);
+							self.zoomTintImage.css("height", self.constheight);
+							self.zoomTintImage.css("width", self.options.constrainSize); 
+						}   
+
+					}        
+
+
+				}
+
+			},
+			doneCallback: function(){
+
+				var self = this;
+				if(self.options.loadingIcon){
+					self.spinner.hide();     
+				}   
+
+				self.nzOffset = self.$elem.offset();
+				self.nzWidth = self.$elem.width();
+				self.nzHeight = self.$elem.height();
+
+				// reset the zoomlevel back to default
+				self.currentZoomLevel = self.options.zoomLevel;
+
+				//ratio of the large to small image
+				self.widthRatio = self.largeWidth / self.nzWidth;
+				self.heightRatio = self.largeHeight / self.nzHeight; 
+
+				//NEED TO ADD THE LENS SIZE FOR ROUND
+				// adjust images less than the window height
+				if(self.options.zoomType == "window") {
+
+					if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
+						lensHeight = self.nzHeight;  
+
+					}
+					else{
+						lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
+					}
+
+					if(self.options.zoomWindowWidth < self.options.zoomWindowWidth){
+						lensWidth = self.nzWidth;
+					}       
+					else{
+						lensWidth =  (self.options.zoomWindowWidth/self.widthRatio);
+					}
+
+
+					if(self.zoomLens){
+
+						self.zoomLens.css('width', lensWidth);    
+						self.zoomLens.css('height', lensHeight); 
+
+
+					}
+				}
+			},
+			getCurrentImage: function(){
+				var self = this;  
+				return self.zoomImage; 
+			}, 
+			getGalleryList: function(){
+				var self = this;   
+				//loop through the gallery options and set them in list for fancybox
+				self.gallerylist = [];
+				if (self.options.gallery){ 
+
+
+					$('#'+self.options.gallery + ' a').each(function() {
+
+						var img_src = '';
+						if($(this).data("zoom-image")){
+							img_src = $(this).data("zoom-image");
+						}
+						else if($(this).data("image")){
+							img_src = $(this).data("image");
+						}			
+						//put the current image at the start
+						if(img_src == self.zoomImage){
+							self.gallerylist.unshift({
+								href: ''+img_src+'',
+								title: $(this).find('img').attr("title")
+							});	
+						}
+						else{
+							self.gallerylist.push({
+								href: ''+img_src+'',
+								title: $(this).find('img').attr("title")
+							});
+						}
+
+
+					});
+				}                                                       
+				//if no gallery - return current image
+				else{
+					self.gallerylist.push({
+						href: ''+self.zoomImage+'',
+						title: $(this).find('img').attr("title")
+					}); 
+				}
+				return self.gallerylist;
+
+			},
+			changeZoomLevel: function(value){
+				var self = this;   
+
+				//flag a zoom, so can adjust the easing during setPosition     
+				self.scrollingLock = true;   
+
+				//round to two decimal places
+				self.newvalue = parseFloat(value).toFixed(2);
+				newvalue = parseFloat(value).toFixed(2);
+
+
+
+
+				//maxwidth & Maxheight of the image
+				maxheightnewvalue = self.largeHeight/((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight);     
+				maxwidthtnewvalue = self.largeWidth/((self.options.zoomWindowWidth / self.nzWidth) * self.nzWidth);   	
+
+
+
+
+				//calculate new heightratio
+				if(self.options.zoomType != "inner")
+				{
+					if(maxheightnewvalue <= newvalue){
+						self.heightRatio = (self.largeHeight/maxheightnewvalue) / self.nzHeight;
+						self.newvalueheight = maxheightnewvalue;
+						self.fullheight = true;
+
+					}
+					else{
+						self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight; 
+						self.newvalueheight = newvalue;
+						self.fullheight = false;
+
+					}
+
+
+//					calculate new width ratio
+
+					if(maxwidthtnewvalue <= newvalue){
+						self.widthRatio = (self.largeWidth/maxwidthtnewvalue) / self.nzWidth;
+						self.newvaluewidth = maxwidthtnewvalue;
+						self.fullwidth = true;
+
+					}
+					else{
+						self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 
+						self.newvaluewidth = newvalue;
+						self.fullwidth = false;
+
+					}
+					if(self.options.zoomType == "lens"){
+						if(maxheightnewvalue <= newvalue){
+							self.fullwidth = true;
+							self.newvaluewidth = maxheightnewvalue;
+
+						} else{
+							self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 
+							self.newvaluewidth = newvalue;
+
+							self.fullwidth = false;
+						}}
+				}
+
+
+
+				if(self.options.zoomType == "inner")
+				{
+					maxheightnewvalue = parseFloat(self.largeHeight/self.nzHeight).toFixed(2);     
+					maxwidthtnewvalue = parseFloat(self.largeWidth/self.nzWidth).toFixed(2);      
+					if(newvalue > maxheightnewvalue){
+						newvalue = maxheightnewvalue;
+					}
+					if(newvalue > maxwidthtnewvalue){
+						newvalue = maxwidthtnewvalue;
+					}      
+
+
+					if(maxheightnewvalue <= newvalue){
+
+
+						self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight; 
+						if(newvalue > maxheightnewvalue){
+							self.newvalueheight = maxheightnewvalue;
+						}else{
+							self.newvalueheight = newvalue;
+						}
+						self.fullheight = true;
+
+
+					}
+					else{
+
+
+
+						self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight; 
+
+						if(newvalue > maxheightnewvalue){
+
+							self.newvalueheight = maxheightnewvalue;
+						}else{
+							self.newvalueheight = newvalue;
+						}
+						self.fullheight = false;
+					}
+
+
+
+
+					if(maxwidthtnewvalue <= newvalue){   
+
+						self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 
+						if(newvalue > maxwidthtnewvalue){
+
+							self.newvaluewidth = maxwidthtnewvalue;
+						}else{
+							self.newvaluewidth = newvalue;
+						}
+
+						self.fullwidth = true;
+
+
+					}
+					else{  
+
+						self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 
+						self.newvaluewidth = newvalue;
+						self.fullwidth = false;
+					}        
+
+
+				} //end inner
+				scrcontinue = false;
+
+				if(self.options.zoomType == "inner"){
+
+					if(self.nzWidth >= self.nzHeight){
+						if( self.newvaluewidth <= maxwidthtnewvalue){
+							scrcontinue = true;
+						}
+						else{
+
+							scrcontinue = false;
+							self.fullheight = true;
+							self.fullwidth = true;
+						}
+					}
+					if(self.nzHeight > self.nzWidth){     
+						if( self.newvaluewidth <= maxwidthtnewvalue){
+							scrcontinue = true;
+						}
+						else{
+							scrcontinue = false;  
+
+							self.fullheight = true;
+							self.fullwidth = true;
+						}
+					}
+				}
+
+				if(self.options.zoomType != "inner"){
+					scrcontinue = true;
+				}
+
+				if(scrcontinue){
+
+
+
+					self.zoomLock = 0;
+					self.changeZoom = true;
+
+					//if lens height is less than image height
+
+
+					if(((self.options.zoomWindowHeight)/self.heightRatio) <= self.nzHeight){
+
+
+						self.currentZoomLevel = self.newvalueheight; 
+						if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
+							self.changeBgSize = true;
+
+							self.zoomLens.css({height: String((self.options.zoomWindowHeight)/self.heightRatio) + 'px' }) 
+						}
+						if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {  
+							self.changeBgSize = true;  
+						}	
+
+
+					} 
+
+
+
+
+					if((self.options.zoomWindowWidth/self.widthRatio) <= self.nzWidth){
+
+
+
+						if(self.options.zoomType != "inner"){
+							if(self.newvaluewidth > self.newvalueheight)   {
+								self.currentZoomLevel = self.newvaluewidth;                 
+
+							}
+						}
+
+						if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
+							self.changeBgSize = true;
+
+							self.zoomLens.css({width: String((self.options.zoomWindowWidth)/self.widthRatio) + 'px' })
+						}
+						if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {  
+							self.changeBgSize = true;
+						}	
+
+					}
+					if(self.options.zoomType == "inner"){
+						self.changeBgSize = true;  
+
+						if(self.nzWidth > self.nzHeight){
+							self.currentZoomLevel = self.newvaluewidth;
+						}
+						if(self.nzHeight > self.nzWidth){
+							self.currentZoomLevel = self.newvaluewidth;
+						}
+					}
+
+				}      //under
+
+				//sets the boundry change, called in setWindowPos
+				self.setPosition(self.currentLoc);
+				//
+			},
+			closeAll: function(){
+				if(self.zoomWindow){self.zoomWindow.hide();}
+				if(self.zoomLens){self.zoomLens.hide();}
+				if(self.zoomTint){self.zoomTint.hide();}
+			},
+			changeState: function(value){
+      	var self = this;
+				if(value == 'enable'){self.options.zoomEnabled = true;}
+				if(value == 'disable'){self.options.zoomEnabled = false;}
+
+			}
+
+	};
+
+
+
+
+	$.fn.elevateZoom = function( options ) {
+		return this.each(function() {
+			var elevate = Object.create( ElevateZoom );
+
+			elevate.init( options, this );
+
+			$.data( this, 'elevateZoom', elevate );
+
+		});
+	};
+
+	$.fn.elevateZoom.options = {
+			zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION)
+      zoomEnabled: true, //false disables zoomwindow from showing
+			preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
+			zoomLevel: 1, //default zoom level of image
+			scrollZoom: false, //allow zoom on mousewheel, true to activate
+			scrollZoomIncrement: 0.1,  //steps of the scrollzoom
+			minZoomLevel: false,
+			maxZoomLevel: false,
+			easing: false,
+			easingAmount: 12,
+			lensSize: 200,
+			zoomWindowWidth: 400,
+			zoomWindowHeight: 400,
+			zoomWindowOffetx: 0,
+			zoomWindowOffety: 0,
+			zoomWindowPosition: 1,
+			zoomWindowBgColour: "#fff",
+			lensFadeIn: false,
+			lensFadeOut: false,
+			debug: false,
+			zoomWindowFadeIn: false,
+			zoomWindowFadeOut: false,
+			zoomWindowAlwaysShow: false,
+			zoomTintFadeIn: false,
+			zoomTintFadeOut: false,
+			borderSize: 4,
+			showLens: true,
+			borderColour: "#888",
+			lensBorderSize: 1,
+			lensBorderColour: "#000",
+			lensShape: "square", //can be "round"
+			zoomType: "window", //window is default,  also "lens" available -
+			containLensZoom: false,
+			lensColour: "white", //colour of the lens background
+			lensOpacity: 0.4, //opacity of the lens
+			lenszoom: false,
+			tint: false, //enable the tinting
+			tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0)
+			tintOpacity: 0.4, //opacity of the tint
+			gallery: false,
+			galleryActiveClass: "zoomGalleryActive",
+			imageCrossfade: false,
+			constrainType: false,  //width or height
+			constrainSize: false,  //in pixels the dimensions you want to constrain on
+			loadingIcon: false, //http://www.example.com/spinner.gif
+			cursor:"default", // user should set to what they want the cursor as, if they have set a click function
+			responsive:true,
+			onComplete: $.noop,
+      onDestroy: function() {},
+			onZoomedImageLoaded: function() {},
+			onImageSwap: $.noop,
+			onImageSwapComplete: $.noop
+	};
+
+})( jQuery, window, document );
\ No newline at end of file
diff --git a/main/lp/lp_view.php b/main/lp/lp_view.php
index 9a02d948e1..ee3abf3300 100755
--- a/main/lp/lp_view.php
+++ b/main/lp/lp_view.php
@@ -132,6 +132,32 @@ $(function() {
 var chamilo_xajax_handler = window.oxajax;
 </script>';
 
+$zoomOptions = api_get_configuration_value('zoom_images_quiz');
+if (isset($zoomOptions['options']) && !in_array($origin, ['embeddable', 'noheader'])) {
+    $options = $zoomOptions['options'];
+    $htmlHeadXtra[] = '<script src="'.api_get_path(WEB_LIBRARY_JS_PATH).'jquery.elevatezoom.js"></script>';
+    $htmlHeadXtra[] = '<script>
+        $(document).ready(function() {
+            $("img").each(function() {
+                var attr = $(this).attr("data-zoom-image");
+                // For some browsers, `attr` is undefined; for others,
+                // `attr` is false.  Check for both.
+                if (typeof attr !== typeof undefined && attr !== false) {
+                    $(this).elevateZoom({
+                        scrollZoom : true,
+                        cursor: "crosshair",
+                        tint:true,
+                        tintColour:\'#CCC\',
+                        tintOpacity:0.5,
+                        zoomWindowWidth:'.$options['zoomWindowWidth'].',
+                        zoomWindowHeight:'.$options['zoomWindowHeight'].'
+                    });
+                }
+            });
+        });
+    </script>';
+}
+
 $allowLpItemTip = api_get_configuration_value('hide_accessibility_label_on_lp_item') === false;
 if ($allowLpItemTip) {
     $htmlHeadXtra[] = '<script>