I created a small jQuery Slideshow with Images I control within my template for every page. The problem is, that if my site is in dev-mode, everything works perfectly. If I switch it to live-mode, the javascript doesn't work any longer. Perhaps you can help me (I don't have perfect skills in jQuery/Javascript).
Here's my code:
slideshow.js (defined as Requirement in Page.php together with jQuery)
function slideSwitch() {
var $active = $('#slideshow div.slidingimage.active');
if ( $active.length == 0 ) $active = $('#slideshow div.slidingimage:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div.slidingimage:first');
$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 );
});
template
<div id="slideshow">
<% control Images %>
<div class="slidingimage">$Attachment.SetWidth(480)</div>
<% end_control %>
</div>
Safaris WebInspector says after if ( $active.length == 0 ) $active = $('#slideshow div.slidingimage:last');:
TypeError: Result of expression '$active'[null] is not an object.
As I said, the error doesn't show up when I'm in dev-mode. So what's the difference?