Jump to:

1382 Posts in 491 Topics by 521 members

Themes

SilverStripe Forums » Themes » jQuery Slideshow doesn't work in Live-Mode (but does in Dev)

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1835 Views
  • oleze
    Avatar
    Community Member
    65 Posts

    jQuery Slideshow doesn't work in Live-Mode (but does in Dev) Link to this post

    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?

  • BruceyBonus
    Avatar
    Community Member
    7 Posts

    Re: jQuery Slideshow doesn't work in Live-Mode (but does in Dev) Link to this post

    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.

  • oleze
    Avatar
    Community Member
    65 Posts

    Re: jQuery Slideshow doesn't work in Live-Mode (but does in Dev) Link to this post

    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);
    });

    1835 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.