Js - working in cornerstone but not when i view the page

[lenvirthus]

Hi,

So I have added custom js script to make a changing background image in the first section of my contact us page

Currently, it works perfectly in cornerstone when I am editing the page but when I go view the page live it doesn’t seem to work.

This is all I am getting: from live -

Here is the JS code i am using -

// Auto Change Header DIV Topstrip
var imagebackground = 0;
var imgbackgrounds = [];
imgbackgrounds[0] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/Islander-People.jpg';
imgbackgrounds[1] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/children-1822704_1920.jpg';
imgbackgrounds[2] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/beach-idyllic-island-149541.jpg';
imgbackgrounds[3] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/woman-1807533_1920.jpg';
imgbackgrounds[4] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/Sunset-Chills.jpg';


function changeimage() {
    imagebackground++;
    if(imagebackground > 4) imagebackground = 0;

    $('.topstrip').fadeToggle("slow",function() {
        $('.topstrip').css({
            'background-image' : "url('" + imgbackgrounds[imagebackground] + "')"
        });
        $('.topstrip').fadeToggle("slow");
    });  


    setTimeout(changeimage, 15000);
}  

$(document).ready(function() {
    setTimeout(changeimage, 3000);        
});  

This is posted on the cornerstone JS -> contact us (hello.html page) as seen in the photo below.

• And here is how i am calling it through the class field in the top section on the contact us (hello.html) Page. it loads and transitions through the images perfectly here in the editing window of cornerstone.

Any help will be greatly appreciated!

cheers!

[ruenel]

Hello @lenvirthus,

Thanks for writing us.

Based from your post, your code is missing a few lines. Please have it updated and use this instead:

(function($){

	// Auto Change Header DIV Topstrip
	var imagebackground = 0;
	var imgbackgrounds = [];
	imgbackgrounds[0] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/Islander-People.jpg';
	imgbackgrounds[1] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/children-1822704_1920.jpg';
	imgbackgrounds[2] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/beach-idyllic-island-149541.jpg';
	imgbackgrounds[3] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/woman-1807533_1920.jpg';
	imgbackgrounds[4] ='https://saltwaterpeople.co/wp-content/uploads/2018/08/Sunset-Chills.jpg';


	function changeimage() {
	    imagebackground++;
	    if(imagebackground > 4) imagebackground = 0;

	    $('.topstrip').fadeToggle("slow",function() {
	        $('.topstrip').css({
	            'background-image' : "url('" + imgbackgrounds[imagebackground] + "')"
	        });
	        $('.topstrip').fadeToggle("slow");
	    });  


	    setTimeout(changeimage, 15000);
	}  

	$(document).ready(function() {
	    setTimeout(changeimage, 3000);        
	});

})(jQuery);

We would loved to know if this has work for you. Thank you.

[lenvirthus]

thank you very much! that worked a treat. simple mistake, much appreciated!

Was pulling my hair out over that.

[ruenel]

You’re most welcome!
We’re glad we were able to help you out.