jQuery zoom function not working on hover image - javascript

I am using this library: https://www.jacklmoore.com/zoom/
It adds a zoom function when hovering over an image. I did add the library in my theme and added this jQuery code to my js file:
$(document).ready(function(){
$('.head-image img').zoom();
});
This is the HTML where the image is located:
<div class="head-image">
<img src="<?php the_post_thumbnail_url('full'); ?>" class="img-fluid">
</div>
When I hover the image on the webpage nothing changes but if I look in the inspector I do see that the zoomImg class is added and the CSS is changing but I dont see the image zooming.
Here is the webpage URL: https://www.dev.ruitershopboxmeer.nl/paard/zadels-en-toebehoren/zadeldekjes/kingsland-zadeldekje-carin/
Does someone know why the image is not zooming?
Thanks for your time!

First fix the error in the beginning of the page (line 14 generated HTML)
<script>if(flycart_woo_discount_rules_strikeout_script_executed == undefined){jQuery( document ).ready( /* .... */
This needs to be moved at the end of the body to avoid issues
Next, make sure to include JQuery and Zoom correctly (from demo)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='path/to/jquery.zoom.js'></script>
The imported JQuery is 3.4.1 and I am not sure Zoom is still compatible with it as demo was using 1.10.2.

I have an alternate solution to your requirement here:
const img=document.querySelector('.image');
const pro=document.querySelector('.image img');
img.style.width=(pro.clientWidth)+'px';
var zoomSize = pro.clientHeight*6;
img.addEventListener('mousemove', printPosition);
img.addEventListener('mouseout', back);
function getPosition(e) {
var rect = e.target.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
}
}
function printPosition(e) {
var position = getPosition(e);
xpos=position.x * (100/pro.clientWidth);
ypos=position.y * (100/pro.clientHeight);
pro.style.transition="0s";
pro.style.transform='translate('+xpos*-5+'%, '+ypos*-5+'%)';
pro.style.height=zoomSize+"px";
console.log('X: ' + xpos + ' Y: ' + ypos);
}
function back(e) {
pro.style.transform='translate(0px, 0px)';
pro.style.height='100%';
pro.style.transition="1s";
}
https://codepen.io/thevectorator/pen/NWGeBPm

Related

Is there a reason why my html refuses to call the javascript function from external .js file?

EDIT: Thankyou for the instructive responses, however, nothing has been succesful. Everything works as it is supposed to otherwise, but for some reason the <body onmousemove = coordinate(event)> does not call the functions from index.js (my external javascript file). I am using codesandbox.io, could this be the problem?
The javascript is succesfully called by the HTML to draw on the canvas, but whenever I try to refer to a function it does not call it. >:(
As the title suggest, I have been pulling my hair out trying to understand why the coordinate(event) function refuses to be called from my src file.
The idea is a simple one, as the cursor moves across the screen the x and y coordinates of the cursor should be logged in the text boxes. However, when I run this nothing happens.
Javascript:
let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext('2d'); //ctx = context
ctx.clearRect(0,0,800,800)
function coordinate(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById("txt_iX").value = x;
document.getElementById("txt_iY").value = y;
}
// Box width
var bw = 800;
// Box height
var bh = 800;
//Square size
var sq = 20
// Padding
var p = 0;
for (var x = 0; x <= bh; x += sq) {
for (var y = 0; y <= bw; y += sq) {
ctx.fillStyle = 'black';
ctx.moveTo(p, 0.5 + x + p);
ctx.fillRect(x,y,sq,sq)
}}
function drawBoard(){
for (var x1 = 0; x1 <= bw; x1 += sq) {
ctx.moveTo(0.5 + x1 + p, p);
ctx.lineTo(0.5 + x1 + p, bh + p);
}
for (var x2 = 0; x2 <= bh; x2 += sq) {
ctx.moveTo(p, 0.5 + x2 + p);
ctx.lineTo(bw + p, 0.5 + x2 + p);
}
ctx.strokeStyle = "green";
ctx.stroke();
}
drawBoard();
HTML:
<html>
<head>
<title>EXCEL_DM</title>
<meta charset="UTF-8" />
<script type=”text/javascript” src = "src/index.js"> </script>
</head>
<body onmousemove = coordinate(event)>
<canvas id = "gameScreen" width="800" height = "800" ></canvas>
<br><br>
<input id = "txt_ix" placeholder="txt_ix">
<br><br>
<input id = "txt_iy" placeholder="txt_iy">
</body>
</html>
To fix your issue, there are three options. All of them will work, but you can choose which one you like the best.
1. Moving script tag in body
Right now, you are loading the JavaScript before the canvas element. This makes it difficult for JavaScript to find the element.
To fix this, simply move the script tag to the last line (before the </body> tag).
An example is below:
<head>
<!-- No more JavaScript here! -->
</head>
<body>
<!-- Other HTML code here... -->
<script src="src/index.js"></script>
</body>
2. Adding the defer attribute
If you didn't know, the script tag has an attribute called defer.
According to MDN Web Docs:
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
To add this, simply leave your script tag in the head, but change it so it looks like below.
<head>
<!-- Still in the head! -->
<script defer src="src/index.js"></script>
</head>
3. Add an addEventListener call to JavaScript
If you don't want to change your HTML, then you can add an event listener in JavaScript, using the DOMContentLoaded event. For more information, visit MDN Web Docs.
To implement this feature in your JavaScript code, simply add the following:
// You can also use the function keyword if you're targeting older browsers.
document.addEventListener("DOMContentLoaded", (event) => {
console.log("Hello, world! I'm loading after the DOM!");
});
Keep in mind: DOMContentLoaded fires once the DOM has loaded, not after images, stylesheets, etc. have loaded.
If you only want your script to run after everything has been loaded (images, stylesheets, etc.), then use the load event (MDN reference), like below:
// You can also use the function keyword if you're targeting older browsers.
window.addEventListner("load", (event) => {
console.log("Hello, world! I'm loading after everything!");
});

How do you get the color of a specific pixel on a webpage in javascript? (no canvas)

I have been trying to figure out a way to find the color of a pixel on my webpage. As I have searched for an answer, all I have found is how to do this in a canvas element. Is there a way to do this for the entire page, and if so, how?
Here is an example piece of code that shows a basic part of what I am doing.
//this executes whenever the mouse is moved
document.addEventListener('mousemove', (event) => {
//this just simplifies the varables
mouseX = event.clientX;
mouseY = event.clientY;
document.getElementById("info").innerHTML = "Position: ( " + mouseX + " , " + mouseY + " ) | Color: " + getColor();
// What command do you use to do this? Is it related to the document object? ^
});
function getColor() {
return (" rgb ( 2, 5, 7 ) ");
};
<!DOCTYPE html>
<html>
<body>
<p id="info"><br></p>
<img width="250" src="https://pngimg.com/uploads/chicken/chicken_PNG2160.png"/>
</body>
</html>
I don't know if this is best practice, but you could set up all the elements on the page with a mouseover event that would tell your app what element being hovered. The app could check the element to find out what color it is.

Converting jQuery parallax function to vanilla javascript

This is a working parallax function that works by adding ' data-type="parallax" ' and ' data-speed="5" ' data attributes to the HTML element you wish to parallax.
However, it is the only jQuery I am using on my site. I was hoping to convert it to vanilla js to save some bundle size.
All of my attempt have failed. Any help is appricated!
$(() => {
// Cache the Window object
const $window = $(window);
$('[data-type="parallax"]').each(function() {
const paraElm = $(this); // assigning the object
$window.scroll(() => {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
const yPos = -($window.scrollTop() / paraElm.data('speed'));
// Put together our final background position
const coords = `50% ${yPos}px`;
// Move the background
paraElm.css({ backgroundPosition: coords });
});
});
});

Constrain jquery draggable to stay only on the path of a circle

So Im trying to make something where the user is able to drag planets along their orbits and it will continuously update the other planets. Ideally I would like this to work with ellipses too.
So far I can drag an image node with jquery and check/change the coordinates, but i cannot update the position reliably while the user is dragging the object. I know there is an axis and a rectangle containment for draggable but this doesn't really help me.
I have a site for calculating planetary orbits http://www.stjarnhimlen.se/comp/ppcomp.html and a formula i think should help me if i can figure out how to constrain the draggable object with coordinate checks Calculating point on a circle's circumference from angle in C#?
But it seems like there should be an easier way to have a user drag a sphere along a circular track while it updates coords for other spheres
here's what i have so far. It's not much
http://jsfiddle.net/b3247uc2/2/
Html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Js
var $newPosX = 100,
$newPosY = 100;
//create image node
var x = document.createElement("IMG");
x.src = "http://upload.wikimedia.org/wikipedia/commons/a/a4/Sol_de_Mayo_Bandera_Argentina.png";
x.width = 100;
x.height = 100;
x.id = "sun";
x.hspace = 100;
x.vspace = 100;
document.body.appendChild(x);
//coords
var text = document.createTextNode($newPosX + " " + $newPosY);
document.body.appendChild(text);
//make sun draggable and update coords
$("#sun").draggable({
drag: function (event, ui) {
$newPosX = $(this).offset().left;
$newPosY = $(this).offset().top;
}
});
//0 millisecond update for displayed coords
setInterval(check, 0);
function check() {
//tries to constrain movement, doesn't work well
/*
if ($newPosX > 300) {
$("#sun").offset({
left: 200
});
}
*/
text.nodeValue = ($newPosX + " " + $newPosY);
}
Edit:
I found this and am trying to modify it to suit my purposes but have so far not had luck.
http://jsfiddle.net/7Asn6/
Ok so i got it to drag
http://jsfiddle.net/7Asn6/103/
This is pretty close to what I want but can be moved without being clicked on directly
http://jsfiddle.net/7Asn6/104/
Ok final edit on this question. This one seems to work well and have fixed my problems. I would still very much like to hear peoples implementation ideas or ideas to make it work smoother.
http://jsfiddle.net/7Asn6/106/

Pure JavaScript Image Grab-Zoom?

In the past I came across http://www.jacklmoore.com/zoom/ which was a great find and very simple to use for a variety of images. I am looking for a grab-zoom feature using pure-javascript rather than jQuery. Is there any Pure-Javascript solution for this? I've attempted this with no luck so far:
Javascript:
var imgSize = 1;
function zoomIn() {
imgSize += 0.1;
document.body.style.imgSize = imgSize + "em";
}
function zoomOut() {
imgSize -= 0.1;
document.body.style.imgSize = imgSize + "em";
}
HTML
<img src="picture.png" value="+" onClick="zoomIn()"/>
Thanks in advance for any helpful tips!
The general idea is to display the smaller sized image ("original") and when the mouse is hovering over the container, the background image of the container is revealed. The background image is large, and the CSS background is clipped by the container's size. Mouse events are tracked. You'll have to work out the measurement and math yourself.
<div id="imageview" style="position:relative;width:300px;height:200px;"
>
<img src="300x200.jpg" id="original" onmouseover="this.style.display='none';">
</div>
<script>
document.getElementById('imageview').onmouseover=function(e){
document.getElementById('original').style.display='none';
var x,y;
if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}
document.getElementById('imageview').orgx=x;
document.getElementById('imageview').orgy=y;
}
document.getElementById('imageview').onmousemove=function(e){
var x,y;
if (e) {x=e.clientX;y=e.clientY;} else {x=event.clientX; y=event.clientY;}
var orgx=document.getElementById('imageview').orgx;
var orgy=document.getElementById('imageview').orgy;
//now you have x, y, orgx, and org y, so you can do some math
// ...
var posx, posy;
document.getElementById('imageview').backgroundImage='url(600x400.jpg)';
document.getElementById('imageview').backgroundPosition=-1*posx+'px '+ -1*posy+'px';
}
</script>
Please give this image zooming library (written by me) a try: https://github.com/kingdido999/zooming
It's implemented in pure JavaScript with no extra dependency.

Categories

Resources