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

0 votes

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.

Jul 27 in Web Development by gaurav
• 17,580 points
12 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

Using Jquery Ajax to retrieve data from Mysql

Perform a AJAX GET request to get ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
56 views
0 votes
1 answer

How to loop through array in jQuery?

Generic loop: var i; for (i = 0; i ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
24 views
0 votes
0 answers

How to add a link in Jquery PrettyPhoto to download the image

I am using Jquery PrettyPhoto to have ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
19 views
0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,040 points
16 views
0 votes
0 answers

convert base64 to image in javascript/jquery

I have written some code for image ...READ MORE

Jun 29 in Web Development by gaurav
• 17,580 points
146 views
0 votes
0 answers
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,877 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,869 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
1,302 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP