Joao Belchior Joao Belchior - 4 months ago 17
Javascript Question

Background Img Slider in WP theme - parent elemet opacity hides content

I'm trying to create a background image slider inside a wp theme without going to deep in code mode. So, I looked around and found this solution .

What I did so far:

1 - Added an Id to a row in a visual composer

2 - Added this CSS to the theme custom CSS:

#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
/*
set background images as `url(/path/to/image)` here,
separated by commas
*/
background-image: url("http://lorempixel.com/400/400/cats/?1"),
url("http://lorempixel.com/400/400/animals/?2"),
url("http://lorempixel.com/400/400/nature/?3"),
url("http://lorempixel.com/400/400/technics/?4"),
url("http://lorempixel.com/400/400/city/?5");
background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms
-webkit-transition: background-image 3000ms linear;
-moz-transition: background-image 3000ms linear;
-ms-transition: background-image 3000ms linear;
-o-transition: background-image 3000ms linear;
transition: background-image 3000ms linear;
*/
}


3 - Upload a js file containing this function:

jQuery(function($) {
// set `$.fx.interval` at `0`
$.fx.interval = 0;
(function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow:after`
// set, reset, delay to `1000` after background image reset
elem.css("backgroundImage", bgimg)
// fade in background image
.fadeTo(3000, 1, "linear", function() {
// set `delay` before fadeing out image
// fade in background image
$(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
// split background image string at comma , creating array
var img = $(this).css("backgroundImage").split(","),
// concat first background image to `img` array,
// remove first background image from `img` array
bgimg = img.concat(img[0]).splice(1).join(",");
// recursively call `cycleBgImage`
cycleBgImage(elem, bgimg);
});
});
}($("#slideshow")));
});


And all work just fine.

What is the problem: As this function change opacity of, in this case, a parent element, the child element (a div) disappear as well.

So:

1 - Has I saw in other questions answer can I change this function so that it start using RGBA instead of opacity?

2 - I saw in another answer that we could go around this with a pseudo element, but I kind of didn't know how to change the function to work like that.. any ideas?

3 - Is there a better way to do this?

Thanks

Answer

So, just for the sake of the argument, I found a workaround in a response to one other question.

@gibberish post this code:

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];

    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);

    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready

I just change "body" to "#slideshow" and make the correct links to my images.

It works really nice.

Neither of the tow options that I posted worked:

1 - The RGBA option - the A don't affect the background image.

2 - Selecting the pseudo-element - As Blazemonger say in this response:

You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript.