In der Version 2 gibt es nun die Möglichkeit anstelle von Texten Bilder zu laden. Und, was auch schon häufiger angefragt worden ist, ihr könnt euch zu jedem Bild/Text auch einen Tooltip anzeigen lassen.
Die alte und die neue Version sind soweit kompatibel, weshalb ihr mit der neuen JS-Datei einfach die alte überschreiben könnt. Und das ohne die Funktionalität zu zerstören.
Hier ein Beispiel mit Bildern und Tooltips:
So setzt man nach wie vor Tags mit Text:
var entries = [
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' },
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' },
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' },
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
{ label: 'three.js', url: 'http://threejs.org/', target: '_top' },
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' },
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
{ label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
{ label: 'URL shortener', url: 'https://goo.gl/', target: '_top' }
];
Wollt ihr nun Bilder anstelle von Text anzeigen, dann sieht das wie folgt aus:
var entries = [
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }
];
Ihr ersetzt einfach nur den Paramter label mit dem Parameter image. Bei image gebt ihr den Pfad und den Dateinamen zu der gewünschten Grafik ein. Neben dem neuen Parameter image gibt es noch die neuen Parameter width und height, mit denen ihr die anzuzeigende Größe von eurer Grafik mit angeben müsst.
Und wenn ihr jetzt noch Tooltips dazu haben wollt schaut euch das Beispiel hier an:
var entries = [
{ image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Lorem ipsum' },
{ image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolor sit amet' },
{ image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
{ image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Sed diam' },
{ image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'At vero' },
{ image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Nonumy eirmod' },
{ image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Stet clita' },
{ image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Justo duo' },
{ image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Ut wisi enim' },
{ image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Minim veniam' },
{ image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Quis nostrud' },
{ image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Exerci tation' },
];
Ihr könnt ganz einfach den Parameter tooltip hinzufügen mit einem String der dann als Tooltip angezeigt werden soll.
Natürlich könnt ihr auch Text-Tags mit Tooltips kombinieren:
var entries = [
{ label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top', tooltip: 'Lorem ipsum' },
{ label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top', tooltip: 'Dolor sit amet' },
{ label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
{ label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top', tooltip: 'Sed diam' },
{ label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' },
{ label: 'CodePen', url: 'http://codepen.io/', target: '_top', tooltip: 'At vero' },
{ label: 'three.js', url: 'http://threejs.org/', target: '_top', tooltip: 'Nonumy eirmod' },
{ label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top', tooltip: 'Stet clita' },
{ label: 'JS Compress', url: 'http://jscompress.com/', target: '_top', tooltip: 'Justo duo' },
{ label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top', tooltip: 'Ut wisi enim' }
];
Wie schon in der alten Version müsst ihr das erzeugte entries Objekt mit an das settings Objekt übergeben. Beim settings Objekt sind ein paar optionale Parameter hinzugekommen. Hier eine Auflistung aller möglichen Parameter inklusive dem entries Objekt:
var settings = {
entries: entries,
width: 480,
height: 480,
radius: '65%',
radiusMin: 75,
bgDraw: true,
bgColor: '#111',
opacityOver: 1.00,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 800,
speed: 2,
fontFamily: 'Oswald, Arial, sans-serif',
fontSize: '15',
fontColor: '#fff',
fontWeight: 'normal',
fontStyle: 'normal',
fontStretch: 'normal',
fontToUpperCase: true,
tooltipFontFamily: 'Oswald, Arial, sans-serif',
tooltipFontSize: '11',
tooltipFontColor: '#fff',
tooltipFontWeight: 'normal',
tooltipFontStyle: 'normal',
tooltipFontStretch: 'normal',
tooltipFontToUpperCase: false,
tooltipTextAnchor: 'middle',//left, right
tooltipDiffX: 0,
tooltipDiffY: 20
};
Die frisch hinzugekommenen tooltipFont Parameter sind selbsterklärend. Mit tooltipTextAnchor gebt ihr an wie sich euer Tooltipp im Verhältnis zum Tag ausrichten soll. Bei Grafik-Tags empfiehlt sich 'left' und bei Text-Tags 'middle'. Mit tooltipDiffX und tooltipDiffY könnt ihr den Abstand zum Tag bestimmen.
Alles andere bleibt wie gehabt in der alten Version.
Schaut bei Fragen bitte erst in den alten Blogeintrag, da hier eine recht ausführliche Dokumentation mit enthalten ist. Ansonsten freue ich mich wie immer über Feedback und/oder Kommentare.
Zum Download gibt es wieder eine standard JS und auch eine minifizierte JS.
Bei Bedarf könnt ihr euch auch die Beispielseiten anschauen: Example 1, Example 2, Example 3 und Example 4.
Die hier in den Beispielen verwendeten Bilder/Icons sind von der Seite Smashing Magazine.
Update
GitHub
Das Projekt gibt es nun auch auf GitHub. Und hier geht´s zum GitHub Repository. Ihr findet hier immer die aktuelle Version und weitere Tutorials sowie Links.
JSFiddle
Hier ein weiteres Beispiel, das ihr direkt in JSFiddle betrachten und bearbeiten könnt.
