I'm currently trying to play a gif every 10 seconds, instead of continuously every time the gif finishes.
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
setInterval(function() {
console.log($('#inviteLogo').attr('src'))
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1)
}, 2000)
</script>
</div>
Currently, I have this. However. As you can probably see, this only plays the gif once. I'm not entirely sure how I can make this play the gif every x seconds?
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
var image = $('#inviteLogo').attr('src')
setInterval(function() {
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1)
$('#inviteLogo').attr('src', image)
}, 2000)
</script>
</div>
I have also tried the above. Saving what the original SRC atr is, and then replacing it with the old one every 2 seconds. But this did not have my desired effect either.
First of all you have 2 setInterval... And one is repeating every milliseconds.
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 1) // 1 second == 1000 milliseconds
If you have control on the frame of the gif, you can also put a frame fixed for 10sec.
so I thing the best way will be
<div class=mainScreenBox>
<img id="inviteLogo" src="./assets/Happy_Logo_High_Res.gif" alt="Happy Virus" src="" width="364.166666667">
<script>
var image = $('#inviteLogo').attr('src')
setInterval(function() {
$('#inviteLogo').attr('src', $('#inviteLogo').attr('src'))
}, 10000) // 1000 == 1sec
</script>
</div>
Related
Is it possible to automatically change an image's source after a countdown/timer has reached zero? Let's say that I have 2 image sources - A and B, and one timer. How can I change the image source from A to B, when the timer has expired?
<img class="image" src="A">
<div class="timer"></div>
Timer expires:
<img class="image" src="B">
<div class="timer">Expired</div>
You can change the src with JavaSript's .src.
Here's an example:
var changeSrc = function() {
document.getElementById("image").src="http://via.placeholder.com/150x150";
}
var count=10;
var counter=setInterval(timer, 1000);
function timer() {
count=count-1;
if (count <= 0) {
clearInterval(counter);
changeSrc();
}
document.getElementById("timer").innerHTML = count;
}
<img id="image" src="http://via.placeholder.com/350x150">
<br>
<div>Timer: <span id="timer">10</span></div>
Looking for a (simple) way to create a slideshow for my website I found the following question here: How to create image slideshow in html?. I borrowed the (corrected) code, adapted it to my needs and now I have what I wanted, but the transition between the images is too fast. It's not about the speed of the slideshow, but the blending or fading from one image into the next. The changes come too suddenly. I want them to happen gradually and smoothly. What can I add to it or how can I change it to slow it down? Here is it:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
</body>
Thank you for your help.
You can do it by doing following change in your code
setTimeout(slideit(),10000);
instead of
setTimeout(slideit(),2500);
Here 2500 means 2.5 seconds and 10000 means 10 seconds, according to need you can use any parameter.
Hope this can solve your problem.
As per your comment, you want to show the transition between image changes, then use jquery and do this in sequence:
Animate opacity to 0 (fadeOut),
change the image,
animate the opacity to 1 (fadeIn)
or write your own animation logic to do the same without jquery.
Solution using jquery:
var $slide = $(document.images.slide);
function slideit() {
//fadeout the last image.
$slide.fadeOut(function () {
document.images.slide.src = eval("image" + step + ".src");
//after changing the image, fadeIn the new image.
$slide.fadeIn(function () {
if (step < 2) step++;
else step = 1;
//everything is done... now run the timer for next slide.
setTimeout(slideit, 5500);
});
})
}
jsfiddle: http://jsfiddle.net/vaf84vLd/
Trying to get images to refresh themselves with javascript a set number of times, then stop (to avoid large cache generation). This code won't function though, so not sure what's missing?
<script>
var c = 0;
function fnSetTimer()
{
document.getElementById('refreshimage1').src='http://68.116.42.142:8080/cam_4.jpg?\'+new Date().getMilliseconds();
var t = setTimeout(fnSetTimer,5000);
c=c+1;
if(c>5)
clearTimeout(t);
}
</script>
<img src="http://68.116.42.142:8080/cam_4.jpg"; id="refreshimage1" onload="fnSetTimer()" width="400" />
However, this code does work:
<img src="http://68.116.42.142:8080/cam_4.jpg"; id="refreshimage2" onload="setTimeout('document.getElementById(\'refreshimage2\').src=\'http://68.116.42.142:8080/cam_4.jpg?\'+new Date().getMilliseconds()', 5000)" width="400" />
So if you place both side by side, the bottom image will refresh (indefinitely), but the top image just loads once and never refreshes. Any thoughts what I missed in the top code?
The problem is that the function re-loads the image, which calls the function, which re-loads the image...
You also had a problem with the image url - '\' is used to escape special characters, if you want a slash you need two - '\\'
PUT THIS IN YOUR HEADER
<script language="javascript">
function fnSetTimer(image, src, counter, limit)
{
image.onload = null;
if(counter < limit)
{
counter++;
setTimeout(function(){ fnSetTimer(image, src, counter, limit); },5000);
image.src= src+ '?\\'+new Date().getMilliseconds();
alert(counter); // show frame number
}
}
</script>
PUT THIS IN THE BODY
<img src="http://68.116.42.142:8080/cam_4.jpg"; id="refreshimage1" onload="fnSetTimer(this, this.src, 0, 5);" width="400" />
This should fix it for you - it only fires onLoad once and then loops through 5 times, and you should be able to edit the image tag in Wordpress, etc.
MAKE SURE YOU GIVE EACH IMAGE A DIFFERENT ID
I'm having trouble with fast forwarding a timer. It is very basic at this stadium. I have a interval that add numbers. Like this:
setInterval(function () {
//+1 second
//Format output to 00:00
//Handle minute update
}, 1000);
This works perfect. The timer is going at normal speed. What I want to do is fast forwarding this timer. I want a timer minute to take 1 real second. I have tried:
setInterval(function () {
//+1 second
//Format output to 00:00
//Handle minute update
}, 15);
That works sometimes and sometimes not. Sometimes it stops att 01:02 instead of 01:00. It may be my lack of math knowledge but I don't know. How would you do it? I am going to stop and start the timer every "timer minute" so it's important that the interval is correct.
EDIT
Here is a fiddle of how I want it to work: http://jsfiddle.net/tbleckert/pF4gs/
EDIT 2
Maybe I should just adjust the time when I stop the timer?
EDIT 3
It seems like 15 ms works most of the times. But something makes ut unreliable, I think the best way is to just adjust the time.
I think what you should be doing is storing your interval in a variable so that you can clear it, and start it again with a different delay.
var delay = 1000; // JavaScript uses milliseconds, so 1000 = 1 second
var theTimer = '';
function startTimer(){
theTimer = setInterval(function () {
// Do awesome stuff here
}, delay);
}
startTimer();
Now when you want to change the interval, or fast forward the timer, all you have to do is clear the current setInterval and define it again -
clearInterval(theTimer); // stop and clear the current timer
delay = 500; // Crank it up to twice the speed! 0.5 seconds!
startTimer(); // start a new setInterval();
Here is a simple demo
<!DOCTYPE html>
<html>
<head>
<script>
function myTimer(){
this.startTime=0;
this.intervalID=0;
this.timePassed=0;
this.multiplier=1;
this.outputElement=null;
this.start=function(){
clearInterval(this.intervalID);
this.timePassed=0;
this.outputElement=document.getElementById("output");
this.startTime=new Date();
var me = this;
this.intervalID=setInterval(function(){
me.update(me);
},100);
}
this.toTwoDigit=function(num){
if(num<10){
return "0"+num;
}
return new String(num);
}
this.toThreeDigit=function(num){
if(num<10){
return "00"+num;
}
if(num<100){
return "0"+num;
}
return new String(num);
}
this.update=function(me){
me.timePassed=me.timePassed+(100*me.multiplier);
var seconds=Math.floor(me.timePassed/1000);
var hours = Math.floor(seconds/3600);
var minutes = seconds-(hours*3600);
seconds = seconds%60;
minutes=Math.floor(minutes/60);
me.outputElement.innerHTML= me.toTwoDigit(hours)+":"
+me.toTwoDigit(minutes)+":"
+me.toTwoDigit(seconds)
+":"+me.toThreeDigit(Math.floor(me.timePassed%1000));
}
this.speedup=function(){
this.multiplier=this.multiplier*2;
}
this.slowDown=function(){
this.multiplier=this.multiplier/2;
}
this.stop=function(){
clearInterval(this.intervalID);
this.update(this);
}
}
var t = new myTimer();
</script>
</head>
<body onload="t.start();">
<input type="button" value="speed up" onclick="t.speedup()"></input>
<input type="button" value="slow down" onclick="t.slowDown()"></input>
<input type="button" value="stop" onclick="t.stop()"></input>
<input type="button" value="restart" onclick="t.start()"></input>
<input type="button" value="(re)start times 60" onclick="t.multiplier=60;t.start()"></input>
<div id="output"></div>
</body>
</html>
Ok so I'm going to answer this myself. I don't think I was clear enough. When I start the timer a timeout starts at the same time, that after one second stops the timer. This is where it goes wrong, the timer doesn't always show 01:00 when it stops.
So, the final solution is the set the seconds to 00 every time it stops, and because it all happens so fast, you wont notice.
setTimeout(function () {
clearInterval(interval);
$('.clock').html(rMin.slice(-2) + ':00');
}, 1000);
Check my updated fiddle:
http://jsfiddle.net/tbleckert/pF4gs/2/
So I've got a header image that upon being clicked animates with transit, fades out, and fades back in with a new image. I'm then able to click on the new image and it will also animate and fade out to blank space. How can I continuously animate/fade through a series of ordered images - one new image per click ad infinitum?
Here's what I've got so far...
$(document).ready(function(){
$("#headuh").click(function(){
$("#headimg").transition({ skewY: '30deg' },1000);
$("#headimg").fadeOut(function() {
$(this).transition({ skewY: '00deg' }) .load(function() { $(this).fadeIn(); });
$(this).attr("src", "/imgurl.jpg");
You can use the javascript function called setInterval(); like this:
setInterval(function(){
//this code will keep on executing on every 2 seconds.
},2000)
The following snippet doesn't solve your problem exactly, but it might put you on the right track, as it randomly cycles through a set of 28 images with fading in and out. You can see it live at http://moodle.hsbkob.de:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var g_first_call = true;
var g_pic_old;
$(document).ready(function() {
pickPic();
setInterval("pickPic()", 7500);
});
function randomPic() {
do {
var pic = parseInt(28*Math.random()+1);
} while (pic == g_pic_old); // Don't want same pic twice
g_pic_old = pic;
document.getElementById("_image_").src = "./picfolder/picno" + pic + ".jpg";
}
function pickPic() {
if (g_first_call) {
randomPic();
g_first_call = false;
}
$("#_fadee_").fadeIn(750, function() {
$("#_fadee_").delay(6000).fadeOut(750, randomPic);
});
}
//]]>
</script>
<div id="_fadee_"><img id="_image_" alt="Image" /></div>