Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Header background slider scaling

Home Forums Support [Resolved] Header background slider scaling

Home Forums Support Header background slider scaling

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #579108
    Janne Miettunen

    Hi!

    I’m having some issues with header. I want to add a slider behing the header logo, but I’m having issues with scaling.

    What I did is I added a custom page header with metaslider tag in the content area, set the container to full width and from advanced menu I enabled “Merge with side header”.

    How do I make the slider area height dependent on the header size?

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #579118
    David
    Staff
    Customer Support

    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.

    #579126
    Janne Miettunen

    Unfortunately did not help.

    #579299
    Janne Miettunen

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

    #579393
    David
    Staff
    Customer Support

    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?

    #579404
    Janne Miettunen

    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.

    #579409
    David
    Staff
    Customer Support

    Hi Janne, glad you found a solution

    #579859
    Janne Miettunen

    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;
        }
    }
    
    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 + ")");
            setInterval(function () {
                i++;
                if (i == images.length) {
                    i = 0;
                }
                $("header.site-header#masthead").fadeOut("slow", function () {
                    $(this).css("background-image", "url(" + images + ")");
                    $(this).fadeIn("slow");
                });
            }, 5000);
        });
    </script>
    #579860
    Janne Miettunen

    That’s located in GP Hooks wp_head.

    #579873
    David
    Staff
    Customer Support

    Thanks for sharing Janne

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.