Refreshing Animated Gif on Button Click - javascript

I have been stuck on this problem for a while now and I need some help trying to figure out how to "refresh" a gif image every time I hit a button. I have tried a ton of the online ideas for this but none of them seem to be working. It only will play the gif once I clear my browser history so I think it may be some caching problem. Can someone spot where I am going wrong or have any tips on how to fix this?
My html:
<div class="logo">
<button class="chains" id="chains" onclick="chains();"></button>
<div id="png">
<img src="images/logo.png" alt=""/>
</div>
<div id="gif">
<img src="images/chains.gif" alt="" />
</div>
</div>
My Javascript function:
<script language="JavaScript">
$( document ).ready(function() {
var myDiv = document.getElementById('gif');
myDiv.style.visibility = "hidden";
});
function chains() {
d = new Date();
$("#gif").attr("src", "images/chains.gif?"+d.getTime());
var logo = document.getElementById("png");
var gif = document.getElementById("gif");
var hide = function(){
logo.style.visibility = "hidden";
gif.style.visibility = "visible";
setTimeout(show, 2300); // 5 seconds
}
var show = function(){
gif.style.visibility = "hidden";
logo.style.visibility = "visible";
}
hide();
};
</script>

I hope I found the answer here!
Let me quote:
in a nut shell load the image into a javascript variable then change out the src on click
$(function(){
var image = new Image();
image.src='http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg5NjAwPg/462b8072';
$('#img').click(function(){
$(this).attr('src',image.src);
});
});
EDITED: https://jsfiddle.net/op3t82ea/2/
Made some changes and enhancements and added comments in the code! Hope this helps :)

Related

Changing picture serveral times by click in HTML with javascript

I need a programm in HTML with javascript which has two pictures that by click changes from picture A to B and from picture B to A and so on. I think I need a loop...
Please Try Following Code
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
You Can Have example here https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb
you can find a good example of what you want to do in here:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
you just need to tweak it a bit so it will change the images correctly.
I would recommend building a function with variables to store the images name.
<script>
function ChangeImage(){
var picElement1 = document.getElementById('HTMLImgElement1');
var picElement2 = document.getElementById('HTMLImgElement2');
var temp = picElement1.src;
picElement1.src = picElement2.src;
picElement2.src = temp;
}
</script>
In the html just set up 2 images with ID HTMLImgElement1 and HTMLImgElement2.
and a button with an onclick attr that will forward to this function.

How to make a simple slideshow in JS?

I'm trying to make a simple slideshow with JavaScript.
Here is my index.html
<body>
<h1>Slideshow example</h1>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"></script>
</body>
And here is slide.js
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
timer: function() {
this.sliderImages.forEach(function(img) {
var container = document.getElementById('container');
var image = document.createElement('img');
container.appendChild(image);
image.src= img;
})
}
}
If I click the "next slide" button, I see both of the images. It loops through the whole array. How could I make it loop through the array just once, when clicking the button?
I tried adding container.innerHTML = ''; so that the previous image would be removed when adding the next image, but that resulted it showing immidietly the image in sliderImages[1]. Am I approaching this whole thing wrong?
I updated your code. It is not the best way to write it but I just modified your example to show you the problem. The problem is your timer function which is just going through all the elements in the array at once. Instead what you may want to do is add some delay.
var slideshow = {
sliderImages: ["img/img1.png", "img/img2.png"],
currentImgIndex: 0,
timer: function() {
if (this.currentImgIndex < this.sliderImages.length ) {
var image = document.getElementById('img');
image.src= this.sliderImages[this.currentImgIndex];
this.currentImgIndex++;
setTimeout(function (){ slideshow.timer()}, 2000)
} else {
alert("no more images");
}
}
}
<body>
<h1>Slideshow example</h1>
<img id="img"/>
<button onclick="slideshow.timer()">Next slide</button>
<div id="container"></div>
<script src="slide.js"> </script>
</body>
If you are going to change the images only when the button is clicked, you don't need the forEach loop. If you are going to change images without user interaction then you need the loop but you need setInterval also.

i need to add a link to a single image that already has a change source function

