Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

jQuery Slideshow doesn't work in Live-Mode (but does in Dev)


Reply


3 Posts   1872 Views

Avatar
oleze

Community Member, 65 Posts

8 August 2010 at 12:30am

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?

Avatar
BruceyBonus

Community Member, 7 Posts

16 August 2010 at 10:57pm

I have had this issue before, in my case it was because in dev mode the page is pulling in the jquery.js file and in live mode it is not.

Be careful though, as if you add jquery.js to the live site in dev mode you will be pulling two jquery.js which may cause a conflict.

I hope this helps.

Avatar
oleze

Community Member, 65 Posts

18 August 2010 at 1:12am

Solution was to change the code to:

jQuery(document).ready(function($) {
setInterval(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}, 1500, function() {
$active.removeClass('active last-active');
});
},7500);
});