I have created a Windows Sidebar Countdown gadget where there is a PIC in the BG and below it there's that countdown when finished it shows a text message , Now what I want to do is that I want to add a slideshow in the BG ( of 3 to 4 images) ... So experts please guide me with this.
You can use the setTimeout method from javascript, and after every few seconds change the background image in the body.
document.body.background = "image.gif"
eg.
setTimeout('changeImage(1)',1000);
function changeImage(i)
{
if i == 4 return;
document.body.background = 'image'+i+'.gif';
setTimeout('changeImage('+(i+1)+')',1000);
}
You should have the images image1.gif, image2.gif and so on in the same folder as your gadget.html
Related
first of all I don't really know anything about JavaScript.
I have a website slideshow with the following code:
//* Slideshow 1 *//
var slider_img_1 = document.querySelector(".image_slide_1");
var images_1 = ["fabric1_1.jpg", "fabric1_2.jpg", "fabric1_3.jpg", "fabric1_4.jpg", "fabric1_5.jpg"];
var i = 0;
//* Slideshow 2 *//
var slider_img_2 = document.querySelector(".image_slide_2");
var images_2 = ["book1_1.jpg", "book1_2.jpg", "book1_3.jpg", "book1_4.jpg", "book1_5.jpg", "book1_6.jpg", "book1_7.jpg"];
var j = 0;
When clicking on the slideshow the images cycle through.
Is it possible to let the images inside the var brackets preload, because currently they only start loading when clicking on the slideshow, which takes a lot of time in my case.
I hope you understand my question well. Thank you guys!
In this use case (if you need to load images with JavaScript) it would probably be best to append you images in to HTML when page is loaded and hide them, with CSS for example, when they shouldn't be visible.
I was wondering if there was anyway to make a slideshow of images with a countdown timer on the slideshow.
I am making an exercise app, and need a course option. On the course option it is going to show an exercise for 20 seconds, then rest for 10 seconds etc. until the end of the course.
I have all the exercises ready, in images. I just need a code to show an image slideshow, with a countdown timer with it.
Thanks!
Slideshow with a timer would be using a setInterval() method. Try this:
<img src="some_source/to/file.png" alt="text" />
Then you can run a function to change its src attribute as
setInterval(changeAttr, 20000);
function changeAttr() {
$('img').attr('src', 'next_image.png');
}
You can use an if else block to change the image something like:
if($('img').attr('src') == 'some_image_file.png') {
$('img').attr('src', 'new_image_file.png');
}
Now the timer would execute each 20 seconds and will change the image's source attribute. It will use an if else block to determine which image to be set as the slideshow image.
Objective: I am making a stop animation with jquery and I need to load 47 images and put them as body background one after another at 450ms delay.
The part that I am having trouble with is that I can't get to cache/preload images correctly so that they switch without blinking etc...
I start the animation in $(window).load(function() {.... so everything should be loaded by then
I have tried a number of ways from stackoverflow and all over the web here are some of them:
NOTE: EVERYTHING WORKS LIKE A CHARM IN GOOGLE CHROME. FIREFOX IS PROBLEM! Site is hosted in wamp for now.
Jquery in document load: ( I have tried with plain javascript inserted in the <script></script> but no success
for (var x = 1; x < 47; x++)
{ preloaded[x] = new Image();
preloaded[x].src = 'anim_frame' + x + '.png';
}
} // later I modifed the code to preload sets of 5 images every 5 frames, so when frame 1 is shown frames 5-10 are loaded and so on...works great in chrome
Putting all the images in html directly as <img> tags...not working.
jQuery get to image location - not working
I know it can be done, this site made it, why cant we? ;) http://discover.store.sony.com/be-moved/
Only the following solution worked in all browsers.
Calling jQuery.get on all images in doc.ready and keeping a counter on how many images have loaded. Once they are loaded display the website...in the meanwhile show a nice loader with a percentage of the images loaded ;)
I want to display a gif image for a few seconds before my home page is being displayed. I tried onLoadEvent with no success. Can someone suggest me the solution using CSS or JAVASCRIPT?
It's hard to tell exactly what you are looking for but this will show an image and hide it after 5 seconds on page load.
window.onload = function () {
var imgContainer = document.getElementById('ImgContainer');
imgContainer.style.display = 'block';
setTimeout(function () {
imgContainer.style.display = 'none';
}, 5000);
};
Here is a link to a JSFiddle example.
JSFiddle
Create a div that fills the entire browser window with the image inside the div. In the bodys onload event (or if you are using jQuery $(document).ready) remove the div from the DOM.
I integrated a slider on my brothers website. He wants some preloading, so the the first image of the slide lasts longer than the rest, so the slider can load all images while the first image shows. Do you have any ideas how to delay just the first slide? I tried to find something inside the Javascript file but I dont think its a good Idea for me to work in the source.
Link: http://www.davidgoltz.de/2011/anna-bederke-actor/
Thank you!
Initially when you start set auto to 0 so it doesn't auto change.
Then after a delay (use setTimeout()) set auto to the new value.
i assume you know the number of images should be loaded. then you can set a counter and trigger auto change event;
var counter = 0;
$(".class-of-images-should-be-loaded").bind("load",function(){
counter++;
if(counter == n){ //n - number of images
//trigger your event
}
}
put a single class to all of the images and use it as the selector.
you can use "settimeout" either but if the connection is very slow, there might be unloaded images in slideshow.
*i used jQuery because you have jQuery library in your web page