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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Themes /

Discuss SilverStripe Themes.

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

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


Go to End


3 Posts   2592 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);
});