Caption bug in Tiled Gallery possible solution

Hi!

I’ve posted a question earlier about the behaviour of captions when using Tiled Galleries with Slim Jetpack (here here ) and I discovered what is in fact a bug in Mac Safari and Firefox and iOS Safari. I’ve also found a temporary solution (although I would appreciates ome feedback on that…).

Normally, if gallery images are linked to a caroussel, a caption that appears when hovering the image returns to its original (hidden) position before the caroussel is launched. So that when you return to the gallery page the captions are gone, and reappear when hovering again (or tapped in iOS). But when the images are linked to other pages something different happens, at least on my Mac in Firefox 23.0.1, Safari 6.0.5. and my iPad-simulator:

– In Safari, after using the browser’s ‘back’ button to go back to the gallery, the caption is still visible and behaves ‘in reverse’: hovering makes it disappear and leaving the image with the cursor makes it appear again. Clicking the image again restores the original behaviour. That’s visually confusing.
– In iOS the same, in fact, except that (of course) the whole sequence is divided into several clicks.
– In Firefox (Mac and PC with XP), after using the browser’s ‘back’ button, the caption is still visible, it disappears with the first mouse movement anywhere on the page.
– The only thing that makes all captions disappear is reloading the gallery page.

Only in Chrome everything seems to be handled as expected.

I don’t know if this is also occurring in the original Jetpack by WordPress plugin. But it would be nice if this bug could be resolved in a next version.

Solution?
Now, after some fiddling around I’ve found a temporary solution. This bit of code in the plugin’s original .js file:

TiledGallery.prototype.Captions = function() {
	/* Hide captions */
	this.caption.hide();

	this.item.on( 'hover', function() {
		$( this ).find( '.tiled-gallery-caption' ).slideToggle( 'fast' );
	});
};

can be replaced by:

TiledGallery.prototype.Captions = function() {
	/* Hide captions */
	this.caption.hide();

	this.item.hover(
		function() { $( this ).find( '.tiled-gallery-caption' ).slideDown( 'fast' ); },
		function() { $( this ).find( '.tiled-gallery-caption' ).slideUp( 'fast' ); }
	);
	this.item.click(
		function() { $( this ).find( '.tiled-gallery-caption' ).slideUp( 'fast' ); }
	);
};

and everything seems to be working okay in the browsers I mentioned. Although I’m not sure if this is the best way to solve this, since I know very little about scripting. Plus I didn’t test it widely. I would be glad to hear if there’s a better, more solid solution!

Hi, thanks for responding, mbrsolution!

Might be a good idea to try the Jetpack forum.
Slim Jetpack is indeed 2 updates behind the byWP version.

Earlier on I’ve compared the latest Slim .js file with the one in the latest byWP version and there are differences in this bit of code. Part of my solution comes from that (copying the complete .js from Jetpack didn’t do the trick).

By the way, related to this issue I posted another question here .

Thanks again.

Thanks, Wingerspeed! But I’m afraid the update the update even makes things worse for me…
I gave it a try, this is what happened:

The reverse behaviour of the captions seems to be gone, but the captions still don’t return to their original (hidden) position after clicking the image, not untill the first mouse movement after returning to the gallery page with the browser’s back button. In iPad-simulator the captions of all clicked images are still visible after using the back button, unless you reload the page completely. I’ve tested this in a clean WordPress install without any other plugins or special themes running.

Worse: the update completely smashed the layout of my galleries…

So I’m sticking to the 2.3.3. version for the moment, but thanks anyway. You can see one of my galleries here: