I recreate the jquery slideshow by Jon Raasch mentioned on his blog
http://jonraasch.com/blog/a-simple-jquery-slideshow
this works like a charm in a normal project setup, however if i try to imply it in a joomla template, i can't seem to address the DOM elements within the setInterval function. it returns the active variable as null.
here's the template code: http://cl.ly/1m2o3U1O3p3J
the html part:
<body>
<div id="slideShow">
<img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img1.jpg" alt="" title="" class="active" />
<img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img2.jpg" alt="" title="" />
<img src="<?php echo $this->baseurl; ?>/templates/mushi/images/img3.jpg" alt="" title="" />
</div>
</body>
the javascript part:
function slideSwitch() {
var $active = $('#slideShow .active');
console.log($('#slideShow img:last'));
if ( $active.length == 0 ) $active = $('#slideShow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideShow img:first');
console.log("here");
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
any help would be much apreciated thx
See Question&Answers more detail:os
