search

jquery-backstretch / jquery-backstretch

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.
http://www.jquery-backstretch.com
MIT License
3.91k stars 912 forks source link

Uncaught Error: No images were supplied for Backstretch, or element must have a CSS-defined background image. #489

Open samseurynck opened 5 years ago

samseurynck commented 5 years ago

I've successfully set up Backstretch on some pages of a Wordpress site I'm building, but on other pages I'm receiving this error message:

Uncaught Error: No images were supplied for Backstretch, or element must have a CSS-defined background image.

The images are coming from Advanced Custom Fields. Each image field is exporting a url, which I'm placing in divs where I want the images as the attribute data-img-src="".

I'm using the class bstretchMe to use in the function calling on Backstretch, which looks like this:

$('.bstretchMe').each(function() {
  $(this).backstretch($(this).attr('data-image-src'), {
    fade: 200
  });
})

I'm definitely calling on an image because the links are showing as attributes when inspecting elements, but I think there's an issue with initiating backstretch... seems like a simple fix but I'm overlooking something.

9q7o6 vbl0y
samseurynck commented 5 years ago

Update: I've tried linking directly to the image using:

var $url = 'http://localhost:8082/wordpress/wp-content/uploads/2018/12/20160627_093012.jpg';
$('.maak_announcement_img').backstretch($url, { fade: 500 });

and it worked just fine. This must mean that something is going wrong with the loop I'm using, which is interesting because Backstretch is working perfectly fine on other pages of my site.