Image Show GK4 like in creativity

Hi - I've been playing with this for a few hours now, and can't deduct the process: I would like to use the ImageShow GK4 on SteakHouse front page - similar to Creativity template. I've published the ISGK4 in module header position, replacing the custom html. My roadblock: I can't make the <header> tall enough, so the <div id="gkPageContent"> 'glues' beneath and not overlay on top of the slider - you can see my playground here: <http://www.mindsbehind.com/demo/gkhouse/> - I'm testing various scenarios, so the output there might vary from time to time.
I'll appreciate your advise - thanks,
AZ

You should create a new div outside of gkBg so that you can display this. I can help if you send me ftp

You should create a new div outside of gkBg so that you can display this. I can help if you send me ftp

@devsmi - thanks - i thought about it and tried but still the content (in this case <div id=gkBg>) ignores it. It has to do with a position: fixed within the slider, but even if I replace or try other techniques, I'm at square 1... I'll PM the FTP info if you would like to take a look -thanks!
AZ

Hey sorry, could I actually get admin too so I can check out the module setup . Thanks

Ok take a look and see if this is correct. I think that is what you were looking to do.

@devsmi - hmm... close(r) but no cigar - BTW, can you tell me what/where did you make changes?

The content of lower section (restaurant) still overlays the slider when scrolling up (eventually the background 'kicks in' - just before the <div id="gkPageContent"> reaches the top of the screen - and menu shows up - that's progress from what I had )
+ when page is loaded, you can see the header module (with logo) showing up while the slider is loading and then the slider covers the header...
+ when you scroll to the footer, the links are not clickable (are covered invisibly by the slider)

@gavick team: can you weight on this and help to fix it?
I was pretty sure that I could use the gk4 image show on any of your templates (in the end, it's your module... )
Thanks,
AZ

I am checking it out quick before I head to bed, give me a few minutes to look k. I was in a rush earlier so im sure I missed something

Ok sorry no fix yet, I must sleep. When I have more time I will look at this again for you.

Hi

Can You please put Image show into header back so I'll see what's going on ?

Hi

Can You please put Image show into header back so I'll see what's going on ?

@teitbite: thanks for responding. To keep things clean (separate from devsmi modifications), I have created another instance of the steakhouse: http://mindsbehind.com/demo/gksh/- currently you can see the Image show positioned above the "Header" custom html module. I'll PM a back-end access, so you can modify if necessary - thanks!

Hi

Please add this code to override.css and make sure override is enabled in template settings. I may not be perfect, but it's a start I believe.

Code: Select all

.gkIsWrapperFixed {
    left: 0;
    top: 0;
}

.frontpage #gkPageContent,
.frontpage #gkBottom1,
.frontpage #gkBottom2,
.frontpage #gkBottom3,
.frontpage #gkBottom4,
.frontpage #gkBottom5,
.frontpage #gkBottom6,
.frontpage #gkFooter {
    background: none repeat scroll 0 0 #fff;
    position: relative;
    z-index: 2;
}


I may not be perfect

Haha. What a funny typo It supposed to be "it".

I got Your PM with access and followed it. I can see my code worked great and slider is right where You wanted to. Am I right ? Just one thing is this blue kind background on wide screens. Try using this code to change it to be better fitting color:

Code: Select all

.gkIsWrapperFixed {
    background: none repeat scroll 0 0 #aaa;
}


BTW: My name is Piotr.

@teitbite:
thanks Piort for your help - the code made a difference but there is still a problem in functionality of the template: in comparison with the steakhouse demo template on gavick site, our modified template with image slider GK4 (http://mindsbehind.com/demo/gksh/) does not function properely: something must be causing conflict visible when you scroll the page down, especially in the parallax effect on sections (gkBottom1, gkBottom4) with background image - when you scroll the page background appears to 'quiver' - you'll see the background image at times in parts, loading in a weird 'jump-like' movements.
The gkBottom5 section (newsletter) will now have the image slider background, unlike the gavick demo.
Also the gkBottom6 section (location) will not work as expected: click the "locate us" button to see how the map only partially appears + the close button (x in cricle) is now only visible if you scroll the page all the way up.
Thanks for taking another look at this,
Best,
AZ

Hi

I cannot see the jump-like movement, but I even cannot see the link to "Locate Us" I think the problem You have mentioned is because of the size of backaground images not covering the background entirely. Please try add this to css:

Code: Select all

#gkHeaderMod > div > div {
    padding: 0;
}


If it's not the case please try to explain it with some screenshots.

Hi

@mbd.gavick Paulina contacted me regarding this request. Please send me an access to FTP and joomla panel and also an url to Your site (just so I will not need to jump from PM to PM).

Write me what is wrong with the solution You have already. Best would be to show me on screens the problems. I suspect the issues You may see can be connected with screen size.

Hi

I got Your mail, but the YouTube video is saying that this is a private video and I'm not allowed to see it.

For the map, please try add this to override.css:

Code: Select all

#gkBottom6 {
z-index: 99999;
}


