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 );
	} );
} );
		

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.

data attributes

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

Configuration options

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

{
	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'
}

{
	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!'
			}
		}
	}
}