steveush

Hi @irina1975,

Apologies I didn’t say where to put it as this is also just CSS as the previous replies were. You should be able to place it in the same place you did previously when you were trying the previous answers.

Thanks

Hi @lionsmane,

Could you give me some additional details please. Basically just which iPhone and iOS version are you seeing the issue on? I’ve tested using my personal devices and can pinch and zoom however my devices are not able to install the latest iOS (older model iPhone and iPad) so I just wanted to know what you are using so I can test through an emulator.

Thanks
Steve

Hi @guillaumepierson,

It is still showing the stylesheets as being delivered as HTTP. Could you please try going to the FooGallery > Settings > General tab and then clicking both the Clear Gallery HTML Cache and the Clear CSS Optimization Cache buttons. Also just to make 100% sure all caching is cleared, if you use a plugin like Autoptimize please clear its cache as well.

Let me know if that resolves it.

Thanks
Steve

Hi @shivgohil,

The issue here is that the column layout uses percent sizes as it needs to fill the space. By default the normal gutter is 1% of the total width, which is why it is looking a bit large on a full width page.

To trim it down a bit I would recommend sticking with percent values instead of fixed pixels by simply decreasing the defaults for the 4 column layout to something like the below:

.fg-masonry.fg-masonry-4col .fg-item,
.fg-masonry.fg-masonry-4col .fg-column-width {
    width: 24.85%;
}
.fg-masonry.fg-masonry-4col .fg-gutter-width {
    width: 0.2%;
}
.fg-masonry.fg-masonry-4col .fg-item {
    margin-bottom: 0.2%;
}

This should give a much thinner gutter while still maintaining the total as 100% of the available width. 24.85% * 4 columns = 99.4% and then 0.2% * 3 gutters = 0.6% to make up the remainder. Of course you can fiddle with these values but ideally they should always add up to 100%.

To explain the above, the width: 24.85% property is the width of each column/item. The width: 0.2% property is the width of the gutters and the margin-bottom: 0.2% is the height of the gutters.

The above CSS is generic and should work for any Masonry gallery with a 4 column layout so it could theoretically be added to your sites styles.css file. This means all Masonry 4 column galleries on your site will use this new CSS. If you would rather apply it to just a single gallery then you can make use of the Custom CSS option and specify the gallery ID as you previously did. As an example, using the ID of foogallery-gallery-9404 from the https://www.shiv.photo/weddings-asian-wedding-gallery/ the above CSS would change to be the following:

#foogallery-gallery-9404.fg-masonry-4col .fg-item,
#foogallery-gallery-9404.fg-masonry-4col .fg-column-width {
    width: 24.85%;
}
#foogallery-gallery-9404.fg-masonry-4col .fg-gutter-width {
    width: 0.2%;
}
#foogallery-gallery-9404.fg-masonry-4col .fg-item {
    margin-bottom: 0.2%;
}

Thanks
Steve

Hi @davidmendesgd & @phillcoxon,

Although this seems to be a front end issue it actually stems from the PHP code. However while I do not do very much PHP development if I remember right this has been caused by a couple things in the past:

1. Themes/plugins override the default output of the esc_attr method by hooking into the attribute_escape filter and then they do not handle the JSON encoding correctly of the data-foogallery attribute.
2. Caching/minifying plugins that store and alter the page output not correctly handling the JSON encoding of the data-foogallery attribute during minification of the page HTML.

I’ll tag in @bradvin though as he is our PHP developer and should be able to help you out with this issue better than I can.

Thanks
Steve

Hi @liskynd,

This is simply the theme developers not checking out the cause of the error. It’s fine though as I will gladly explain it so you can get them to fix their issue.

Firstly FooGallery outputs the HTML for its’ items and the JavaScript expects that HTML to be in a certain format. In this case most notably for parsing of the items so we can work with them on the front end. To parse an item the JavaScript loops through the HTML output by the server and queries it for the various elements it needs. It does this using CSS selectors to find those elements. If all the required elements are not found then it reports the error you’re seeing in the console letting us know that it can not parse the current item and as such does not know how to handle it.

Now onto the issue.

The primary cause of the problem here is that the <a/> element within a FooGallery item no longer has the CSS class of fg-thumb. The thumbnail is required and so parsing fails as it can’t find the <a class="fg-thumb"/> element.

If you view-source of your page and check the <a/> elements within the gallery markup they all now only have a single CSS class, grouped_elements. As this is in the page source received from the server this means that somewhere in the PHP someone is hooking into the rendering pipeline and simply replacing all CSS classes on anchors instead of adding there own CSS classes to them. Quite simply the result should be <a class="fg-thumb grouped_elements"/> instead of the current <a class="grouped_elements"/>.

Now you may ask how do I know it’s the theme doing this and not some other plugin? Well quite simply I went through all the JavaScript being loaded by the front end to find out which scripts are specifically looking for elements with a CSS class of grouped_elements and as you suspected, it was the themes tc-scripts.min.js found at the following URL:

http://www.2xtemp.jirina.fi/wp-content/themes/customizr/inc/assets/js/tc-scripts.min.js?ver=4.1.55

If you view this in Chromes developer console you can format the minified file into a more readable state and find the specific reference on line 4406.

So this comes down to a bug in the implementation of FancyBox done by the theme developers. They need to update their PHP code so that it appends additional CSS classes to the anchors instead of replacing everything.

Now we could work around the parsing issue but you would simply encounter additional problems as many of the galleries features are implemented though CSS and specifically the fg-thumb CSS class. Removal of this CSS class by the theme is breaking the gallery.

Thanks
Steve

Hi @mikemp,

The issue here is that there seems to be another plugin adding extra HTML markup into the gallery. There are extraneous <p> elements in the gallery markup on your page that do not appear to come from our plugin. One wraps the label containing the image count while another is being inserted just after the Next button and yet another is added into the root container. The below shows the simplified HTML markup containing these <p> elements.

<div class="foogallery">
	<div class="fiv-inner">
		<!-- ...items -->
	</div>
	<div class="fiv-ctrls">
		<div class="fiv-prev"><span>Prev</span></div>
		<p>
			<label class="fiv-count"><span class="fiv-count-current">1</span>of <span class="fiv-count-total">28</span></label>
		</p>
		<div class="fiv-next"><span>Next</span></div>
		</p>
	</div>
	</p>
</div>

The above should actually look like the below:

<div class="foogallery">
	<div class="fiv-inner">
		<!-- ...items -->
	</div>
	<div class="fiv-ctrls">
		<div class="fiv-prev"><span>Prev</span></div>
		<label class="fiv-count"><span class="fiv-count-current">1</span>of <span class="fiv-count-total">28</span></label>
		<div class="fiv-next"><span>Next</span></div>
	</div>
</div>

So I would try and find the plugin that is adding in this extra markup and disable it or exclude the galleries from being included in whatever it is trying to do.

That said if you can’t find what is adding in this extra markup you can style away the problems being caused using the following CSS inserted into your styles.css file.

.foogallery.fg-image-viewer .fiv-inner > p {
	display: none;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls {
	position: relative;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-next,
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
	position: absolute;
	float: none;
	width: 80px;
	top: 0;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
	left: 0;
}
.foogallery.fg-image-viewer .fiv-inner .fiv-ctrls .fiv-prev {
	right: 0;
}

Thanks
Steve