Hello

To display your FlexGallery caption text on touch devices try adding the following to the Custom CSS field of your templates parameters...

.touch .flexgallery figure.hover > img {

  -webkit-transform: scale(1.2);

  -moz-transform: scale(1.2);

  -o-transform: scale(1.2);

  -ms-transform: scale(1.2);

  transform: scale(1.2);

}

.touch .flexgallery figure.hover figcaption {

  opacity: 0.8;

}

.touch .flexgallery figure.hover p {

  -webkit-transform: translateY(0%);

  -moz-transform: translateY(0%);

  -o-transform: translateY(0%);

  -ms-transform: translateY(0%);

  transform: translateY(0%);

}

.touch .flexgallery figure.hover i {

  opacity: 1;

  -webkit-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

} 

Ciarán

Hi Ciaran,

Quiet a codestring!
But - the problem is in de Gridgallery, not the Flexgallery.
The Flexgallery is working good without this added code.

I modified the code (replaced 'flex' by 'grid') but that doesn't work.

Hello

By default the GridGallery module is not included with the Chelsea template. Would you have a URL to an example of your module?

Ciarán

Hi Ciaran,
Now it became clear to me that is does work on my iPad in Firefox (with the added code), but it does not in Safari. That is still a problem, because almost all iPads use Safari.

In one of my sites is does work in Safari only partly. See overwegmetkanker.nl Homepage. Click one box (with bigger text) and use the browsers ‘go back button’ to see the result. This site is built with Revolve.
The site http://artist.alstest.nl/presentaties/grid-gallery is built with Chelsea. The trick with the go-back-button doesn’t work here.
But: is does work well if viewed with Firefox!

So, Gridgallery is still a bit crippled.
How could we fix that?

(Once again)
Caption will work by disabling the link-option.
So we now have to choose: caption or link. Unfortunately not both.

Hello

It gets tricky as the GridGallery obviously depends on hover to display the caption. Each touch device handles hover actions differently. One option would be to display the caption by default on touch devices which can be done by adding the following to the Custom CSS field of your templates parameters...

.touch figure.effect p.description {

    opacity: 1;

}

.touch figure.effect figcaption {

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}

.touch figure.effect .overlay {

    opacity:0.6;

} 

Ciarán

Thanks Ciaran for your perseverance.
Unfortunately for now it's not an option to use this code, thus dimming the images.

But maybe once I can use your code.