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/
Related
I have a test site that uses HTML5 Canvas to load an array of stills from a video, then draws them to the Canvas at 24 frames per second. It works great and is currently set up to autoplay once the array has been pre-loaded.The reason for this was to autoplay on iOS.
What I'm trying to do now is instead of autoplaying the image sequence, I want to trigger the animate() function by use of document.getElementById('anim').onclick=animate; The element ID is a CSS3 ID that has two background elements: the background image (which is the first frame of the image sequence, and a play button). This is shown to the user until all the images have preloaded.
I want the user to simply press the Anim element (anywhere, but there is a play button for the user) and then play the image sequence. After the sequence, hide the canvas element so the background image and play button shows again that way it can be triggered again.
This needs to work on iPhone.
You can view the full source here to see it in action.
CSS:
#anim {
background-image:url('images/play_button.png'),url('images/t5.png');
background-position: center, left top;
background-repeat: no-repeat;
height:500px;
width:660px;
}
JS:
function draw() {
var ctx = document.getElementById('anim').getContext("2d");
var start = 1, stop = 121,cur=start,imgArr=[];
var loadLoop = function() {
var img = document.createElement("img");
img.onload = function() {
imgArr.push(this);
cur++;
if(cur > stop) {
// all images preloaded
// This is where the animate function is called for auto-play
animate();
}
else {
loadLoop();
}
}
img.src = "jpg_80/t5_"+(cur)+".jpg";
}
loadLoop();
function animate() {
var timer = setInterval(function() {
ctx.drawImage(imgArr.shift(), 0, 0 );
if(imgArr.length == 0) {
// no more frames
clearInterval(timer);
}
},1000/24);
}
}
HTML:
<body>
<!-- HTML5 Canvas Animation-->
<div>
<canvas id="anim" width="660" height="500"></canvas>
</div>
<script>
//call after page loaded
window.onload = function() {
draw();
// This is where I want the animate function called for manual play
//document.getElementById('anim').onclick=animate;
}
</script>
</body>
Animate is limited to within the scope of the draw function. You can only call the animate function within draw function the way it's currently defined. You probably want Option 2.
Option 1)
If you do the following you'll be able to get the animation to fire on the click.
document.getElementById('anim').onclick = draw;
Option 2)
If you want to call just the animate function you'll need to declare the animate variable outside of the draw function.
var animate;
function draw(){
//...other draw stuff here
animate = function(){
//animate stuff here
}
}
You'll then have access to the animate function on global scope.
I'm referring to the accepted answer for Change image in HTML page every few seconds. In this code, the very first timer event/image change occurs 6 secs after loading (then every 3 secs as expected). Could anyone explain to a beginner like me why this is so?
Thanks.
EDIT: Sorry for that, my fault. Let me try to explain what I'd like to do in the first place. The code given shows first startpicture.jpg and then cycles through image1.jpg to image3.jpg. I just want it to cycle through image1.jpg to image3.jpg without a seperate start picture (or all 4 pictures, including startpicture.jpg). Therefore is replaced startpicture.jpg with image1.jpg which made me get the wrong impression that the first image change occurred after 6 secs.
Maybe someone can help me how to change this code to cycling through the pictures without a designated start picture.
As per your edit, you can simply remove the startpicture (or replace with image1), and initially call the displayNextImage function immediately, then start the interval:
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
//call immediately
displayNextImage();
//then start interval
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
</script>
</head>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
<button onclick="displayPreviousImage()">Previous</button>
<button onclick="displayNextImage()">Next</button>
</body>
</html>
may be its time taken to load the images ,
you can load all the image first and then start changing,
var images= new Array();
for(var i=0;i<imagelocation.length;i++)
{
images[i]=new Image();
images[i].onload=function(){ if(i=imagelocation.length){changeImage();}}
images[i].src=imagelocation[i]; //image location is array containg link
}
function changeImage()
{
//what u had written earlier
}
I just made this program for slide show it is working well but i want to use previous and next buttons in the slide show and i don't have any idea how to do that so i put this here please help for the same
var image1=new Image()
image1.src="slide/23.jpg"
var image2=new Image()
image2.src="slide/7.jpg"
var image3=new Image()
image3.src="slide/4.jpg"
var image4=new Image()
image4.src="slide/5.jpg"
var image5=new Image()
image5.src="slide/6.jpg"
</script>
<img id="myImg"src="slide/2.jpg" name="img" width="1000" height="250"/>
<script>
var step=1
function slideImages(){
if (!document.images)
return
document.images.img.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
setTimeout("slideImages()",3000)
}
slideImages()
</script>
You probably want to abstract away some code so it can be easily reused in your functions:
// Dealing with the counter:
var step;
var steps = 5;
function increment() {
s = (s + 1) % steps;
}
function decrement() {
s--;
if (s<0) s = steps-1;
}
// Dealing with the slide show:
function show() {
document.images.img.src=eval("image"+step+".src")
}
function next() {
increment();
show();
}
function prev() {
decrement();
show();
}
// Automatic sliding:
window.setInterval(next, 3000);
Also, i would reconsider your approach to storing images:
function createImgBySource(src){
var img = new Image();
img.src = src;
return img;
}
var images = [
createImgBySource('slide/23.jpg'),
createImgBySource('slide/7.jpg'),
createImgBySource('slide/4.jpg'),
createImgBySource('slide/5.jpg'),
createImgBySource('slide/6.jpg')
];
Now you can change the increment and decrement functions to use images.length instead of steps, so you can add more images without having to alter other variables. Also, your show() function should look like this (getting rid of the nasty eval):
function show() {
document.images.img.src = images[step];
}
Try the below code
var ss = new TINY.fader.init("ss", {
id: "slides", // ID of the slideshow list container
position: 0, // index where the slideshow should start
auto: 0, // automatic advance in seconds, set to 0 to disable auto advance
resume: true, // boolean if the slideshow should resume after interruption
navid: "pagination", // ID of the slide nav list
activeClass: "current", // active class for the nav relating to current slide
pauseHover: true, // boolean if the slideshow should pause on slide hover
navEvent: "click", // click or mouseover nav event toggle
duration: .25 // duration of the JavaScript transition in seconds, else the CSS controls the duration, set to 0 to disable fading
});
got from Here also here is a sample Fiddle
I would consider using something like jCarousel.
I think you are best putting all of your images into an array and then looking over it. I am assuming that the image tag with the ID 'myImg' is the one that you want to update, as such you should use document.getElementByID('myImg') and not document.images.img.src=eval("image"+step+".src") -- eval should also be avoided as the performance is poor and it can be dangerous.
Put this as the end of your page:
<script type="text/javascript">
(function(){
var step = 0;
var images = [image1, image2, image3, image4, image5];
var image = document.getElementByID('myImg');
var slideImages = function() {
image.src = images[step].src;
step++;
if (step == images.length){
step == 0;
}
setTimeout("slideImages()", 3000);
};
slideImages()
})();
</script>
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
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>