- This topic has 9 replies, 2 voices, and was last updated 5 years, 10 months ago by David.
-
AuthorPosts
-
May 18, 2018 at 12:35 pm #579108Janne 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?
May 18, 2018 at 1:07 pm #579118DavidStaffCustomer SupportHi 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.May 18, 2018 at 1:15 pm #579126Janne MiettunenUnfortunately did not help.
May 18, 2018 at 10:17 pm #579299Janne MiettunenAny ideas? I’m pretty much out of ideas myself.
I can give a access to a dev to check out if needed.May 19, 2018 at 4:11 am #579393DavidStaffCustomer SupportHi 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:
How have you added the slider?
May 19, 2018 at 4:28 am #579404Janne MiettunenActually I just made it work, by writing (and borrowing) Javascript code that changes the CSS background-image property on the header DIV with transition.
May 19, 2018 at 4:37 am #579409DavidStaffCustomer SupportHi Janne, glad you found a solution
May 19, 2018 at 11:35 pm #579859Janne MiettunenIf 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>
May 19, 2018 at 11:36 pm #579860Janne MiettunenThat’s located in GP Hooks wp_head.
May 20, 2018 at 12:46 am #579873DavidStaffCustomer SupportThanks for sharing Janne
-
AuthorPosts
- You must be logged in to reply to this topic.