• savohij

    (@savohij)


    I tried to async my scripts and noticed that CrellySlider brakes if I’m async the JQuery of WordPress(~wp-includes/js/jquery/jquery.js?ver=1.11.3).

    I gotta tell I’m using the previous version of the slider(0.8.2? not sure).
    Can this be solved somehow, perhaps?

    https://wordpress.org/plugins/crelly-slider/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Fabio Rinaldi

    (@fabiorino)

    It happens because the crellySlider() function fires before the plugin is loaded. To fix it, you could try to modify a php file of the plugin:

    Open crelly-slider/wordpress/frontend.php and replace lines 161-179 with this:

    $output .= '<script type="text/javascript">' . "\n";
    $output .= 'var fileInterval' . $slider_id . ' = setInterval(function() { if(jQuery.fn.crellySlider) {'  . "\n";
    $output .= '(function($) {' . "\n";
    $output .= '$(document).ready(function() {' . "\n";
    $output .= '$("#crellyslider-' . $slider_id  . '").crellySlider({' . "\n";
    $output .= 'layout: \'' . $slider->layout . '\',' . "\n";
    $output .= 'responsive: ' . $slider->responsive . ',' . "\n";
    $output .= 'startWidth: ' . $slider->startWidth . ',' . "\n";
    $output .= 'startHeight: ' . $slider->startHeight . ',' . "\n";
    $output .= 'automaticSlide: ' . $slider->automaticSlide . ',' . "\n";
    $output .= 'showControls: ' . $slider->showControls . ',' . "\n";
    $output .= 'showNavigation: ' . $slider->showNavigation . ',' . "\n";
    $output .= 'enableSwipe: ' . $slider->enableSwipe . ',' . "\n";
    $output .= 'showProgressBar: ' . $slider->showProgressBar . ',' . "\n";
    $output .= 'pauseOnHover: ' . $slider->pauseOnHover . ',' . "\n";
    $output .= stripslashes($slider->callbacks) . "\n";
    $output .= '});' . "\n";
    $output .= '});' . "\n";
    $output .= '})(jQuery);' . "\n";
    $output .= 'clearInterval(fileInterval' . $slider_id . ');'  . "\n";
    $output .= '}},100);'  . "\n";
    $output .= '</script>' . "\n";
    Thread Starter savohij

    (@savohij)

    I don’t know why, but I don’t have this code in this lines. From 161 to 179 on my server I have some totally different code(I got latest version of CrellySlider). I also went to github(https://github.com/fabiorino/crelly-slider/blob/master/wordpress/frontend.php) and check it there, just in case, there’s also some different code in this lines. But I found it on my local between lines 431-467. And this is the code:
    $output .= ‘<script type=”text/javascript”>’ . “\n”;

    $output .= ‘(function($) {‘ . “\n”;

    $output .= ‘$(document).ready(function() {‘ . “\n”;

    $output .= ‘$(“#crellyslider-‘ . $slider_id . ‘”).crellySlider({‘ . “\n”;

    $output .= ‘layout: \” . $slider->layout . ‘\’,’ . “\n”;

    $output .= ‘responsive: ‘ . $slider->responsive . ‘,’ . “\n”;

    $output .= ‘startWidth: ‘ . $slider->startWidth . ‘,’ . “\n”;

    $output .= ‘startHeight: ‘ . $slider->startHeight . ‘,’ . “\n”;

    $output .= ‘automaticSlide: ‘ . $slider->automaticSlide . ‘,’ . “\n”;

    $output .= ‘showControls: ‘ . $slider->showControls . ‘,’ . “\n”;

    $output .= ‘showNavigation: ‘ . $slider->showNavigation . ‘,’ . “\n”;

    $output .= ‘enableSwipe: ‘ . $slider->enableSwipe . ‘,’ . “\n”;

    $output .= ‘showProgressBar: ‘ . $slider->showProgressBar . ‘,’ . “\n”;

    $output .= ‘pauseOnHover: ‘ . $slider->pauseOnHover . ‘,’ . “\n”;

    $output .= stripslashes($slider->callbacks) . “\n”;

    $output .= ‘});’ . “\n”;

    $output .= ‘});’ . “\n”;

    $output .= ‘})(jQuery);’ . “\n”;

    $output .= ‘</script>’ . “\n”;`

    But that’s alright. The thing is, it doesn’t work in FF(IE edge and 10, chrome, opera – works great).
    But in FF this is what happens:
    When I open the page with the slider, it doesn’t load. No matter how much I refresh the page. BUT! If I click on the link to this same page(I clicked on the logo instead of refreshing by accident) and this time slider did load normally! I tried again and again and this works this way. But only this way. It doesn’t fire if I simply load the page or opening normally. Any idea of why this could happen? I tried also change the delay time from 100 to 1000, to see if it helps, but its not.

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    I said lines 161-179 because you told me you had Crelly Slider 0.8.2. With the latest version is 216-234

    About firefox: do you get any errors in the console?
    Did you simply try to empty the cache and use ctrl + f5 to refresh?

    Thread Starter savohij

    (@savohij)

    It’s not really important, but somehow I got frontend.php with lots of empty lines(not huge, but there’s a difference in between the original).

    As for the firefox: I of course checked it with empty cache. Also, I tried it with fresh version of the pre-installed themes – works the same. Also I played around, but nothing really helped. However there’s two things I think I should mention:
    1) This is what I’m getting without hitting the local link to the same page: Image
    2) I found this link while searching for solution and playing around with it: http://forum.jquery.com/topic/setinterval-not-working-in-firefox
    So I tried this updated code:

    $output .= '<script type="text/javascript">' . "\n";
    $output .= 'var fileInterval' . $slider_id . ' = setInterval(function() { if(jQuery.fn.crellySlider) {'  . "\n";
    $output .= '(function($) {' . "\n";
    $output .= '$(document).ready(function() {' . "\n";
    $output .= 'var d = new Date()' . "\n";
    $output .= 'd.getTime()' . "\n";
    $output .= '$("#crellyslider-' . $slider_id  . '").crellySlider({' . "\n";
    $output .= 'layout: \'' . $slider->layout . '\',' . "\n";
    $output .= 'responsive: ' . $slider->responsive . ',' . "\n";
    $output .= 'startWidth: ' . $slider->startWidth . ',' . "\n";
    $output .= 'startHeight: ' . $slider->startHeight . ',' . "\n";
    $output .= 'automaticSlide: ' . $slider->automaticSlide . ',' . "\n";
    $output .= 'showControls: ' . $slider->showControls . ',' . "\n";
    $output .= 'showNavigation: ' . $slider->showNavigation . ',' . "\n";
    $output .= 'enableSwipe: ' . $slider->enableSwipe . ',' . "\n";
    $output .= 'showProgressBar: ' . $slider->showProgressBar . ',' . "\n";
    $output .= 'pauseOnHover: ' . $slider->pauseOnHover . ',' . "\n";
    $output .= stripslashes($slider->callbacks) . "\n";
    $output .= '});' . "\n";
    $output .= '});' . "\n";
    $output .= '})(jQuery);' . "\n";
    $output .= 'clearInterval(fileInterval' . $slider_id . ');'  . "\n";
    $output .= '}},1000);'  . "\n";
    $output .= '</script>' . "\n";

    But this didn’t help, unfortunately. Perhaps I just didn’t use it right or something.

    Thread Starter savohij

    (@savohij)

    Forgot to mention: no errors in the console.

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    I got frontend.php with lots of empty

    That’s strange, try to download the plugin again.

    Also, are you sure that the problem is related to that piece of code (the setInterval() “trick”)? I mean, maybe Firefox, for some reason, does not load crellyslider.min.js asynchronously correctly. Did you test the async loading with other scripts on Firefox?

    Thread Starter savohij

    (@savohij)

    I gotta tell you, I barely “know” JS/JQuery, so not sure at all if it’s about setInterval() or not – just tried to solved this as best as I could.

    Did you test the async loading with other scripts on Firefox?

    Not really, no. You mean to see if other plugins(with jquery) works ok with async scripting at my site? If so, just tell me what plugin I should install 🙂
    But, I tied this: I disabled one by one scripts(from async to normal – including crellyslider.min.js) and found out that only async for jquery.js?ver=1.11.3 makes this to happen(cause this odd bug), while disabling async to all the other scripts(again, including the jquery.crellyslider.min.js?ver=1.1.1) has no obvious influence on this kind of strange behavior of the slider.
    I’ll reinstall the script, but doubt it will help tho

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    Can you test everything with Crelly Slider 0.8.2?
    Maybe the problem are the YouTube/Vimeo APIs that are included with the version 1.1.1. Maybe they don’t like the async loading… I don’t know, I’m just suggesting. It’s really difficult to debug something that weird without seeing the code…

    Thread Starter savohij

    (@savohij)

    I install the .8.2 and tested it with the default theme and without any other third part plugins too. The same story. You can try it for your self btw.
    Wired story, huh 🙂

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    I don’t know what to say… I’m really sorry but I can’t find a way to help you. It’s such a strange bug that I can’t even think what may cause it, also it’s even more difficult because I can’t see the source code. If you really want to keep the async feature, the only thing I can suggest you is to try another plugin and replace Crelly Slider 🙁
    Really, I’d love to help you but this time I can’t figure out what’s wrong.

    Thread Starter savohij

    (@savohij)

    That’s a strange one, yes indeed.
    Well, there’s always a way, I guess. I’ll try to go without async at desktop view and just turn off the jQuery at mobile meanwhile.
    Thanks for trying to help, fabiorino 🙂

    Plugin Author Fabio Rinaldi

    (@fabiorino)

    You’re welcome. I’m sorry if I wasn’t able to fix that problem. If you have any news or any other questions, please let me know

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Async JQuery brakes CrellySlider’ is closed to new replies.