is there a way to transform header wide image in a slide ?

Hi,
I use the template for a restaurant and it's really great
the website owner asks for replacing the full screen image at header with a full screen slider
as on Creativity template
is there a way to do so ?
Thanks
see the website http://www.lejardindescausses.com : demand is to change the large image with a slide

Ok I have a solution - Hope it will help
1 : download and install module image Show GK4, choose position header
2 : place this module before any other header position in module list
3 : in configuration : choose Module style : gk-creativity
4 : interface : width=2400, height = 1800 (for a wide image slider)

Then you have to modify your css as follows (be sure css override is enabled in template configuration (advanced parameters) )
#gkBg {
background-color: transparent !important;
}
.gkIsWrapperFixed {
background-attachment: scroll;
background-clip: border-box;
background-color: #C3B9DB !important; // HERE YOU CAN CHANGE THE COLOR OF THE BACKGROUND WHEN IMAGE IS LOADING
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: cover !important; // To enable full screen
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1 !important; // doing this way you can keep your "steakhouse" header
}
#gkHeaderMod > div > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
background-color: rgba(147, 132, 168, 0.5); // OPTIONAL HERE YOU CAN CHANGE THE COLOR AS YOU WANT
border-bottom-right-radius: 45px; // optional, just to have a round corner at the bottom right
}

Hi

Very well explained Thank You for that. Hope more users will benefit from it.

Hello,
I have implemented this solution on my local version of the site and is working really great, is possible to add the navigation on the slide show (arrows on both edges)?
Thanks in advance, have a great weekend!
Javier

Ok I have a solution - Hope it will help
1 : download and install module image Show GK4, choose position header
2 : place this module before any other header position in module list
3 : in configuration : choose Module style : gk-creativity
4 : interface : width=2400, height = 1800 (for a wide image slider)

Then you have to modify your css as follows (be sure css override is enabled in template configuration (advanced parameters) )
#gkBg {
background-color: transparent !important;
}
.gkIsWrapperFixed {
background-attachment: scroll;
background-clip: border-box;
background-color: #C3B9DB !important; // HERE YOU CAN CHANGE THE COLOR OF THE BACKGROUND WHEN IMAGE IS LOADING
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: cover !important; // To enable full screen
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1 !important; // doing this way you can keep your "steakhouse" header
}
#gkHeaderMod > div > div {
padding-top: 0 !important;
padding-bottom: 0 !important;
background-color: rgba(147, 132, 168, 0.5); // OPTIONAL HERE YOU CAN CHANGE THE COLOR AS YOU WANT
border-bottom-right-radius: 45px; // optional, just to have a round corner at the bottom right
}

Hi

I'm afraid this particular style of Image Show module does not provide switching on click functionality, so code to do that is simply not there. Adding that would require some big changes to code and I'm afraid it's beyond our support.

Hi, i've tried to put the code to have a slide but it goes in fixed position and goes behind other content as you can see at my site:
http://www.quantobastasorrento.com/en/prova

Could you please help.
Thanks

Try to add the following custom css code at the bottom of your override.css file:

Code: Select all

body .gkIsWrapperFixed {
    position: absolute;
    height: 500px;
}


but I think you will have to also modify your header content, spaces etc.

You guys are the best! This is exactly the way it should be, someone discovers a useful feature and we all benefit from it.

Thanks a lot!!!