I am trying to add a link to a single image that already has a change source function attached to it.
The site has a gallery that uses thumbnails to change the larger image so there are 27 images. I am triyng to add an individual link to one of this images.
all the code i am finding uses id's and in order to keep the change source function working, none of these solutions will work.
The link is for only one image. Here is my code:
<script>function changeImage27()
{
var img = document.getElementById("image");
img.src="thestudio/thestudio_27.gif";
}
</script>
And my HTML:
<div id="slideshow">
<img id="image" src="thestudio/thestudio_1.gif" />
</div>
<a id="clickme" onClick="changeImage();"><img border="0"src="thestudio/thestudio_1t.gif"></a>
I only need to link one image. so i am looking for a solution that adds a hyperlink in the script. a.href="" is not working and i cant seem to find any other solutions.
This may be a better solution:
<head>
<script type="text/javascript">
var images = ["image1.gif","image2.gif",...,"image27.gif"];
var thumbs = ["image1t.gif","image2t.gif",...,"image27t.gif"];
var basePath = "thestudio/";
var currentImage = 0;
function changeImage() {
var img = document.getElementById("image");
var thumb = document.getElementById("thumb");
img.src = basePath + images[currentImage];
thumb.src = basePath + thumbs[currentImage];
currentImage ++;
if (currentImage >= images.length) {
currentImage = 0; // this will cause it to loop
}
}
</script>
</head>
<body onLoad="changeImage();">
<div id="slideshow">
<img id="image">
</div>
<a onClick="changeImage();" href="#"><img border="0" id="thumb"></a>
</body>
So you don't have to have 27 different functions.
You could also define the images like follows:
var images = [{image:"image1.gif",thumb:"image1t.gif"},...{image:"image27.gif",thumb:"image271.gif"}];
Then in changeImage:
var image = images[currentImage];
img.src = basePath + image.image;
thumb.src = basePath + image.thumb;
Here you go:
Take a look at this JSFiddle I put together for you.
Cheers!
http://jsfiddle.net/douglasloyo/aR83b/
<script>
window.changeImage = function changeImage()
{
var img = document.getElementById("my-img");
var newImgSrc = "http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/dog-leader-pack.jpg";
img.src=newImgSrc;
}
</script>
<img id="my-img" src="http://www.johnlund.com/ArticleImages/Artcl38-stock-ideas/ocean-island- palm.jpg" />
<button onclick="window.changeImage();">ClickMe</button>

how to disappear an animated gif with javascript

i have this code and would like to have an animated gif to disappear after 3 seconds. i learned that i need to add window.onload=loadingGif(); to ensure the 'loadingGif' function is fired when the page loads. i stll have the problem that this code is not working how it should do. i would like to know what is going wrong with that? thanks.
i´m sorry i posted the wrong code. it must be:
<body>
<script type="text/javascript">
var counter = 3;
function downcount() {
document.getElementById('digit').firstChild.nodeValue = counter ;
if (counter == 0 ) {
document.getElementById('loading').style.display = 'none';
document.getElementById('msg').style.display = 'block';
} else {
counter--;
window.setTimeout('downcount()', 1000);
}
}
window.onload=downcount;
</script>
<div id="loading">
<img src="loading/loading40.gif"/>
</div>
<div id="msg" style="display:none">
<?PHP echo $_SESSION['msg'];?>
</div>
Close the img tag.
Also, where's digit? If that doesn't exist then you'll be getting JS errors.
You're doing three 1s setTimeout to wait for 3 seconds? Here is a simpler solution, right out of my head...
window.onload = setTimeout(removeImg, 3000)
var removeImg = function() {
document.getElementById('loading').style.display = 'none'
document.getElementById('msg').style.display = 'block'
}

A few javascript issues: strange time dependence and images not loading 1st time

I'm trying to create a script for creating an overlay containing an image and some text, but i've run into some problems
1st: the image in the overlay doesn't appear when first clicked, but does on subsequent openings.
2nd: the scrollTo function only works if put in a timeout, otherwise it appears to do nothing.
If anyone could shed any light on this, or any other mistakes i've made, it would be much appreciated.
javascript:
var scrollY;
var i_w;
var i_h;
function showOverlay(filepath,num){
scrollY = document.body.scrollTop || document.documentElement.scrollTop;
hideOverlay();
document.getElementById("num").innerHTML ="image #: " + num + " click image to close";
var preload = new Image();
preload.src = filepath;
i_w = preload.width;
i_h = preload.height;
document.getElementById("blowup").width = i_w;
document.getElementById("blowup").height = i_h;
document.getElementById("blowup").src = filepath;
document.getElementById("overlay").style.display = "inline";
setTimeout("window.scrollTo(0,scrollY)",1);
setOverlayBounds(); //a function to orient the overlay div.
}
html:
<div id="overlay">
<center>
<img id="blowup" src="#" onClick="javascript:hideOverlay()">
<br>
<p id="num"></p>
<br>
</center>
</div>
css:
#overlay
{
display:none;
position:absolute;
background-color:#999;
border:medium;
border-color:#0F0
}
You should use the load event for the image to make sure, it finished loading before you execute your code. Also, you shouldn't use strings in connection with setTimeout. It's better to pass the function directly:
var preload = new Image();
preload.src = filepath;
preload.onload = function() {
i_w = preload.width;
i_h = preload.height;
document.getElementById("blowup").width = i_w;
document.getElementById("blowup").height = i_h;
document.getElementById("blowup").src = filepath;
document.getElementById("overlay").style.display = "inline";
setTimeout(function(){window.scrollTo(0,scrollY);},1);
setOverlayBounds(); //a function to orient the overlay div.
};
This should at least fix your first issue.

Categories