页面上的随机图像作为超大背景加载

Question

I am trying to get the following code to load a random image for a jumbotron background without success. I just can't tell which part is the problem. The jumbotron itself is acting as the area for a basic flex slider. I basically want the background image for the flex slider to change on every page load.

To attempt this, I've placed the following script in the head section of the page:

<script type="text/javascript">
$(document).ready(function() {
    var images = ['01.jpg', '02.jpg'];
    $('.jumbotron').css({'background-image': 'url(../images/jumbotron/' + images[Math.floor(Math.random() * images.length)] + ')'});
});

and my Jumbotron CSS looks like:

.jumbotron {
position: relative;
color: #fff;
/*text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);*/
/*background:url(../images/header-bg.jpg) no-repeat #232a31; /* Old browsers */
height:630px;
background-size:cover;
overflow:hidden;
}

I have disabled the 'background:url' line (which otherwise loaded one image), to allow the enforcement of the 'background-image:url' in the script. Well, no image loads at all! http://webeutic.com/123.html

Can anyone lend an extra hand scratching my head? Thanks to all

Answer 1

You have an Uncaught TypeError: undefined is not a function in 123.html @ line: 215.

$(document).ready(function() {

It seems that the $() alias for jQuery() is not defined. Use jQuery() instead.

EDIT: With the first error fixed you will notice that your code tries to load images from the wrong location. That's due to the difference in how relative paths work when used in CSS files (relative to CSS URL) and when used in HTML files (relative to HTML URL). To fix this you need to change the path to include the folders that lead to your /images folder.

Code below includes both fixes

jQuery(document).ready(function() {
    var images = ['01.jpg', '02.jpg'];
    jQuery('.jumbotron').css({'background-image': 'url(/wp-content/themes/flathost/assets/images/jumbotron/' + images[Math.floor(Math.random() * images.length)] + ')'});
});