@teitbite:
this doesn't work in conjunction with the other modifications. Here is the override.css so far:

Code: Select all

/* GK4 image show fix by teitbite */
.gkIsWrapperFixed {
    left: 0;
    top: 0;
}
#gkHeaderMod > div > div {
    padding: 0;
}

.frontpage #gkPageContent,
.frontpage #gkBottom1,
.frontpage #gkBottom2,
.frontpage #gkBottom3,
.frontpage #gkBottom4,
.frontpage #gkBottom5,
.frontpage #gkBottom6,

.frontpage #gkFooter {
    background: none repeat scroll 0 0 #fff;
    position: relative;
    z-index: 2;
}

.gkIsWrapperFixed {
    background: none repeat scroll 0 0 #aaa;
}

#gkBottom6 {
z-index: 99999;
}

if i quote out all the mods - then the template works correctly (minus the slider of course) - once we start applying the css overrides to view the gk slider, the whole template starts behaving erratically.
BTW, I have sent you an email - you're authorized to view the youtube video to see what happens with the template in Google Chrome browser.

Hi

I've just checked and it doesn't work like on Your vide for me: http://g.recordit.co/5q0I0kNv86.gif

I think this may be some browser rendering issue, so please make sure it's updated. I'll send You my contact details so we will talk it throught, becuase think we are trying to achieve 2 different things.

Hi

I've stripped all the code and start over. Because this template has a different structure than creativity I've took a short cut and to match differences I've used a small script added to /layout/blocks/head.php file:

Code: Select all

<script type="text/javascript">
   (function($) {
   $(document).ready(function() {
      function checkForChanges() {
         $('.frontpage #gkHeader').height( $(window).height() );

         if( $(window).scrollTop() > $(window).height() ) {
            $('.frontpage #gkHeader #gkHeaderMod').css('display','none');
         } else {
            $('.frontpage #gkHeader #gkHeaderMod').css('display','block');
         }

         setTimeout(checkForChanges, 50);
      }

      $(checkForChanges);
   });
   })(jQuery)
</script>


a css in override.css file now looks like this:

Code: Select all

.frontpage #gkHeaderMod .gkPage {
    max-width: 100%;
}

.frontpage #gkHeaderMod .gkPage a#gkLogo {
    display: none;
}

.frontpage #gkFooter,
.frontpage #gkBottom1,
.frontpage #gkBottom2,
.frontpage #gkBottom3,
.frontpage #gkBottom4,
.frontpage #gkBottom5,
.frontpage #gkBottom6,
.frontpage #gkPageContent {
    background-color: #fff;
    position: relative;
}

.frontpage #gkHeader .gkIsWrapperFixed {
    z-index: 0;
    padding: 0;
}


Hi

A small fix for tablet view. One of the classes in override.css should be:

Code: Select all

.frontpage #gkHeader .gkIsWrapperFixed {
    padding: 0;
    z-index: 0;
    left: 0;
}


Image Show GK4 in header-positon

my config for image show in header-position (as shown at http://mindsbehind.com/demo/gksh/) failed

1. installed a fresh joomla from gk_steakhouse_quickstart_J!3.zip
2. installed mod_image_show_gk4_J!3.zip
3. activated image show at position header in home
4. made changes to /layout/blocks/head.php and /css/override.css
5. Template manager: Features/Logo type: none

see here: http://demo.bitatwork.com

what's wrong?

Hi

You have missed css part or override.css file is not activated.