[JavaScript] Kilkukrotne odpalenie funkcji Opcje

[peja1990]

Witam, napisałem sobie funkcję slider'a.

[PHP] pobierz, plaintext 
function vSlide(container) {
  ...
}
[PHP] pobierz, plaintext 

Jako container zdefiniowałem id div'a.

Na stronie mam 2 slidery, dlatego też chciałbym ją odpalić 2 razy, oczywiście wartość container jest inna.

Mam dwa div'y sliderów:

[HTML] pobierz, plaintext 
<div id="sponsors">
<div id="partners">
[HTML] pobierz, plaintext 

Dlatego też odpalam funkcję:

[PHP] pobierz, plaintext 
(function () {
  vSlide("sponsors");
  vSlide("partners");
}());
[PHP] pobierz, plaintext 

W wyniku otrzymuję wykonanie funkcji raz w div'ie "sponsors", a raz w div'ie "partners".
Chciałbym by funkcja została wykonana dla obydwu div'ów.

Bardzo proszę Was o pomoc...

[CuteOne]

Pokaż ciało funkcji vSlide.

ps. jeżeli to autoslider to tak łatwo się nie da (IMG:style_emoticons/default/wink.gif)

[peja1990]

Pokaż ciało funkcji vSlide.

ps. jeżeli to autoslider to tak łatwo się nie da (IMG:style_emoticons/default/wink.gif)

[PHP] pobierz, plaintext 
function vSlide(container, max, height) {
  $.ajax({
    type: "POST", 
    url : container + ".html", 
    load: function (XMLHttpRequest) {
      $("#" + container + " .slider").html("Trwa pobieranie danych…");
    },
    success: function(str) {
      var temp        = new Array();
      temp            = str.split("\n");
      var dir         = "images/" + container + "/";
      var loaded      = 0;
      var progress    = (100 / temp.length);
      var objects     = [];
      var preloader   = null;
      var progressBar = null;
 
      function startLoading() {
        preloader = document.createElement('div');
        preloader.id = 'preloader';
        progressBar = document.createElement('div');
        progressBar.id = 'progressBar';
        preloader.appendChild(progressBar);
        $(preloader).appendTo("#" + container + " .slider");
        var bw = $("#" + container + " .slider").width();
        var bh = $("#" + container + " .slider").height();
        var lw = $("#" + container + " .slider #preloader").width();
        var lh = $("#" + container + " .slider #preloader").height();
        $("#" + container + " .slider #preloader").css({
          'margin-top'  : (bh - lh) / 2 + "px",
          'margin-left' : (bw - lw) / 2 + "px"
        });
        for(var x=0; x<temp.length; x++) {
          objects[x]        = new Image();
          objects[x].onload = progressing;
          objects[x].src    = dir + temp[x];
        }
      }
 
      function progressing() {
        loaded++;
        progressBar.style.width = loaded * progress + "%";
        if(loaded >= temp.length) {
          slider();
          $("#" + container + " #preloader").remove();
        }
      }
      window.onload = startLoading;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#" + container + " .slider").html('Błąd ładowania danych !');
    }
  });
 
  function slider() {
    var id      = 0;
    var start   = 1;
    var stop    = 0;
    var active  = 1;
    $.ajax({
      type: "POST", 
      url : container + ".html", 
      load: function (XMLHttpRequest) {
        $("#" + container + " .slider").html("Trwa pobieranie danych&hellip;");
      },
      success: function(str) {
        var mV    = 15;
        var mH    = 10;
        var temp  = new Array();
        var dir   = "images/" + container + "/";
        var bs    = ($("#" + container + " .slider").width() / max) - (mH * 2);
        temp      = str.split("\n");
        for(var i=0; i<temp.length; i++) {
          id    += 1;
          stop  += 1;
          var block = document.createElement("span");
          block.setAttribute('id', id);
          block.setAttribute('style', 'width:' + bs + 'px; height:' + height + 'px; margin:0 ' + mH + 'px');
          $(block).appendTo("#" + container + " .slider");
          var img = document.createElement("img");
          img.setAttribute('src', dir + temp[i]);
          img.setAttribute('style', 'max-width:' + bs + 'px; max-height:' + height + 'px');
          $(img).appendTo("#" + id);
          $("#" + container + " .slider").css({
            'margin-top'    : mV + "px",
            'margin-bottom' : mV + "px"
          });
          var ah = $("#" + container + " .action").height();
          $("#" + container + " .action").css({
            'margin-top'    : ((height - ah) / 2) + mV + "px",
            'margin-bottom' : ((height - ah) / 2) + mV + "px"
          });
          var bw = $("#" + container + " .slider span#" + id).width();
          var bh = $("#" + container + " .slider span#" + id).height();
          var iw = $("#" + container + " .slider span#" + id).children().width();
          var ih = $("#" + container + " .slider span#" + id).children().height();
          $("#" + container + " .slider span#" + id).children().css({
            'margin-top'  : (bh - ih) / 2 + "px",
            'margin-left' : (bw - iw) / 2 + "px"
          });
          if($("#" + container + " .slider span#" + id).attr("id") <= max) {
            $("#" + container + " .slider span#" + id).fadeIn();
          } else {
            $("#" + container + " .slider span#" + id).hide();
          }
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#" + container + " .slider").html('Błąd ładowania danych !');
      }
    });
 
    function slide() {
      $("#" + container + " .slider span").each(function() {
        if($(this).attr("id") >= active && $(this).attr("id") <= max) {
          $(this).fadeIn();
        } else {
          $(this).hide();
        }
      });
    };
 
    $("#" + container + " .action.prev").click(function() {
      if(document.getElementById(start).style.display == "none") {
        active -= 1;
        max   -= 1;
        slide();
      }
    });
 
    $("#" + container + " .action.next").click(function() {
      if(document.getElementById(stop).style.display == "none") {
        active += 1;
        max   += 1;
        slide();
      }
    });
  }
}
[PHP] pobierz, plaintext 

Dodałem dwie zmienne do funkcji tj. max i height, a więc teraz wywołuję funkcję w taki sposób:

[PHP] pobierz, plaintext 
(function () {
  vSlide("sponsors", 4, 75);
  vSlide("partners", 5, 50);
}());
[PHP] pobierz, plaintext 

Pomyślałem trochę nad tym i sądzę, że problem może tkwić w zmiennej id, próbowałem jednak ze zmienną globalną:

[PHP] pobierz, plaintext 
id = 0;
[PHP] pobierz, plaintext 

jednak nie przyniosło to oczekiwanego rezultatu...