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; ?>