Change jQuery image src dynamically

Question

I saw just wondering how it would be possible to change a src every say 5 seconds,

I am using

$.backstretch("site.com/images/home5.jpg");

Is it possible to swap 'home5.jpg' with other image (say home6.jpg and home7.jpg) like a slideshow? I'm not sure how to change it dynamically

this may help http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery — Dave, May 02 '12 at 14:38

Rory McCrossan · Accepted Answer · 2012-05-02T15:09:49.983

3

If you wanted to change it every 5 seconds you'd need to use setInterval():

var loop = 1;
setInterval(function() {
    var imgNumber = loop % 5; // assuming there are 5 images.
    $.backstretch("site.com/images/home" + imgNumber + ".jpg");
    loop++;
}, 5000);

UPDATE

After reading the documentation it appear this functionality is built into the plugin already:

http://srobbin.com/jquery-plugins/backstretch/

Choose 'Using backstretch in a slideshow' for the code.

edited May 02 '12 at 15:09

answered May 02 '12 at 14:40

Rory McCrossan

331,213
40
305
339

Hey, this works perfectly! One thing I forgot to ask is if I wanted them to fade in/out rather then a sudden change? – user1370288 May 02 '12 at 14:48
That depends on the plugin you're using. I'd imagine it would involve having to amend the source. – Rory McCrossan May 02 '12 at 14:51
Ticked :) I dont think it would be the plugin, as that only stretched the image (sorry forgot to mention that) I presume I set it within the setInterval? Tho I am not sure where I'd lot it in – user1370288 May 02 '12 at 14:53
See my update, the documentation has an example of how to create a slideshow with a fadeIn effect. – Rory McCrossan May 02 '12 at 15:10
Wow, 1000 thank you's for the help, it's working exactly how I wanted it to, and 1000 apologies for not checking the pluin myself when I should have :) – user1370288 May 02 '12 at 21:13

Igor Timoshenko · Answer 2 · 2012-05-02T14:45:44.940

1

For this you can use the JavaScript function setInterval.

edited May 02 '12 at 14:45

answered May 02 '12 at 14:38

Igor Timoshenko

1,001
3
14
27

score 0 · Answer 3 · answered May 02 '12 at 14:40

0

You can change the html of the object you've selected with .html().

$(#thing).html(" < img src='mypic.jpg' / >");

answered May 02 '12 at 14:40

Brandon Nicoll

434
2
10

score 0 · Answer 4 · answered May 02 '12 at 14:40

You can use setInterval or a similar function to periodically change the image. To actually swap images, you can just call backstretch again. From the project page:

Version 1.2

You can now called backstretch twice, and it will replace the existing image.

So for example:

$.backstretch("site.com/images/home6.jpg");

score 0 · Answer 5 · answered May 02 '12 at 14:41

0

function slideSwitch() {
var $active = $('#slideshow IMG.active');

$active.src = //change src here (you can use array with src-s)// }
$(function() { setInterval( "slideSwitch()", 5000 ); });

answered May 02 '12 at 14:41

Bonny Bonev

131
3

Eeeck. Don't use a string with setInterval. Pass the straight function reference. – jfriend00 May 02 '12 at 14:45

Change jQuery image src dynamically

5 Answers5

Linked