I use a Zoom JavaScript for zoom my images when I click on it.
This JavaScript creates a hidden copy of my image with bigger dimensions.
Problem is, when I load my page, the body takes a height and width according to the hidden image.
You can see at the right of the screen the menu doesn't fit with the width of the screen (the hidden image is not displayed).
Is there a solution when I load the page, the size of the body does not take into account the hidden image?
// To achieve this effect we're creating a copy of the image and scaling it up. Next we'll pull the x and y coordinates of the mouse on the original image. Then we translate the big image so that the points we are looking at match up. Finally we create a mask to display the piece of the image that we're interested in.
let settings = {
'magnification': 3,
'maskSize': 200
}
// Once our images have loaded let's create the zoom
window.addEventListener("load", () => {
// find all the images
let images = document.querySelectorAll('.image-zoom-available');
// querySelectorAll produces an array of images that we pull out one by one and create a Zoombini for
Array.prototype.forEach.call(images, (image) => {
new Zoombini(image);
});
});
// A Zoombini (or whatever you want to call it), is a class that takes an image input and adds the zoomable functionality to it. Let's take a look inside at what it does.
class Zoombini {
// When we create a new Zoombini we run this function; it's called the constructor and you can see it taking our image in from above
constructor(targetImage) {
// We don't want the Zoombini to forget about it's image, so let's save that info
this.image = targetImage;
// The Zoombini isActive after it has opened up
this.isActive = false;
// But as it hasn't been used yet it's maskSize will be 0
this.maskSize = 0;
// And we have to start it's coordinates somewhere, they may as well be (0,0)
this.mousex = this.mousey = 0;
// Now we're set up let's build the necessary compoonents
// First let's clone our original image, I'm going to call it imageZoom and save it our Zoombini
this.imageZoom = this.image.cloneNode();
// And pop it next to the image target
this.image.parentNode.insertBefore(this.imageZoom, this.image);
// Make the zoom image that we'll crop float above it's original sibling
this.imageZoom.style.zIndex = 1;
// We don't want to be able to touch it though, we want to reach whats underneat
this.imageZoom.style.pointerEvents = "none";
// And so we can translate it let's make it absolute
this.imageZoom.style.position = "absolute";
// Now let's scale up our enlarged image and add an event listener so that it resizes whenever the size of the window changes
this.resizeImageZoom();
window.addEventListener("resize", this.resizeImageZoom.bind(this), false);
// Now that we're finishing the constructor we need to addeventlisteners so we can interact with it
// This function is just below, but still exists within our Zoombini
this.UI();
// Finally we'll apply an initial mask at default settings to hide this image
this.drawMask();
}
// resizeImageZoom resizes the enlarged image
resizeImageZoom() {
// So let's scale up this version
this.imageZoom.style.width = this.image.getBoundingClientRect().width * settings.magnification + 'px';
this.imageZoom.style.height = "unset"
}
// This could be inside the constructor but it's nicer on it's own I think
UI() {
this.image.addEventListener('mousemove', (event) => {
// When we move our mouse the x and y coordinates from the event
// We subtract the left and top coordinates so that we get the (x,y) coordinates of the actualy image, where (0,0) would be the top left
this.mousex = event.clientX - this.image.getBoundingClientRect().left;
this.mousey = event.clientY - this.image.getBoundingClientRect().top;
// if we're not active then don't display anything
if (!this.isActive) return;
// The drawMask() function below displays our the portion of the image that we're interested in
this.drawMask();
});
// When they mousedown we open up our mask
this.image.addEventListener('mousedown', () => {
// But it can be opening or closing, so let's pass in that information
this.isExpanding = true;
// To do that we start the maskSizer function, which calls itself until it reaches full size
this.maskSizer();
// And hide our cursor (we know where it is)
this.image.classList.add('is-active');
});
// if the mouse is released, close the mask
this.image.addEventListener('mouseup', () => {
// if it's not expanding, it's closing
this.isExpanding = false;
// if the mask has already expanded we'll need to start another maskSizer to shrink it. We don't run the maskSizer unless the mask is changing
if (this.isActive) this.maskSizer();
});
// same as above, caused by us moving out of the zoom area
this.image.addEventListener('mouseout', () => {
this.isExpanding = false;
if (this.isActive) this.maskSizer();
});
}
// The drawmask function shows us the piece of the image that we are hovering over
drawMask() {
// Let's use getBoundingClientRect to get the location of our images
let image = this.image.getBoundingClientRect();
let imageZoom = this.imageZoom.getBoundingClientRect();
// We'll start by getting the (x,y) of our big image that matches the piece we're mousing over (which we stored from our event listener as this.mousex and this.mousey). This is a clunky bit of code to help the zooms work in a variety of situations.
let prop_x = this.mousex / image.width * imageZoom.width * (1 - 1 / settings.magnification) - image.x - window.scrollX;
let prop_y = this.mousey / image.height * imageZoom.height * (1 - 1 / settings.magnification) - image.y - window.scrollY;
// Shift the large image by that amount
this.imageZoom.style.left = -prop_x + "px";
this.imageZoom.style.top = -prop_y + "px";
// Now we need to create our mask
// First let's get the coordinates of the point we're hovering over
let x = this.mousex * settings.magnification;
let y = this.mousey * settings.magnification;
// And create and apply our clip
let clippy = "circle(" + this.maskSize + "px at " + x + "px " + y + "px)";
this.imageZoom.style.clipPath = clippy;
this.imageZoom.style.webkitClipPath = clippy;
}
// We'll use the maskSizer to either expand or shrink the size of our mask
maskSizer() {
// We're in maskSizer so we're changing the size of our mask. Let's make the mask radius larger if the Zoombini is expanding, or shrink it if it's closing. The numbers below might need to be adjusted. It closes faster than it opens
this.maskSize = this.isExpanding ? this.maskSize + 35 : this.maskSize - 40;
// It has the form of: condition ? value-if-true : value-if-false
// Think of the ? as "then" and : as "else"
// if we've reaached max size, don't make it any larger
if (this.maskSize >= settings.maskSize) {
this.maskSize = settings.maskSize;
// we'll no longer need to change the maskSize so we'll just set this.isActive to true and let our mousemove do the drawing
this.isActive = true;
} else if (this.maskSize < 0) {
// Our mask is closed
this.maskSize = 0;
this.isActive = false;
this.image.classList.remove('is-active');
} else {
// Or else we haven't reached a size that we want to keep yet. So let's loop it on the next available frame
// We bind(this) here because so that the function remains in context
requestAnimationFrame(this.maskSizer.bind(this));
}
// After we have the appropriate size, draw the mask
this.drawMask();
}
}
function zoom(e) {
var zoomer = e.currentTarget;
e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
x = offsetX / zoomer.offsetWidth * 100
y = offsetY / zoomer.offsetHeight * 100
zoomer.style.backgroundPosition = x + '% ' + y + '%';
}
//My image generated after page load
.image-zoom-available {
height: unset;
border-radius: 30px;
z-index: 1;
pointer-events: none;
position: absolute;
width: 834.688px;
left: 526.646px;
top: 231.729px;
clip-path: circle(0px at 439.062px 987.812px);
}
<div class="col-12 col-xl-3 col-lg-5 justify-content-center ">
<div class="mb-3">
<img class="image-zoom-available" style="height:75%; border-radius: 30px" src='{{ asset(' /radio/ ') }}{{examen.idpatient.id}}_examen_{{examen.id}}_radio.png' id="image_radio" draggable="false" />
</div>
</div>
Try adding the following property in your hidden image css :
display: none
A non visible element still take space in the web page. Cf: What is the difference between visibility:hidden and display:none?
Remove or override the display: none property when you want to display the image.
I add
this.imageZoom.style.display = "none";
on the event : mouseup and
this.imageZoom.style.display = "block";
on mousedown event. And it's fix thanks !
Related
A DIV can be resize using CSS like this
resize: both;
overflow: auto;
So, when you mouse over the DIV , you will get the resize cursor on the lower right corner.
I tried to detect the cursor change to "resize" in Java Script with no luck so far. I tried to log the cursor style with this code on a "click event" when the cursor change to "resize" like this:
console.log(document.body.style.cursor);
console.log(e.target.style.cursor);
The log result id always a " " (empty) instead of a "resize" value.
Thanks in advance for your help.
Yes, I checked, string is empty for e.target.style.cursor. So I propose to solve the issue with a hack. We know, that an area where cursor changes is about 18×18 pixels, so we should detect cursor at this zone.
const textarea = document.querySelector('textarea');
const deltaX = 18;
const deltaY = 18;
const detectionOfCursorInLowerRightCorner = (e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX; // Position X of cursor relative to the document.
const y = e.clientY; // Position Y of cursor relative to the document.
// Calculate lower and high edges of the area where cursor changes.
const lowEdgeX = rect.width - deltaX;
const highEdgeX = rect.width;
const lowEdgeY = rect.height - deltaY;
const highEdgeY = rect.height;
const elementCursorX = x - rect.x; // Position X of cursor relative to the element.
const elementCursorY = y - rect.y; // Position Y of cursor relative to the element.
console.log(' ');
console.log(elementCursorX, elementCursorY);
if (elementCursorX > lowEdgeX && elementCursorX <= highEdgeX && elementCursorY > lowEdgeY && elementCursorY <= highEdgeY) {
console.log('here'); // Cursor is in the area.
}
};
textarea.addEventListener('mousemove', detectionOfCursorInLowerRightCorner);
Do not forget do textarea.removeEventListener('mousemove', detectionOfCursorInLowerRightCorner) on element destroy. And define your own CSS class to detect when textarea has properties resize: both; and overflow: auto;.
Thanks for your answer. Indeed, I did something approximative (I skipped the Y axis logic) similar to your solution. On mousemove in the DIV, I consider that resize will occurs if my mouse X position is between the offetWidth-15px and offsetx. If not, I can drag my DIV.
I considered also the resize observer feature, but it was getting too complicated for multiple DIV elements.
The idea is to be add drag/resize events to my DIV elements for editing purpose over a canvas using absolute positioning.
Congratulation for your concise and well formatted answer and the time spent you spent on it.
I'm having problems with using the canvas/mousemove. I want to be able to draw on the entire page whenever the mouse moves with a mousemove draw/paint tool but also still click text links that appear in various other divs. The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
What do I need to add or change to make this work? I basically just want to have a functioning webpage with a mouseover effect that will draw over the page whenever it moves.
Below is the script I'm using. And here's an example http://jsfiddle.net/zAF4d/1/
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;
var canvasOffset = $('#paint').offset();
$('#paint').mousemove(function(e) {
if (letsdraw === true) {
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
}
});
$('#paint').mousemove(function(e) {
$('.v').css('left', e.clientX + 'px');
$('.h').css('top', e.clientY + 'px');
letsdraw = true;
ctx.strokeStyle = 'blue';
ctx.lineWidth = 0.5;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});
$(window).mouseout(function(e) {
// bind to the window mouse up, that way if you mouse up and you're not over
// the canvas you'll still get the release of the drawing.
letsdraw = true;
});
});
You say:
The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
I think you need to either do everything on canvas or use DOM and some sort of CSS tricks/animations.
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
.
.
.
//if your div's are not same every time, determine similar prop so u can pull it here on to a canvas...by'ID' || 'Class' ...etc.
var div = document.getElementByID('div01');
dix.x;
div.y;
div.h;
.
.
.
**etc. or if u cannot for any reason pull actual div, just pass on it parameters here....
then u can use them here...*
like making collision model for drawing line over the top of it...
if (mouse.x > div.x && mouse.x < div.x + div.width && mouse.y > div.y && mouse.y < div.height) {
letsdraw = false;
}
....**within draw function
**'onclick' event listener try **
$(div)onclick function();
if whole div was pulled here then it will open links...but even if u pulled just div's parameters u just pass click coordinates on to div if link coordinates match
$(div)onclick function(){
load.page(url: <link>your link</>
}
sorry if mistaken something, didn't run it all together
But give it a go hope it helps;
I have an image that I want to disappear if the user scrolls further than 1000px down the window. I want that same image to reappear if the user turns around and scrolls back up. I have written the following JavaScript. This code currently makes the image disappear, but it does not have the image display again if you scroll back up. That is what I want, but this code only changes the display to "none". Can someone help? Thanks!
function parallex () {
var ypos = window.pageYOffset;
var image = document.getElementById('section_1');
image.style.top = ypos * -.2 + "px";
if (ypos > 1000){
image = document.getElementById('section_1');
image.style.display = "none";
}
else {
image.style.display = "visible";
}
}
window.addEventListener('scroll', parallex);
You should be setting display to '' (the empty string) initial, not visible, in your scroll handler.
Edit: It looks like IE does not support the initial keyword, so I would recommend using either the empty string (as I have) or display: block (as advised by Josiah Keller in the comments above).
I would also suggest using the ternary operator (condition ? valueIfTrue : valueIfFalse) to set the display property in a single line of code.
function parallex () {
var y = window.pageYOffset
var image = document.getElementById('section_1')
image.style.top = y * -.2 + 'px'
image.style.display = y > 1000 ? 'none' : ''
}
window.addEventListener('scroll', parallex)
body { height: 3000px; }
<img id="section_1" src="http://www.placehold.it/350x1100" />
I would like to begin with saying i am new to the whole programming scene. This is my first jQuery project for ICT at school.
The project:
I have multiple draggable objects (images). They are in #wrapper, wrapper is in my style.css
Now i want to make it so that when the images are dragged over a background image (centered), located under the wrapper, they will change from image. I have done this successfully by getting the location of each object:
drag: function(){
var who = $("#draggable1");
var offset1 = who.offset();
var xPos1 = offset1.left;
var yPos1 = offset1.top;
$('#posX').text('x: ' + xPos1);
$('#posY').text('y: ' + yPos1);
Then check where the object is, and if its within the X and Y of my background picture, they change:
if(yPos1 > '115' && yPos1 < '578')
{
this.src = 'pinkward5.png'
}
And also code if the object is dropped outside of the background image, this will make it go back to its original place:
if(xPos1 < '717' || xPos1 > '1202')
{
who.animate({ 'top': offset1.top == '0', 'left': offset1.left == '0'}, 200, function(){
who.stop( true,true );
who.mouseup();
this.src = 'visionward.png'
});
BUT:
If i use another monitor with another resolution or leave the browser on the half of my screen, the coordinates change, and the code doenst work as it should because the offset changes.
My question:
How can i make that no matter what the resolution or window of the browser, the coordinates are the same. Maybe with percentages or check if the object is within the css border of the background image?
Thanks! i hope i have not violated the stackoverflow rules.
Why to hardcode the coordinates?
Simply call "offset()" on the background image to get the coordinates, exactly like what you did on the draggable element, and calculate the bounds with its width and height.
var bkgd = $('.whatever-you-name-the-background-image-class');
var bkgd_offset = bkgd.offset();
if(xPos1 >= bkgd_offset.left && xPos1 + who.width() <= bkgd_offset.left + bkgd.width() &&
yPos1 >= bkgd_offset.top && yPos1 + who.height() <= bkgd_offset.top + bkgd.height())
/* draggable inside background */;
else
/* not inside background */;
I have following code for image zoom in/out. The issue is when I try to position image according to my need i.e. I apply margin left to image or image container i.e. #view it effects image zoom (in/out) – upon image zooming image starts moving to the left (because of margin) as you can see in the fiddle link below. Removing margin left makes this again run fine. I want to place it to my wish place without having effect on zoom. Please let me know if I am not clear.
jsfiddle
/*style.css*/
#view {
border: 1px solid #333333 ;
overflow: hidden ;
position: relative ;
width: 400px ;
/*giving margin left to move image to the center*/
margin-left: 400px;
}
.imageZoomInOut {
display: block ;
left: 0px ;
top: 0px ;
}
#zoom {
background-imageZoomInOut: url( "./white_fade.png" ) ;
border: 1px solid #000000 ;
cursor: pointer ;
display: none ;
height: 200px ;
position: absolute ;
width: 200px ;
z-index: 100 ;
}
//******************** js *******************
// When the WINDOW is ready, initialize. We are going with
// the window load rather than the document so that we
// know our imageZoomInOut will be ready as well (complete with
// gettable dimentions).
$(document).ready(function(){
// First, let's get refernces to the elements we will
// be using.
var view = $( "#view" );
var imageZoomInOut = $( ".imageZoomInOut" );
// Create the ZOOM element - this will be added with
// Javascript since it's more of an "effect".
var zoom = $( "<a id='zoom'><span><br /></span></a>" );
// Before we start messing with the scripts, let's
// update the display to allow for the absolute
// positioning of the imageZoomInOut and zoomer.
// Set an explicit height / width on the view based
// on the initial size of the imageZoomInOut.
view.width( imageZoomInOut.width() );
view.height( imageZoomInOut.height() );
// Now that the view has an explicit width and height,
// we can change the displays for positioning.
imageZoomInOut.css( "position", "absolute" );
// Set an exlicit height on the imageZoomInOut (to make sure
// that some of the later calcualtions don't get
// messed up - I saw some irradic caculated-height
// behavior).
imageZoomInOut.height( imageZoomInOut.height() );
// Before we add the zoom square, we need it to match
// the aspect ratio of the imageZoomInOut.
zoom.width( Math.floor( imageZoomInOut.width() / 2 ) );
zoom.height( Math.floor( imageZoomInOut.height() / 2 ) );
// Now, add the zoom square to the view.
view.append( zoom );
// ---------------------------------------------- //
// ---------------------------------------------- //
// Now that we have our UI set up physically, we need
// to bind the event handlers.
// We want to show and hide the zoom only when the
// user hovers over the view.
view.hover(
function( event ){
// Show the soom.
zoom.show();
},
function( event ){
// Hide the zoom.
zoom.hide();
}
);
// As the user mouses over the view, we can get the
// mouse coordinates in terms of the page; we need
// to be able to translate those into VIEW-based
// X and Y cooridates. As such, let's get the offset
// of the view as our base 0x0 coordinate.
//
// NOTE: We are doing this here so that we do it once,
// rather than every time the mouse moves.
viewOffset = view.offset();
// Get the jQuery-ed version of the window as we will
// need to access it's scroll offsets every time the
// mouse moves over the div.
//
// NOTE: This will change the change the refernce to
// "window" for all of the code in this closure.
var window = $( window );
// As the user moves across the view, we want to move
// the zoom square with them.
view.mousemove(
function( event ){
// Get the window scroll top; the mouse
// position is relative to the window, NOT
// the document.
var windowScrollTop = window.scrollTop();
var windowScrollLeft = window.scrollLeft();
// Translate the mouse X / Y into view-local
// coordinates that can be used to position
// the zoom box.
setZoomPosition(
Math.floor(
event.clientX - viewOffset.left + windowScrollLeft
),
Math.floor(
event.clientY - viewOffset.top + windowScrollTop
)
);
}
);
// I position the zoom box within the view based on
// the given view-local mouse coordinates.
var setZoomPosition = function( mouseLeft, mouseTop ){
// Ideally, we want to keep the zoom box centered
// on the mouse. As such, we want the given mouse
// left and mouse top coordiantes to be in the
// middle of the zoom box.
var zoomLeft = (mouseLeft - (zoom.width() / 2));
var zoomTop = (mouseTop - (zoom.height() / 2))
// As we move the zoom box around, however, we
// never want it to go out of bounds of the view.
// Protect the top-left bounds.
zoomLeft = Math.max( zoomLeft, 0 );
zoomTop = Math.max( zoomTop, 0 );
// Protect the bottom-right bounds. Because the
// bottom and right need to take the dimensions
// of the zoom box into account, be sure to use
// the outer width to include the border.
zoomLeft = Math.min(
zoomLeft,
(view.width() - zoom.outerWidth())
);
zoomTop = Math.min(
zoomTop,
(view.height() - zoom.outerHeight())
);
// Position the zoom box in the bounds of the
// imageZoomInOut view box.
zoom.css({
left: (zoomLeft + "px"),
top: (zoomTop + "px")
});
};
// Now that we have the mouse movements being tracked
// properly, we need to track the click on the zoom to
// zoom in the imageZoomInOut on demand. To do that, however,
// we need to start storing some information with the
// imageZoomInOut so we can manipulate it as needed.
imageZoomInOut.data({
zoomFactor: (view.width() / zoom.width()),
zoom: 1,
top: 0,
left: 0,
width: imageZoomInOut.width(),
height: imageZoomInOut.height(),
originalWidth: imageZoomInOut.width(),
originalHeight: imageZoomInOut.height()
});
// Now, let's attach the click event handler to the
// zoom box.
zoom.click(
function( event ){
// First, prevent the default since this is
// not a navigational link.
event.preventDefault();
// Let's pass the position of the zoom box
// off to the function that is responsible
// for zooming the imageZoomInOut.
zoomImage(
zoom.position().left,
zoom.position().top
);
}
);
// I take the zoom box coordinates and translate them
// into an actual imageZoomInOut zoom based on the existing
// zoom and offset of the imageZoomInOut.
//
// NOTE: We don't care about the dimensions of the
// zoom box itself as those should have already been
// properly translated into the zoom *factor*.
var zoomImage = function( zoomLeft, zoomTop ){
// Get a reference to the imageZoomInOut data object so we
// don't need to keep retreiving it.
var imageZoomInOutData = imageZoomInOut.data();
// Check to see if we have reached the max zoom
// or if the imageZoomInOut is currently animating.
// If so, just return out.
if (
(imageZoomInOutData.zoom == 5) ||
(imageZoomInOut.is( ":animated" ))
){
// Zooming in beyond this is pointless (and
// can cause the browser to mis-render the
// imageZoomInOut).
return;
}
// Scale the imageZoomInOut up based on the zoom factor.
imageZoomInOutData.width =
(imageZoomInOut.width() * imageZoomInOutData.zoomFactor);
imageZoomInOutData.height =
(imageZoomInOut.height() * imageZoomInOutData.zoomFactor);
// Change the offset set data to re-position the
// 0,0 coordinate back up in the top left.
imageZoomInOutData.left =
((imageZoomInOutData.left - zoomLeft) * imageZoomInOutData.zoomFactor);
imageZoomInOutData.top =
((imageZoomInOutData.top - zoomTop) * imageZoomInOutData.zoomFactor);
// Increase the zoom.
imageZoomInOutData.zoom++;
// Animate the zoom.
imageZoomInOut.animate(
{
width: imageZoomInOutData.width,
height: imageZoomInOutData.height,
left: imageZoomInOutData.left,
top: imageZoomInOutData.top
},
500
);
};
// I reset the imageZoomInOut zoom.
var resetZoom = function(){
// Get a reference to the imageZoomInOut data object so we
// don't need to keep retreiving it.
var imageZoomInOutData = imageZoomInOut.data();
// Reset the imageZoomInOut data.
imageZoomInOutData.zoom = 1;
imageZoomInOutData.top = 0;
imageZoomInOutData.left = 0;
imageZoomInOutData.width = imageZoomInOutData.originalWidth;
imageZoomInOutData.height = imageZoomInOutData.originalHeight;
// Animate the zoom.
imageZoomInOut.animate(
{
width: imageZoomInOutData.width,
height: imageZoomInOutData.height,
left: imageZoomInOutData.left,
top: imageZoomInOutData.top
},
300
);
};
$("button").click(function(){
resetZoom();
});
// As a final step, to make sure that the imageZoomInOut can
// be zoomed out, bind the mousedown to the document.
$( document ).mousedown(
function( event ){
// Check to see if the view is in the event
// bubble chain for the mouse down. If it is,
// then this click was in the view or its
// child elements.
var closestView = $( event.target ).closest( "#view" );
// Check to see if this mouse down was in the
// imageZoomInOut view.
if (!closestView.size()){
// The view was not found in the chain.
// This was clicked outside of the view.
// Reset the imageZoomInOut zoom.
resetZoom();
}
}
);
});
<!--- html --->
<div id="view">
<img class="imageZoomInOut" height="600" width="400" src="http://imedia.tv.com.pk/tvb/galery_celebrities/medium/Fawad_afzal_khan_image_90.jpg">
</div>
Try to change the padding to
left: 400px;
Tell me if this works for you
EXAMPLE