JSFiddle - React, Tailwind, and code Playground
HTML
<div id="demo1" class="wikipediaContainer"></div>
CSS
.ajaxLoading {
margin-top: 50px;
text-align: center;
}
.wikipediaContainer {
position: relative;
min-height: 150px;
width: 600px;
padding: 10px;
border-radius: 5px;
background: #ddd;
}
.wikipediaContainer .bg {
position: absolute;
bottom: 20px;
right: 20px;
width: 135px;
height: 155px;
background: no-repeat url('http://upload.wikimedia.org/wikipedia/commons/3/30/Wikipedia_2.0-new_prototype.png');
opacity: 0.3;
}
.wikipediaContainer .wikipediaTitle {
text-align: center;
height: 30px;
font: 20px Verdana bold;
border-radius: 5px 5px 0 0;
background: #fff;
margin: -5px 0 10px 0;
line-height: 30px;
}
.wikipediaContainer .wikipediaLogo {
width: 150px;
float: left;
margin-right: 20px;
}
.wikipediaContainer .wikipediaDescription {
float: left;
width: 430px;
}
.wikipediaContainer ul.wikipediaThumbGallery {
float: left;
width: 600px;
list-style: none;
padding: 0;
}
.wikipediaContainer ul.wikipediaThumbGallery li {
display: inline-block;
float: left;
margin: 0 10px 10px 0;
}
.wikipediaContainer table.wikipediaInfoTable {
float: left;
width: 600px;
}
.wikipediaContainer .clear {
clear: both;
}
JavaScript
/*
* jQuery Plugin - Wikipedia V1.0
*
* todo: add description here
*
* Autor: Marcel Grolms - www.suabo.de 2013
*/
$.fn.WikipediaWidget = function(wikipediaPage, options) {
//init defaults
var showTitle = true;
var maxThumbnails = 3;
var cutFirstInfoTableRows = 4;
var maxInfoTableRows = 8;
var thumbMaxWidth = '180px';
var thumbMaxHeight = '180px';
//option handling
if (options != undefined) {
//we got more options
$.each(options, function(option, value) {
switch (option) {
case "showTitle":
showTitle = value;
break;
case "maxThumbnails":
maxThumbnails = value;
break;
case "maxInfoTableRows":
maxInfoTableRows = value;
break;
case "cutFirstInfoTableRows":
cutFirstInfoTableRows = value;
break;
case "thumbMaxHeight":
thumbMaxHeight = value;
break;
case "thumbMaxWidth":
thumbMaxWidth = value;
break;
}
});
}
//check if pagetitle ist set
if (wikipediaPage == undefined) {
console.log('Kein Wikipedia Suchtitel!Keine Abfrage gestartet!');
return;
}
//init given wikiContainer from the Selector init
var wikiContainer = this;
wikiContainer.append('<div class="ajaxLoading"><img src="img/ajax-loader.gif"></div>');
//get data.parse.images
$.getJSON('http://ja.wikipedia.org/w/api.php?action=parse&format=json&callback=?', {
page: wikipediaPage,
prop: 'text|images',
uselang: 'de'
}, function(parsedata) {
//remove loading image
wikiContainer.find('.ajaxLoading').remove();
//debug
//console.log(parsedata);
//drop text to div...