steveush

Hi @tinalewis,

This is a by product of the captions allowing clickable content within them as well as them being displayed over the original anchors in the page. The right click option to “Open link in new tab” is only available on anchor elements within a page and when you are right clicking with a caption visible you are not clicking the actual anchor but an overlay on top of it.

That said if you do not intend to have clickable content within captions there is some CSS you can apply that will effectively make the captions invisible to the mouse or touches allowing the right click behavior of the anchor and show the expected context menu.

.foogallery .fg-caption,
.foogallery .fg-image-overlay {
	pointer-events: none;
	touch-action: none;
}

This can be inserted into your sites styles.css file to apply it globally.

Thanks
Steve

Hi @pairfumlondon,

These warnings are being generated as WordPress has upgraded the built-in version of jQuery from the old 1.12.4 to the newest 3+. These are simply deprecation warnings for us developers to give us a heads up to change our code before a function we are currently using is removed.

We have already released one update to resolve quite a number of these warnings and will continue to work to remove the rest of them from our various plugins with the next updates.

So to answer your question, no you should not be worried about this, we are actively working to resolve these warnings.

Thanks

Hi @extinctdisney,

Which page are you expecting to see a gallery on? Apologies I could not find one on the home url of your site.

Thanks
Steve

Hi,

I had to do some testing with this to see why there was a cookie being reported.

We don’t actually make use of any localStorage or cookies in the standard workings of FooGallery. I have double checked and the only place in our code that relates to either is part of a debug utility which makes use of localStorage but it has to be manually run from the console.

Part of this utility checks as the script is parsed if the window.localStorage object exists. It does not read from or to the localStorage, simply checks if it exists. This is what Chrome is reporting as a cookie even though there is none. Essentially I think Chrome is reporting a false positive here.

That said I’ll be making some code changes to make sure the debug utility never touches the window.localStorage object until its needed.

Thanks

Hi @extrapaul,

That would be great as I suspect there might be other CSS on your site that is affecting the bar. I’ve tested locally on IE11 on 3 different machines and all of them display the text correctly.

Unfortunately without being able to inspect the DOM and check the rules myself it will be quite difficult to resolve your issue.

Please let us know when there is a url we could take a look at.

Thanks
~Steve

Hi @marrie80,

Apologies, I seem to have missed Brad’s initial mention on your ticket. Unfortunately the built-in hover icons can not be styled with CSS as they are simply background images.

The only way to change the icons would be to create your own image and then add some custom CSS to replace the original icon with your custom one.

To replace the built-in Zoom icon you could use the below CSS:

/* This is used for the default overlays: Light Foreground/Dark Background */
.foogallery.fg-hover-zoom .fg-image-overlay:before,
.foogallery.fg-hover-zoom .fg-caption-inner:before {
	background-image: url('URL-TO-LIGHT-ICON') !important;
}

/* This is used for the light overlays: Dark Foreground/Light Background */
.foogallery.fg-light-overlays.fg-hover-zoom .fg-image-overlay:before,
.foogallery.fg-light-overlays.fg-hover-zoom .fg-caption-inner:before {
	background-image: url('URL-TO-DARK-ICON') !important;
}

Then in the settings for the gallery you would select the Hover Effects > Icon > Zoom option to enable the custom icon.

Thanks
Steve

Hi @irina1975,

Ok, so there’s a bit of confusion going on here. Firstly that is not the CSS I provided from the previous ticket. That is the original CSS provided by our first line support @influxfooplugins which is what is causing the last item to be displayed at full width. As they said in their response:

The code above enables the gallery items to fill the width on both mobile and desktop to fill the voids.

You replied after that stating you instead wanted two columns on mobile instead of one, so I was asked to provide you with that CSS. I expected you to remove the CSS provided by @influxfooplugins and replace it with the CSS I provided, the CSS I provided is currently not included in the page at all.

Steps to fix:

Just to be clear I’ll refer to the below CSS provided by @influxfooplugins as old CSS;

/* fill foogallery maximum width */
.fg-simple_portfolio .fg-item {
	max-width: 100% !important;
}

1. Remove the old CSS from your style.css file.
2. Remove the old CSS from the gallerys Custom CSS option.
3. Now do you want the two column mobile layout to apply to all portfolio galleries?

If your answer to #3 is Yes then add the below CSS to the bottom of your style.css file and you should be done.

@media only screen and (max-width: 480px){
	.foogallery.fg-simple_portfolio .fg-item {
		margin: 5px !important;
		width: calc(50% - 10px) !important;
		min-width: calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
	}
}

If your answer to #3 is No and you only want the two column layout to be applied to a specific portfolio gallery then add the below CSS to the gallerys Custom CSS option and change the gallery ID to the current gallery. In the below CSS I used your gallery ID of foogallery-gallery-839 from the screenshot. You can see the current gallery ID within the Custom CSS option displayed above the text area.

@media only screen and (max-width: 480px){
	#foogallery-gallery-839.fg-simple_portfolio .fg-item {
		margin: 5px !important;
		width: calc(50% - 10px) !important;
		min-width: calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
	}
}

Once you have done these steps and cleared any cache your issues should hopefully be resolved.

Thanks