Jquery slideshow not working in Joomla3 template

问题

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

回答1:

Ok i solved the problem, there was a conflict with the jquery. I replaced '$' with 'jQuery' and it now works fine.

jQuery(function() {
    setInterval(function(){
        var $active = jQuery('#slideShow img.active');

        if ( $active.length == 0 ) $active = jQuery('#slideShow img:last');

        var $next =  $active.next().length ? $active.next()
            : jQuery('#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');
            });
    }, 5000);
});

来源：https://stackoverflow.com/questions/20777398/jquery-slideshow-not-working-in-joomla3-template

标签

jquery

slideshow

joomla-template