FANDOM


LinkPreview shows article preview on link hover. Inspired by mw:extension:Popups.

Installation

Importing multiple scripts? This quick guide shows how to combine the imports.
  • For site-wide use, an administrator can add the line below to the wiki's MediaWiki:ImportJS page.
dev:LinkPreview/code.js
  • For personal use, add the code snippet below to your global.js page (for use on all wikis) or your common.js page on your wiki (for use on a single wiki). Note that personal JS must be enabled for your account.
importArticles({
    type: 'script',
    articles: [
        'u:dev:MediaWiki:LinkPreview/code.js',
    ]
});

Settings

Available through window.pPreview.

Create configuration object (do it at first)
window.pPreview = $.extend(true, window.pPreview, {RegExp: (window.pPreview || {}).RegExp || {} });
  • csize : 100 - cache size. Example: window.pPreview.csize = 100;
  • debug : false - debug mode, verbose output. Also available as &debug=1. Example: 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). Example: window.pPreview.apid = true;
  • defimage : - default image source (before article image loaded). Example: window.pPreview.defimage = 'https://wikia.nocookie.net/someimage';
  • noimage : - image-not-found source. Example: same as defimage.
  • delay : 100 - hover reaction delay. Example: window.pPreview.delay = 100;
  • dock : '#mw-content-text, #article-comments' - article container. Example: 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 img src (vignette-based scaling). Use scale=false if no scaling nedeed. Example: window.pPreview.scale = {r: '?', t: '/scale-to-width-down/350?'};
  • tlen : 1000 - max text length. Example: window.pPreview.tlen = 1000;
  • wholepage : false - parse whole page instead of section 0. Also available as &wholepage=1. Example: window.pPreview.wholepage = true;
  • RegExp.iimages : [] - array of RegExp or plain text. Ignored images, will not be used to build preview. Example: window.pPreview.RegExp.iimages = [/myimage\.png/, new RegExp('myim.*'), 'some text'];
  • RegExp.ipages : [] - array of RegExp or plain text. Ignored pages, preview will not show up. Example: same as iimages.
  • RegExp.ilinks : [] - array of RegExp or plain text. Ignored links, will have not preview on it. Example: same as iimages.
  • RegExp.iclasses : [] - array of strings. Ignored classes, links with these classes will have not preview on it. window.pPreview.RegExp.iclasses = ['myclass1', 'myclass2'];
  • RegExp.iparents : ['[id^=flytabs]'] - array of strings (jQuery/DOM objects are permitted, but not tested). Ignored parent elements, children links of these elements will have not preview on it. 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. If selector found, then other content will be ignored. Example: window.pPreview.RegExp.onlyinclude = ['.myclass', '#myid', '[data-include-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:

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+