jQuery Wikilookup

Add the power of Wikipedia to your website

View on Github Wordpress Plugin
Demos:
Usage demo Visual demo Popup demo

jQuery.wikilookup is a configurable jQuery extension that enables you to add quick information from Wikipedia and other wikis.

Use the plugin

To use jQuery.wikilookup, include it in your page:

<script src="../dist/jquery.wikilookup-1.0.0.js"></script>
<link rel="stylesheet" href="../dist/jquery.wikilookup-1.0.0.min.css">

Call the plugin on the DOM element that holds your text.

$( '.content').wikilookup();

By default, the plugin looks for elements tagged by data-wikilookup property. You can change that property by providing an alternative selector:

$( '.content').wikilookup( { selector: '.someClass' } );

Showing the data

jQuery.wikilookup manages the operation of fetching the data and creating a display, but it is agnostic as to where that display is placed. Deciding where the results appear is up to you.

The view for each lookup word is stored in the data-wl-widget data attribute of that node. The presentation jQuery object is stored in the $element property of that object. You can call for it and display it wherever you want.

For example, to show the data in a fixed panel:

<div class="panel" style="min-height: 200px; border: 1px solid #ccc;">Information is displayed here.</div>

$( document ).ready( function () {
	$( '.demo-1' ).wikilookup();

	// When clicking any of the lookup words, display the content
	// in the panel
	$( '.demo-1' ).find( '[data-wikilookup]' ).click( function () {
		$( '.panel-1' ).empty()
			.append( $( this ).data( 'wl-widget' ).$element );
	} );
} );
		
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to go.
Information is displayed here.

Using sources and languages

jQuery.wikilookup searches English Wikipedia by default, but allows you to define other sources to use in our text. The sources can be referenced from the individual terms, or override the default.

If a defined source (like English Wikipedia) is set up using {{lang}} magic word in its baseURL then you can also reference and change languages in individual words in your text.

For example, using the example with the panel above, we can define different sources in wikilookup initialization, and then use them in the text.

<div class="panel" style="min-height: 200px; border: 1px solid #ccc;">Information is displayed here.</div>

$( document ).ready( function () {
	$( '.demo-2' ).wikilookup( {
		sources: {
			trek: {
				baseURL: 'https://sto.gamepedia.com/api.php'
			}
		}
	} );

	// When clicking any of the lookup words, display the content
	// in the panel
	$( '.demo-2' ).find( '[data-wikilookup]' ).click( function () {
		$( '.panel-2' ).empty()
			.append( $( this ).data( 'wl-widget' ).$element );
	} );
} );
		

<span data-wikilookup data-wl-title="Far_Far_Away_(song)">Far far away</span>,
behind the word <span data-wikilookup>mountains</span>, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated they live in
Bookmarksgrove right at the coast of the Semantics, a large
<span data-wikilookup>language</span> ocean. A small river named Duden flows by
their <span data-wikilookup data-wl-title="Place_(United_States_Census_Bureau)">place</span>
and supplies it with the necessary regelialia. It is a paradisematic
<span data-wikilookup data-wl-lang="es" data-wl-lang="país">country</span>,
in which roasted parts of <span data-wikilookup>sentences</span> fly into
your mouth. Even the all-powerful Pointing has no
<span data-wikilookup data-wl-source="trek" data-wl-title="Specialization:_Damage_Control_Engineer">control</span>
about the blind <span data-wikilookup>texts</span> it is an almost unorthographic
life One day however a small line of blind text by the name of
<span data-wikilookup>Lorem Ipsum</span> decided to go.
		

In the demo below, nodes with [data-wl-source] and [data-wl-lang] are marked with background colors.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to go.
Information is displayed here.

data attributes

There are several available data attributes that control behavior per term.

attribute Description
data-wl-title Set an alternative title
data-wl-lang Set a language; this only works if the source is the default (English Wikipedia) or if the given source has {{lang}} parameter in its baseURL
data-wl-source Set a named source for this lookup term. If the source isn't supplied, or is not recognized, the system will use the default.

Configuration options

jQuery.wikilookup allows for initialization configuration that enable you to use advanced features when defining your text lookup nodes.

Option Default Description
selector '[data-wikilookup]' { selector: '.someClass' }
Set the selector for lookup words.
trigger 'click' { trigger: 'mouseenter' }
Set what triggers the data update; available options are 'click' or 'mouseenter'
messages
{
	link: 'Read more',
	pending: 'Loading...',
	error: 'There was a problem loading this page information.',
	articleHistory: 'Article history',
	articleLink: 'Go to the original article',
	wikimediaIntro: 'Help us improve Wikipedia',
	wikimediaParticipate: 'Participate',
	wikimediaSupport: 'Support'
}
Definition of the text that appears on the display.
prefetch false { prefetch: true }
If set to true, initiates the fetching of all available lookup nodes even if they weren't directly triggered.
If false (by default) the nodes are fetched from the API only when they are directly triggered.
This should only be set to true if there aren't a lot of lookup terms.
sources
{
	sources: {
		remote: {
			baseURL: 'https://{{lang}}.example.com/api.php',
			lang: 'es',
			useRestbase: false,
			logo: {
				url: 'http://example.com/logo.jpg', // Will be forced for max-height 50px
				title: 'My wiki!'
			}
		}
	}
}
Set up sources for the nodes to lookup. By default, the lookup source is English Wikipedia. If you want to use another source, you should supply the definition through this parameter.
You can set up named sources or override the default. Any node referencing a source will use the given source; for example <span data-wikilookup data-wl-source="remote">term</span> will use the source named 'remote'.