Overlay issue - Overlay does not show

[josk84]

Hi,

I am doing some experimenting with the vegas slideshow and I made it work, however, I seem to have an issue with the overlay that I don't understand. Please see http://vegas.skansens.net
and

So, with Firefox inspection mode; if I deselect the background image under inline element as seen in the pictures, the overlay will start working. I am not able to see what I am doing wrong in the javascript code. I was hoping you could point me in the right direction so that I can get the overlay working.. I am new to this kind of programming so please forgive my ignorance, I'm just trying to learn :)

Code:

HTML:

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/vegas.min.js"></script> <script type="text/javascript" src="js/index.js"></script>

JS:

$('body').vegas({
overlay: "img/overlays/03.png",
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
animation: 'random',
animationDuration: 20000,
slides: [
	{ src: 'img/01.jpg' },
	{ src: 'img/02.jpg' },
	{ src: 'img/03.jpg' },
	{ src: 'img/04.jpg' },
],

});

[josk84]

I clearly don't know what I'm doing but I was by luck; able to fix it by editing vegas.min.js by changing

'),"string"==typeof a&&i.css(" background-image","url("+a+")") to:

'),"string"==typeof a&&i.css("/! background-image","url("+a+")/")
I looked at the results from the Firefox inspector and added the missing symbols and it worked..

[josk84]

And by the way; The slideshow is awesome 👍 Thank you