SVG 3D Tag Cloud jQuery Plugin V2

Nach diversen Anfragen gibt es nun ein Update für das SVG 3D Tag Cloud jQuery Plugin.
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.

Sublime Text 3 toggle comment command doesn't work in Windows

Ein großes Ärgernis beim Arbeiten mit Sublime Text unter Windows ist das Problem, dass diverse Standard-Tastenkombinationen nicht funktionieren.
Mich hat besonders genervt, dass man Codezeilen, oder ganze Codeblöcke, nicht mit einer einfachen Tastenkombination auskommentieren kann. Schaut man in die Dokumentation, dann gibt es dafür Tastenkombinationen. Allerdings funktionieren diese nicht unter Windows.
Nach einer kleinen Recherche habe ich eine Lösung gefunden die wunderbar funktioniert und die ich an dieser Stelle mit euch teilen möchte. Wenn ihr auch mit ctrl + / bzw. mit deutscher Tastatur mit strg + / keine Codezeilen auskommentieren könnt, dann versucht auch mal folgendes.
Geht in Sublime Text im Menu auf den Punkt „Preferences“ und dort auf „Key Bindings“. Jetzt sollte sich ein neues Fenster öffnen das in etwa so aussieht wie dieses hier:

Hier findet ihr auch auf der linken Seite in dem Fenster (Default) die Standard-Tastenkombination für das togglen um Codezeilen ein-, bzw. auskommentieren zu können.

{ "keys": ["ctrl+/"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+/"], "command": "toggle_comment", "args": { "block": true } },

Auf der rechten Seite im Fenster (User) müsst ihr nun ein paar Zeilen einfügen, und schon ist das Problem behoben. Setzt hier einfach diesen Schnipsel ein und speichert ab:

{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }  

Das Ganze sollte jetzt so aussehen:

Geht zurück zu euerm Projekt und versucht erneut die Tastenkombination aus. Jetzt sollte es keine Probleme mehr geben und ihr könnt bequem per Tastenkombinationen (strg + /) togglen.