MediaWiki talk:Gadget-LargerGallery.js

This script, LargerGallery, is a JavaScript gadget which can be enabled or disabled in your Preferences.

Gadget descriptions:

ar
ca
de
es
fr
ja
pt
ru
sl
zh-hans

LargerGallery: Creates a select to resize image galleries with an extra zoom feature, including categories and search page. [talk]

i18n

Gadget translations:

no internationalisation required:

Written by Perhelion (based on a snipped version by Bawolff). If you find bugs and can't figure out how to fix them yourself, please add a section to this page and I'll see what can be done. Works also on the special pages Search and ListFiles (but not automatically).

To change the default magnification factor, use the following parameter in your own .js (like /vector.js):

window.largerGallery = 1.5;

To disable (or set another factor to) the hover zoom effect, use the following parameter:

window.largerGalleryZoom = 1;

Used by VisualFileChange.js as module.

Category contents hidden for categories containing audio files (Monobook)[edit]

When using the Monobook skin, activating this gadget causes the contents of categories which include audio files to disappear. Specifically, the ul element with the classes gallery mw-gallery-traditional which encapsulate the category contents gets an inline display: none rule applied to it by some Javascript.

I have a few hacks in my monobook.css, but I've cleared that out and done a hard reload to verify that they're not a factor. The issue is not seen in Monobook when this gadget is disabled. It's also not seen using Vector with the gadget enabled. As far as I can tell, it is only seen in categories with audio files, such as Category:Music and Category:Ambulances, but not in categories with only images and/or video, such as Category:Gamla stan. —LX (talk, contribs) 10:37, 7 April 2018 (UTC)[reply]

@LX: Thanks for report!

Fixed!? -- User: Perhelion 18:15, 20 May 2018 (UTC)[reply]

Perhelion: Yep, thanks! —LX (talk, contribs) 19:59, 20 May 2018 (UTC)[reply]

Necessary update after change in code base[edit]

After changing the code base this gadget needs an update, cf. phab:T314318 and mw:Parsoid/Parser Unification/Media structure/FAQ #The "image" class is no longer present on file description links. See also the according change for gadget QICvote.

For this script this means editing line 241.

old: galleryBoxes = galleries.find('.image img');
new: galleryBoxes = galleries.find('.image img, .mw-file-description img');

Apparently, this is is with external uses and some caching in mind. After a while this could even be changed to
galleryBoxes = galleries.find('.mw-file-description img');
— Speravir – 23:54, 24 July 2023 (UTC)[reply]

@Speravir: Done. Raymond (talk) 05:01, 25 July 2023 (UTC)[reply]

Thank you. — Speravir – 00:36, 26 July 2023 (UTC)[reply]

Unfortunately, this was not enough. I could identify the cause, but do not get the full fix. — Speravir – 00:36, 26 July 2023 (UTC)[reply]

Now I was able in finding a fix. I started another section with a new request. — Speravir – 23:02, 29 July 2023 (UTC)[reply]

Necessary update after change in code base, part 2[edit]

This is the diff. If it does not help, see below. Please, remember changing the revision date on line 6.

37c37
< 		position: 'absolute',
---
> 			position: 'relative',
61c61
< 	// [0].srcset = "" // not needed anymore, only maybe do set a new mag factor (which should very rarly the case!?)
---
> 	// [0].srcset = "" // not needed anymore, only maybe do set a new mag factor (which should very rarely the case!?)
86,87c86
< 	if (zoom < 1.3) zoom = 0;
< 	else zoom.toFixed(1);
---
> 	zoom.toFixed(1);
156,159c155,157
< 				child1 = $this.children('div'),
< 				child2 = child1.children('div'), // .thumb
< 				child3 = child2.first().children('div').first();
< 			if (!child3[0])
---
> 				child1 = $this.children('div').first(), // .thumb
> 				child2 = child1.children('span');
> 			if (!child2[0])
162,163c160,161
< 			// var img = child3[0].querySelector('img'); // bit faster than .find("img")[0]
< 			var img = child3.find('a img')[0];
---
> 			// var img = child2[0].querySelector('img'); // bit faster than .find("img")[0]
> 			var img = child2.find('a img')[0];
170c168
< 				child3.on('mouseenter', mouseenter).on('mouseleave', mouseleave);
---
> 				child2.on('mouseenter', mouseenter).on('mouseleave', mouseleave);
172c170
< 				child3.height(''); // clear old absolute
---
> 				child2.height(''); // clear old absolute
174c172
< 					child3.off('mouseenter mouseleave');
---
> 					child2.off('mouseenter mouseleave');
186,189c184,186
< 			child1.width(bW);
< 			// child2.first().height(bW - 5);
< 			child2.first().height('');
< 			child2.width(bW - 5);
---
> 			// child1.first().height(bW - 5);
> 			child1.first().height('');
> 			child1.first().width(bW);
191c188,189
< 			child3.css('margin', bH + 'px ' + ((bW - 5 - iWnew) / 2) + 'px');
---
> 			child2.css('margin', bH + 'px ' + ((bW - 5 - iWnew) / 2) + 'px');
>

