LinkPreview shows article preview on link hover. Inspired by Extension:Popups.
Installation
Configuration
Available through window.pPreview.
- Create configuration object (do it at first)
window.pPreview = $.extend(true, window.pPreview, {RegExp: (window.pPreview || {}).RegExp || {} });
| Key | Default | Description | Example |
|---|---|---|---|
csize
|
100 | Cache size. | window.pPreview.csize = 100;
|
debug
|
false
|
Debug mode, verbose output. Also available as &debug=1.
|
window.pPreview.debug = true;
|
apid
|
false
|
Use API to retrieve data. Faster (only one request performed), but obeys image restrictions (too small images will not be used to build preview). | window.pPreview.apid = true;
|
defimage
|
- | Default image source (before article image loaded). | window.pPreview.defimage = 'https://wikia.nocookie.net/someimage';
|
noimage
|
- | Image-not-found source. | Same as defimage.
|
delay
|
100 | Hover reaction delay. | window.pPreview.delay = 100;
|
dock
|
'#mw-content-text, #article-comments'
|
Article container. | window.pPreview.dock = '#mw-content-text';
|
fixContentHook
|
true
|
Ensure #mw-content-text (article content) was processed.
|
- |
scale : {r: '?', t: '/scale-to-width-down/350?'}
|
- | Replace r to t in the image source (vignette-based scaling). Use scale=false if no scaling needed.
|
window.pPreview.scale = {r: '?', t: '/scale-to-width-down/350?'};
|
tlen
|
1000 | Max text length. | window.pPreview.tlen = 1000;
|
wholepage
|
false
|
Parse whole page instead of section 0. Also available as &wholepage=1.
|
window.pPreview.wholepage = true;
|
pibox
|
false
|
Do not remove portable infobox (actually, any aside items). | window.pPreview.pibox = true;
|
piboxkeepprev
|
false
|
If true, will not remove elements that precede a portable infobox. If you have a layout like <some things portable infobox>, and want to keep some things intact. Requires pibox=true.
|
window.pPreview.piboxkeepprev = true;
|
RegExp.iimages
|
[]
|
Array of RegExp or plain text. Ignored images, will not be used to build preview.
|
window.pPreview.RegExp.iimages = [/myimage\.png/, new RegExp('myim.*'), 'some text'];
|
RegExp.ipages
|
[]
|
Array of RegExp or plain text. Ignored pages, on these pages previews will not be shown.
|
Same as iimages.
|
RegExp.ilinks
|
[]
|
Array of RegExp or plain text. Ignored links, will not generate previews.
|
Same as iimages.
|
RegExp.iclasses
|
[]
|
Array of strings. Ignored classes, links with these classes will not generate previews. | window.pPreview.RegExp.iclasses = ['myclass1', 'myclass2'];
|
RegExp.iparents
|
['[id^=flytabs]']
|
Array of strings (jQuery/DOM objects are permitted, but not tested). Ignored parent selectors, links that are descendants of these elements will not generate previews. By default, tabviews are ignored. | window.pPreview.RegExp.iparents = ['.myclass', '#myid', 'div[data-ignore-me=1]'];
|
RegExp.onlyinclude
|
[]
|
Array of strings (jQuery/DOM objects are permitted, but not tested). Selector to include in the HTML of the target page preview. If the selector is found, then only it will be shown and all other content will be ignored. | window.pPreview.RegExp.onlyinclude = ['.myclass', '#myid', '[data-include-me=1]'];
|
RegExp.noinclude
|
[]
|
Array of strings. Selectors to remove from the HTML of the target page preview. | window.pPreview.RegExp.noinclude = ['.myclass, #myid', '[data-exclude-me=1]'];
|
Mega example
window.pPreview = $.extend(true, window.pPreview, {RegExp: (window.pPreview || {}).RegExp || {} });
window.pPreview.defimage = 'https://vignette.wikia.nocookie.net/borderlands/images/0/05/Ajax.gif/revision/latest/scale-to-width-down/350?cb=20170626182120&path-prefix=ru';
window.pPreview.noimage = 'https://vignette.wikia.nocookie.net/borderlands/images/f/f5/%D0%97%D0%B0%D0%B3%D0%BB%D1%83%D1%88%D0%BA%D0%B0.png/revision/latest/scale-to-width-down/200?cb=20160122074659&path-prefix=ru';
window.pPreview.tlen = 1000;
window.pPreview.RegExp.iparents = ['.myclass', '#myid', 'div[data-ignore-me=1]'];
Addons
- newpages.js
- Adds preview button to Special:NewPages elements. Preview will shown up on the upper-left corner.
Demo
Hover the mouse over the links:
Localization
The "no image" image might be translated: edit MediaWiki:Custom-LinkPreview/i18n.json, use the "no-image" message to set full path to the translated image. One can use Linkpreview noimage en.svg file to create translated one. Note that the image have to be hosted on the Fandom, otherwise the image will not be used.
