JQuery to load random image from array using chickendinner.js returning 'undefined' in Chrome
I have the following jQuery script setup using info pages from developer site, but Chrome keeps returning "undefined".
<script src="//code.jquery.com/jquery-1.11.2.min.js""></script>
(function($) {
$('.js-chickendinner-bg').chickenDinner = {
defaults: {
path: 'http://127.0.0.1:4000/covers/',
altTag: ['Cover'],
fadeInTime: 1800,
cssBG: 'true',
TheImages: ['cover1.jpg', 'cover2.jpg', 'cover3.jpg', 'cover4.jpg', 'cover5.jpg', 'cover6.jpg', 'cover7.jpg', 'cover8.jpg', 'cover9.jpg', 'cover10.jpg', 'cover11.jpg', 'cover12.png', 'cover13.png', 'cover14.png']
}
};
$.fn.extend({
chickenDinner: function(options) {
$.extend({}, $.chickenDinner.defaults, options);
return this.each(function() {
var TheImages = options.TheImages;
var RandomMath = Math.floor(Math.random() * TheImages.length);
var SelectedImage = TheImages[RandomMath];
var imgPath = options.path + SelectedImage;
var altTag = options.altTag;
// Fade in Times
var fadeInTime = options.fadeInTime;
//Fade In animation - hide first
$(this).css('display', 'none').fadeIn(fadeInTime);
if (options.cssBG == 'true') {
$(this).css('background-image', 'url(' + imgPath + ')');
} else {
$(this).attr({
src: imgPath,
alt: altTag
});
}
});
}
});
}(jQuery));
<div class="site-header-container has-cover" class="js-chickendinner-bg" style="background-image: url({{ site.cover | prepend: site.baseurl }});">
<div class="scrim {% if site.cover %}has-cover{% endif %}">
<header class="site-header">
<h1 class="title">{{ site.title }}</h1>
{% if site.subtitle %}
<p class="subtitle">{{ site.subtitle }}</p>{% endif %}
</header>
</div>
</div>
I want to use this script to randomize image loading on my site's home page, built and maintained by Jekyll (hence the local server for testing above).
I understand that div class = "js-chickendinner-bg" should work with the jQuery function the way it is, but something still clearly doesn't work.
source to share
This is because you are picking a random number from the length of your array, but the array index starts at 0. In your case, the random number will be from 1 to 14, but the array index range will be from 0 to 13. Because of this, your random number will sometimes be more than the highest score of your array.
If you change this line to subtract 1 from a random value:
var RandomMath = Math.floor(Math.random() * TheImages.length) - 1;
This will prevent your random value from getting too large.
source to share