In case the above is not helpful I will go through the changes from bottom to top (because the line numbers will change) showing the new code:

Lines 185 to 191
(line 186 child1.width(bW); is actually removed):

			$this.width(bW);
			// child1.first().height(bW - 5);
			child1.first().height('');
			child1.first().width(bW);
			// Default margin on max iW is 15, margin-width (needed for lesser hover)
			child2.css('margin', bH + 'px ' + ((bW - 5 - iWnew) / 2) + 'px');

Lines 154 to 175
(line 156 child1 = $this.children('div'), is actually removed):

		galleryboxes.each(function () {
			var $this = $(this),
				child1 = $this.children('div').first(), // .thumb
				child2 = child1.children('span');
			if (!child2[0])
				return; // caption e.q. or faulty thumb

			// var img = child2[0].querySelector('img'); // bit faster than .find("img")[0]
			var img = child2.find('a img')[0];

			if (!img)
				return; // non image file

			// already there?
			if (!oldMag && zoom) { // hover
				child2.on('mouseenter', mouseenter).on('mouseleave', mouseleave);
			} else {
				child2.height(''); // clear old absolute
				if (!zoom)
					child2.off('mouseenter mouseleave');
			}

Lines 85 to 87
(line 86 if (zoom < 1.3) zoom = 0; is actually removed):

	zoom = zoom || 2.5 - factor * 0.6;
	zoom.toFixed(1);

This is unrelated to the recent code update and debatable. I found the code in line 86 caused some unwanted behaviour: If the largest and second largest zoom had been selected, the further zooming with mouseover hovering was disabled which is a fair view. But afterwards even when one selected a smaller zoom the zooming with mouse did not work anymore until the page had been reloaded. Line 86 also just could commented out (by prepending two slashes like seen on other lines), but I do not see any value in this due to this odd behaviour.

Line 61:

	// [0].srcset = "" // not needed anymore, only maybe do set a new mag factor (which should very rarely the case!?)

I. e. just fix the typo from rarly to rarely. Maybe there are more typos I, too, didn’t notice.

Line 37:

		position: 'relative',

This means alter the value absolute to relative.

Line 6:
Just as reminder: Change the revision date.

That’s all. :-) — Speravir – 23:02, 29 July 2023 (UTC)[reply]

Done --Lucas Werkmeister (talk) 20:42, 1 August 2023 (UTC)[reply]

Video DOM changed[edit]

{{Edit request}} The gadget doesn't recognize videos any more because of related DOM changes. I suggest the following changes:

To make video thumbnails zoom as everything else change
var img = child2.find('a img')[0];
to
var img = child2.find('a img')[0] || child2.find('video')[0];
To stop mouseenter from throwing errors change $this.find('img') to $this.find('img, video').
Unfortunately the gadget gets confused and partly destroys the video players. As a quick hack I suggest to add the following condition in the mouseenter function, directly after img = $img[0]:
```
if (img.nodeName === 'VIDEO') {
	// FIXME: Currently not implemented
	return;
}
```

Requested via Reparatursommer. --Thiemo Kreuz (WMDE) (talk) 16:08, 12 September 2023 (UTC)[reply]

Maybe helpful

first item: line 161 to be edited
second item: code to be inserted after line 29

Thiemo, really VIDEO in uppercase letters? Because I only see <video> in HTML source, ie. in lower case letters (as also seen in first part of your your request). Or do I misunderstand something?

— Speravir – 00:44, 13 September 2023 (UTC)[reply]

I know, but this is how nodeName works. Thiemo Kreuz (WMDE) (talk) 05:32, 13 September 2023 (UTC)[reply]

Oh. OK then. — Speravir – 22:18, 13 September 2023 (UTC)[reply]

@Thiemo Kreuz (WMDE):

Done first part, but not the second part, because I can’t reproduce the broken behavior (I tested on Henry Lehrman, a random gallery page with a few videos, and the img is just undefined; do you have another example?), and I also think it must be buggy – how can the result of .find('img')[0] have any nodeName other than IMG? --Lucas Werkmeister (talk) 18:15, 14 September 2023 (UTC)[reply]

@Lucas Werkmeister: Whoops, sorry. There was a step missing. See above. An even simpler alternative is to add if (!$img.length) return; at the top of mouseenter just to make it stop throwing errors. --Thiemo Kreuz (WMDE) (talk) 07:16, 15 September 2023 (UTC)[reply]

Done Lucas Werkmeister (talk) 08:03, 15 September 2023 (UTC)[reply]

Not clickable in search?[edit]

This works fine on gallery pages for me, but in search results, the dropdown doesn't seem to be clickable. I've only tested this on Old Vector. 𝟙𝟤𝟯𝟺𝐪𝑤𝒆𝓇𝟷𝟮𝟥𝟜𝓺𝔴𝕖𝖗𝟰 (𝗍𝗮𝘭𝙠) 23:32, 19 May 2024 (UTC)[reply]

I've done some testing (on Windows 11 and Firefox 126.0), and it only seems to be clickable on new Vector, Minerva, and Cologne Blue, for some reason. Queen of Hearts (not related) 23:38, 19 May 2024 (UTC)[reply]