jQuery to load random image from array using chickendinner js returning undefined in Chrome

Question

I have the following jQuery script setup using the info pages from the developer's 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>

 Run code snippet

Expand snippet

I want to use this script to randomize image loads on my website's homepage, built with and served by Jekyll (hence the local server for testing above).

It is my understanding that the div class="js-chickendinner-bg" should work with the jQuery function the way I have it, but something is still apparently off.