Header background slider scaling

Hi Janne,

You can make the slider always fit the pageheader by going to the MetaSlider > Advance Settings:

1. Stretch: 100% wide output
2. Center align
3. Crop: Smart Crop.

Unfortunately did not help.

Any ideas? I'm pretty much out of ideas myself.
I can give a access to a dev to check out if needed.

Hi Janne,

The method i described above works by placing the shortcode in the a GP Page Header content. Its being used on this demo site:

https://agenc.assemblewp.com

How have you added the slider?

Actually I just made it work, by writing (and borrowing) Javascript code that changes the CSS background-image property on the header DIV with transition.

Hi Janne, glad you found a solution

If anyone is interested, here is how I made it:

First script should preload images and second one does the transition.

<script type="text/javascript">
function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

preloadImages(["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
    $(function () {
        var i = 0;
        $("header.site-header#masthead").css("background-image", "url(" + images[i] + ")");
        setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("header.site-header#masthead").fadeOut("slow", function () {
                $(this).css("background-image", "url(" + images[i] + ")");
                $(this).fadeIn("slow");
            });
        }, 5000);
    });
</script>

That's located in GP Hooks wp_head.

Thanks for sharing Janne