When opening the site, in portrait, once clicked on a gallery image, the image is displayed behind the gallery. However once i switched the position of the iPad to landscape it appears normal. On normal browsers and mobile the gallery appears OK. Not sure why there is a problem, as the CSS seems to be OK, I've included z-index:999.
<div class="picture @if (Model.PictureModels.Count > 1){<text>col-xs-9</text>}">
@if (Model.DefaultPictureZoomEnabled)
{
<a href="@Model.DefaultPictureModel.FullSizeImageUrl" data-gallery="lightbox-p" title="@Model.Name" id="main-product-img-lightbox-anchor-@Model.Id">
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
</a>
<div class="zoom">
<a href="@Model.DefaultPictureModel.FullSizeImageUrl" data-gallery="lightbox-p" title="@Model.Name" class="zoom-link">+</a>
</div>
}
else
{
<img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
}
Here some code of the Image gallery, If you need any further info, please ask and i will edit my question for you.
