A question about JS loading via yepnope..
I am using the nice Slides jQuery slider
http://slidesjs.com/ on a theme based on the MODx Boilerplate.
If I load the JS via the yepnope in the footer (using the plugins.js and scripts.js) the images in the slider are all displayed for a short time before the slider becomes "active".
If I place the JS code (jquery.min.js, jquery.easing.1.3.js and slides.min.jquery.js) in the header all works fine.
- How can I keep using yepnope in the footer and bypass this problem?
- Is placing JS in the footer really that mutch better?
This works,
Code in header:
<script src="[[++site_url]]assets/templates/main/js/libs/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="[[++site_url]]assets/templates/main/js/libs/slides.min.jquery.js"></script>
<script>
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '/images/site/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
This doen not work nicely
Code in footer:
<script>
yepnope([{
load: '//code.jquery.com/jquery-1.6.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('[[++base_url]]assets/templates/main/js/libs/jquery-1.6.min.js');
}
}
}, {
load: ['[[++base_url]]assets/templates/main/js/plugins.js', '[[++base_url]]assets/templates/main/js/scripts.js' ]
}]);
</script>
With in plugins.js the jquery.easing.1.3.js and slides.min.jquery.js code.
In scripts.js:
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '../images/site/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
EDIT:
It is not the position of the code... placing the yepnope in the header does not fix this problem, Plaing this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="[[++site_url]]assets/templates/main/js/libs/slides.min.jquery.js"></script>
<script>
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '/images/site/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
Does work...
MODX Staff
☆ A M B ☆