ImageShowGK4 text align

Hi there,
Using the ImageShowGK4 with the gk-photo template. Is there a way to make the text on the slides centered while maintaining the nice hover (arrow left/right) to navigate through the different slides?
Marc

Hello,

Please try to add the following CSS code under template settings-> advanced settings -> custom CSS code:

Code: Select all

.gkIsWrapper-gk_photo figcaption {
  text-align: center;
}
.gkIsWrapper-gk_photo figcaption h2,
.gkIsWrapper-gk_photo figcaption p {
  width: 100%;
}
.gkIsWrapper-gk_photo figcaption a {
  float: none;
  display: inline-block;
}

Hi Dziudek,
Thanks for your reply. If I add that code...(have tried something same as this) the hover effect is not possible anymore.
There is no cursor arrow anymore when hovering over the text...
Any thoughts?

Please try to replace in the gk_photo style in the engine.js file:

Code: Select all

elmt.addEvent('mouseover', function() {
                            if(!wrapper.hasClass('gk-arrow-visible')) {
                               wrapper.addClass('gk-arrow-visible');
                            }
                         });
                        
                         elmt.addEvent('mouseout', function() {
                            if(wrapper.hasClass('gk-arrow-visible')) {
                               wrapper.removeClass('gk-arrow-visible');
                            }
                         });

to:

Code: Select all

elmt.addEvent('mouseenter', function() {
                            if(!wrapper.hasClass('gk-arrow-visible')) {
                               wrapper.addClass('gk-arrow-visible');
                            }
                         });
                        
                         elmt.addEvent('mouseleave', function() {
                            if(wrapper.hasClass('gk-arrow-visible')) {
                               wrapper.removeClass('gk-arrow-visible');
                            }
                         });

Thanks Dziudek, I adjusted the code but it does not work. No cache and multiple refreshes but still the same, no arrow on hovering the text...

Sorry but in this case I have no other idea how to fix this issue - most probably it needs a bigger investigation which is beyond of our technical support.

Yep, solved it! As soon as you remove the floats all text becomes an obstacle for the hovering effect. So this is what I did:

- Edited view.php (in modules/mod_image_show_gk4/styles/gk_photo)

Changed line 84 from:

Code: Select all

<a href="<?php echo $link; ?>"><?php echo $link_text; ?></a>

To:
-

Code: Select all

<div style="float:left; width:100%;"><a href="<?php echo $link; ?>"><?php echo $link_text; ?></a></div>

And used the css styles from Dziudek:

.gkIsWrapper-gk_photo figcaption {
text-align: center;
}
.gkIsWrapper-gk_photo figcaption h2,
.gkIsWrapper-gk_photo figcaption p {
width: 100%;
}
.gkIsWrapper-gk_photo figcaption a {
float: none;
display: inline-block;
}