From today onwards i will be posting the jquery tutoials also, This post will show you how to replace one image with another one in specific time intervals. For example: replacing image1.jpg withimage2.jpg every 5 seconds.
Guys if you are not aware of jquey and its feature.Dont worry i will be adding tutoials based on HOW TO APPROACH JQUERY in the upcoming post.So do visit my site regularly for updates.
In javascript, setInterval() function is used.
So, before we continue, we need to define where our images are coming from. Images URLs can be stored in javascript array or we could choose more elegant way and simply read them from HTML document.
Imagine we have this HTML markup:
<div id="myGallery"> <img src="image1.jpg" class="active" /> <img src="image2.jpg" /> <img src="image3.jpg" /> </div>
We need to hide all images but class="active" one and overlay all of them on one another. Here is a CSS to do that:
#myGallery{ position:relative; width:400px; /* Set your image width */ height:300px; /* Set your image height */ } #myGallery img{ display:none; position:absolute; top:0; left:0; } #myGallery img.active{ display:block; }
Now, lets write jQuery function that will fade out currently active image and fade in the next image. Here is jQuery code:
function swapImages(){ var $active = $('#myGallery .active'); var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first'); $active.fadeOut(function(){ $active.removeClass('active'); $next.fadeIn().addClass('active'); }); }
And now all that’s left is to add setInterval() with our function and the time interval we want our image to fade out and fade in.
// Run our swapImages() function every 5secs setInterval('swapImages()', 5000);
Now we have gallery/slideshow with images changing every 5 seconds. You can easily customize this jQuery script to create your own slideshow.
Here is how your final code should look like:
<html>
<head>
<script src="jquery.js"></script>
<script>
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
}
</script>
<style>
#myGallery{
position:relative;
width:400px; /* Set your image width */
height:300px; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
</style>
</head>
<body>
<div id="myGallery">
<img src="image1.jpg" class="active" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
</body>
</html>
Thanks to jquery-howto
Incoming search terms:
- jquery for Run Active images (11)
- jquery time interval (11)
- jQuery time left bar (7)
- Replacing images at time intervals (7)
- Show and hide divs at a specific time interval using jQuery (3) (4)
- jquery add remove class time interval (3)
- dreamweaver changing image time interval (3)
- how to change the image with time interval in jquery (3)
- Show and hide divs at a specific time interval using jQuery (3)
- jquery changing images with time interval (3)
- jquery cookies changing images (3)
- jquery swap image setinterval (2)
- How to replace an image with another one using jQuery (2)
- code for change the image in fadein and fadeout with time interval (2)
- jquery replacing images at time intervals (2)
- set time interval in jquery (2)
- javascript tutorials for frequently time interval image change (2)
- how to change image on every 5 sec using database in php (2)
- jquery change image by time (2)
- hide and show images with time interval in javascript (2)
- jquery change image on timer (2)
- Replacing images at time intervals jquery (2)
- jquery image replace time (2)
- flip the images with intervals in jquery (2)
- change images dynamically with time intervals using jquery (2)
- jquery css switch images and menu with time interval (2)
- Background Image Change on every 5sec using Jquery (2)
- image change jquery with interval (2)
- change image time interval in javascript (2)
- change image using jquery timer (2)
- jquery image changer on time interval (2)
- jquery images change interval (2)
- change the background image of a div after a time interval (2)
- jquery change images time (2)
- change image with timer jquery (2)
- jquery time set img (1)
- jquery timer read image (1)
- jquery to change image after a time interval (1)
- replacing images in jQuery interval (1)
- JQuery slideshow that fades images every 5 seconds (1)
You will also be interested in ,
- Agree Before Entry Using Javascript
- Add a mouse cursor or pointer trailing text using javascript
- Removing Nodes using javascript
- Displaying Text from User On Your Webpage
- Words Validation with Javascript
- Load webpage dynamically from query string using simple javascript and iframe
- Detect browser close event and alert some messages using javascript
- Close Event In Javascript Using OnUnload()
- Disabling right click menu using javascript
- Disabling right click menu using javascript Enhanced Version
the code you had was throwing an error in firebug but the following code works
function swapImages(){
var $active = $(‘#myGallery .active’);
var $next = ($(‘#myGallery .active’).next().length > 0) ? $(‘#myGallery .active’).next() : $(‘#myGallery img:first’);
$active.fadeOut(function(){
$active.removeClass(‘active’);
$next.fadeIn().addClass(‘active’);
});
}
$(document).ready(function(){
setInterval(‘swapImages()’, 5000);
});
Thanks Bret Bouchard, appreciate your effort
, keep visiting my website