Slider dla Joomla 2.5 - ciągłe przewijanie za pomocą MooTools

[Jdwind]

Znalazłem ciekawy skrypt na stronie http://davidwalsh.name/mootools-animate-background - tam też znajduje się demo jego działania. Żeby zaimplementować takie coś w Joomla wystarczy zapisać kod:

window.addEvent("domready",function() {
  //settings
  var duration = 40000;
  var length = 2000;
  var count = 0;
  
  var tweener;
  
  // Executes the standard tween on the background position
  var run = function() {
    tweener.tween("background-position", "-" + (++count * length) + "px 0px");
  };
  
  // Defines the tween
  tweener = $("animate-area").setStyle("background-position", "0px 0px").set("tween", { 
    duration: duration, 
    transition: Fx.Transitions.linear,
    onComplete: run,
    link: "cancel"
  });
  
  // Starts the initial run of the transition
  run();  
});

w pliku np. moja.js, później w pliku index.php naszej templatki deklarujemy ścieżkę do skryptu za pomocą np. tego:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/moja.js"></script>

Na koniec dodajemy style:

#animate-area  { 
    background-image: url(../images/obrazek.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    position: relative;
    height: 340px; //wysokość naszego obrazka
    width: 1050px; // szerokość - ale nie obrazka, tylko np. kontenera lub po prostu część, jaka ma być widoczna podczas przewijania (reszta jest schowana
    left: 0px;
}

I teraz wystarczy moduł z własnym kodem HTML, w którym (przy wyłączonym edytorze!) wpisujemy tylko:

<div id="animate-area "></div>

i przypisujemy moduł do poszczególnych pozycji menu. Działa dobrze nawet z IE8 (niżej nie sprawdzałem). Obrazek przewija się w sposób ciągły, bez przeskakiwania początek - koniec.

Smacznego

---------- Post dodany o 13:11 ---------- Poprzedni post był o 12:06 ----------

Jeśli nie chcemy, żeby skrypt się ładował wszędzie z templatką, możemy moduł z divem umieścić w osobnej pozycji modułu, a deklarację skryptu umieścić w instrukcji if. Przykładowo:

<?php if ($this->countModules('position-16')): ?>
        <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/moja.js"></script>
        <?php endif; ?>