jQuery backstretch image auto-moving and back

Question

I use backstretch on my website. Now trying to move the backgroudn automatically from left to right and back. But til now, it just moves in one direction. I'm lookig for a continous loop of that moving image.

How can I reset / move back the image??

backstretch.js: http://dev.disaster-kfw.com/fileadmin/template/js/slidebackground.js

some more javascript for moving-effect & initialisation

var images = ['fileadmin/template/gfx/background02-03.jpg'];
        jQuery.backstretch( images[Math.floor(Math.random() * images.length)] );
        jQuery(function($){
            (function swoop(element) {
                element
                    .animate({'margin-left':'-=5px'}, 100, function(){
                        setTimeout(function(){
                            swoop(element);
                        }, 0);
                    });
            })($('#backstretch img'));
        });

resulting this HTML output

<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow: hidden; z-index: -999999; margin: 0px; padding: 0px; height: 100%; width: 100%;"><img src="fileadmin/template/gfx/background02-03.jpg" style="position: absolute; margin: 0px 0px 0px -3404.98890491151px; padding: 0px; border: none; z-index: -999999; width: 3006px; height: 835px; left: -551.5px; top: 0px;"></div>

sorry for posting the html code a littlt bit ugly, don't know to do it right...

EDIT:

Thanks a lot, but I think that's not what I need.

I think I need a calculation about image-width and margin-left to switch from moving-left to moving-right and back.

So I tried to calculate width of my image, but

iWidth = jQuery("#backstretch img").width();

is always NULL.

And

iWidth = $("#backstretch img").width();

breaks the whole javascript.

I thought it could be a solution to write a second function called backswoop for counting up the margin-left. And then do a condition about margin-left and image-width.

iWidth = jQuery('#backstretch img').width();
jQuery(function($){
  (function swoop(element) {
    element.animate({'margin-left':'-=5px'}, 50, function(){
        setTimeout(function(){
           if(element.css('margin-left')*-1 <= iWidth){
             swoop(element);
           }else{
             backswoop(element);
           }
        }, 0);
    });
  })($('#backstretch img'));
  (function backswoop(element) {
    element.animate({'margin-left':'+=5px'}, 50, function(){
        setTimeout(function(){
           if(element.css('margin-left') >= 0){
             swoop(element);
           }else{
             backswoop(element);
           }
        }, 0);
    });
  })($('#backstretch img'));
});

But, because I'm not great with javascript, it does not work :-(

Answer 1

Before you move the element, use jQuery .data() to store the original margin. That way when you want to reset you can animate the margin to that value.

This code isn't perfect. It's just to give you an idea of what you can do.

//I would avoid global variables, but I don't know enough of your code.
swoopingElement =  $('#backstretch img');
swoopingElement.data("startingmargin", $('#backstretch img').css('marginLeft'));

(function swoop(element) {
  element
    .animate({'margin-left':'-=5px'}, 100, function(){
      swoopingElement.data("timer", setTimeout(function(){
        swoop(element);
      }, 0));
    });
})($('#backstretch img'));

function resetElement(element){
  //First shut down any remaining animation
  element.stop();
  clearTimeout(element.data("timer"));  //even though it's zero...  it might be active.
  //Send element back
  element.animate({'margin-left':element.data("startingmargin")}, 100);
  //Or for instant return.
  // element.css({'margin-left':element.data("startingmargin")});
};

https://api.jquery.com/jquery.data/