I made a small image gallery with one big image along with few small ones under neath. there is a zoomer attached with big image and when i click on small image it replaces the big image but zoomer shows the old image instead of new one
jQuery
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
javascript
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src=img.src;
$(document).trigger("ready");
}
html
<img id="myimage" src="img/abc.jpg" alt="" />
<image src="thumbnails/xyz.jpg" onClick="movImg(this);" width="73px" style="cursor: pointer;" />
where i am wrong or what's the right way to do it?
Thanks
Try to call $('#myimage').addpowerzoom(); instead of $(document).trigger("ready");
This worked for me. It looks like the slight delay that happens when you change the source of the image breaks powerzoom. The idea is to call addpowerzoom() after image is loaded.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src = img.src;
jQuery('#myimage').one("load", function() {
jQuery('#myimage').addpowerzoom();
});
};
jQuery(document).ready(function($){
$('#myimage').addpowerzoom();
});
</script>
</head>
<body>
<img id="myimage" src="img/abc.jpg" alt="" />
<img id="thumb" src="thumbnails/xyz.jpg" onClick="movImg(this);" width="64px" style="cursor: pointer;" />
</body>
</html>
Related
I'm making an image gallery using vanilla JavaScript. I'm trying to make it so that clicking on a thumbnail will change the srcattribute in the img tag with the class gallery-highlight, updating the image shown to the user. But when I open my HTML file in Firefox and click on an image thumbnail, it does nothing. My JavaScript doesn't seem to be doing anything to the page. How can I fix this?
Here's what I've got:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width, initial-scale-1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<img src="./efrain-big.jpg" class="gallery-highlight" alt="" />
<div class="room-preview">
<img src="./efrain-small.jpg" alt="" />
<img src="./heather-small.jpg" alt="" />
<img src="./jimmy-small.jpg" alt="" />
</div>
</body>
</html>
function imageGallery() {
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".room-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace('small', 'big');
highlight.src = bigSrc;
});
});
}
imageGallery();
I think the problem is with the way you organized your project. From what can i see ( the HTML code) you happen to have all the files in one folders. No subfolders for js and css. If that’s not the case you need to fix the src of js in the script tag .
I am trying to make a button which when held down should change the picture next to it and then when you are not holding down on the button it will be on the original image. Now it comes up with the button and the image and knows that the picture of the button is a button but doesn't change the image.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
var button=document.images["button"];
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg";
return true;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="return handleMDown()" onmouseup="return handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="return handleMDown()"
onmouseup="return handleMUp"></a>
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
So here's the thing:
First of all, as mentioned by Petr Felzmann
syntax error: missing variable name: var =document.images["goo.gl/jjOUxT"]
Second of all, in your onmousedown & onmouseup events you can call the function by going handleMDown(); or handleMUp(); instead of your return handleMDown().
Last but not least, I've changed the images around a bit, this is just so I could test it properly, but from what I understood this is what you basically wanted:
HTML
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="handleMDown();" onmouseup="handleMUp();">
<!-- Changed the onmousedown & onmouseup to handleMDown(); or handleMUp(); accordingly -->
<img id="button" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown();" onmouseup="handleMUp();"></a>
<!-- Changed the onmousedown & onmouseup to handelMDown(); or handleMUp(); accordingly -->
<img id="imagechange" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height=" 220" alt="image">
</body>
Javascript
function handleMDown() {
document.getElementById("imagechange").src="http://www.veryst.com/_Images/Material%20Testing%20--%20Modeling%20Services/Small%20punch%201.png";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" ;
return true;
}
Don't forget to change the images back in the Javascript as well as in the HTML
Hope this helps!
you should put script tag in before close body tag :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Click in button</h1>
<a href="#" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp">
</a>
<img id="imagechange" src="green.jpg" width="220" height=" 220" alt="image">
<script>
var button= document.images["button"];
var e =document.images["http://goo.gl/jjOUxT"]
function handleMDown()
{document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
return true;
}
</script>
</body>
</html>
You tried too much, you can do it much simpler. I stripped it down to the bare minimum: changing the images on the right of the big red button. I stripped the link, too, just add it back if you need it.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="handleMDown()"
onmouseup="handleMUp()">
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
The event-handler (the onthingy attributes if you excuse my simplifying) do not make use of any return of the functions they call, they just call them. If you want to call functions (function fun(){...}) you need to add () at the end of the function name, you forgot that in one places.
you can use onmousedown and onmouseup to handle these events
document.getElementById('red').onmousedown = function () {
document.getElementById('red').style.backgroundColor = 'red';
};
document.getElementById('red').onmouseup = function () {
document.getElementById('red').style.backgroundColor = 'blue';
};
http://jsfiddle.net/kdyr8owk/
Change your HTML code to:
<img id="button" src="http://goo.gl/VqDdz0" style="width: 220px; height: 220px; border: 0;" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="imagechange" src="put your NOT holding button down source here" alt="image" style="width: 220px; height: 220px;">
Note that I changed your HTML code to match today's standard of using CSS to style elements.
Change your JavaScript code to:
function handleMDown() {
document.getElementById("imagechange").src="put your holding button down source here";
}
function handleMUp()
{
document.getElementById("imagechange").src="put your NOT holding button down source here";
}
Check out fiddle here.
Just beginning to learn HTML & Javascript.
I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
<img id="bigpic" src="bigpic" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
Best wishes.
Add style "display:none" to picture tag
<img id="bigpic" src="bigpic" style="display:none;"/>
And in function picture change it for show image
document.getElementById('bigpic').style.display='block';
There is demo: http://jsfiddle.net/eX5kx/
Use display property in css, try this:
javascript:
function showPicture() {
var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
var img = document.getElementById('bigpic')
img.src = sourceOfPicture.replace('90x90', '225x225');
img.style.display = "block";
}
html:
<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>
I like shin solution, i would do the same thing myself. However theres a lot of way to do that, another option is to put a tiny trasparent image as default and then replace like you did to the other one. like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
<script type="text/javascript">
function picture(){
var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
document.getElementById('bigpic').src = pic.replace('90x90', '225x225');
}
</script>
</head>
<body>
// tiny trasparent image
<img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />
<button onclick="picture()">Enlarge</button>
</body>
</html>
this way no css is needed but like i said before i prefer Shin's solution.
I would like to create a button that when clicked a static image is displayed as the html canvas elements background?
How can I go about doing this?
Not sure if a stylesheet switcher is the right direction? Maybe there is a smarter solution?
Try this
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSet').click(function(){
$('#canvas').css("background","url('plant1.jpg')");
});
});
</script>
</head>
<body>
<canvas id="canvas" width="500" height="200">
</canvas>
<br/>
<button id="btnSet">Set Canvas BG</button>
</body>
</html>
if all you want to do is display an image, you might as well use an img tag:
<script>
function() setImage() {
document.geTElementById("myImage").src = "myImage.jpg";
}
</script>
<input type="button" value="Set Image" onclick="setImage()"/>
<img id="myImage"/>
make sure myImage.jpg actually points to your image offcourse.
I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
First of all, this line
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click() there.
If you read the JavaScript you've got there, document.getElementById('foo') it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the <img> above the JS click binding too.
You can't bind an event to the element before it exists, so you should do it in the onload event:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
Enclose <img> in <a> tag.
<img src="smiley.gif">
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
<img src="smiley.gif">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>