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 stackoverflow.com/questions/540349/…

Dave
– Dave

2012-05-02 14:38:31 +00:00
Commented May 2, 2012 at 14:38 — Dave
– Dave, Commented May 2, 2012 at 14:38

Rory McCrossan · Accepted Answer · 2012-05-02 15:09:49Z

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 2, 2012 at 15:09

answered May 2, 2012 at 14:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1370288 Over a year ago

Hey, this works perfectly! One thing I forgot to ask is if I wanted them to fade in/out rather then a sudden change?

Rory McCrossan Over a year ago

That depends on the plugin you're using. I'd imagine it would involve having to amend the source.

user1370288 Over a year ago

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

Rory McCrossan Over a year ago

See my update, the documentation has an example of how to create a slideshow with a fadeIn effect.

user1370288 Over a year ago

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 :)

Ihor Timoshenko · Accepted Answer · 2012-05-02 14:45:44Z

1

For this you can use the JavaScript function setInterval.

edited May 2, 2012 at 14:45

answered May 2, 2012 at 14:38

Ihor Timoshenko

1,0213 gold badges14 silver badges27 bronze badges

Comments

Brandon Nicoll · Accepted Answer · 2012-05-02 14:40:00Z

0

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

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

answered May 2, 2012 at 14:40

Brandon Nicoll

4442 silver badges10 bronze badges

Comments

Justin Ethier · Accepted Answer · 2012-05-02 14:40:47Z

0

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");

answered May 2, 2012 at 14:40

Justin Ethier

135k53 gold badges235 silver badges291 bronze badges

Comments

Bonny Bonev · Accepted Answer · 2012-05-02 14:41:55Z

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 2, 2012 at 14:41

Bonny Bonev

1313 bronze badges

1 Comment

jfriend00 Over a year ago

Eeeck. Don't use a string with setInterval. Pass the straight function reference.

Collectives™ on Stack Overflow

Change jQuery image src dynamically

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related