jQuery 3d - un alternativo a Cumulus

8 contenuti / 0 new
Ultimo contenuto
jQuery 3d - un alternativo a Cumulus

La battaglia di oggi è stato di creare da un view una specie di visuale simile a Cumulus. Ma purtroppo avevo due specifiche diverse. Primo stavo usando una view (solo dei titoli) e secondo, più oneroso, stavo già usando lightbox per visualizzare gli risultati.

In questo caso sarebbe stato troppo costoso usare (o modificare) Cumulus/Tagadelic. Per fortuna, la rete è piena di persona disposta a pubblicare e documentare il loro lavoro. Così sono arrivato a questo articolo da Devirtuoso. Vedo che era anche passato ZioBudda.

C'era qualche problema, ma se come hanno già chiuso i commenti, non posso dare indietro i miei esperimenti, quindi lo pubblico qui.

E' un pezzo di codice JavaScript molto breve che permette di creare un specie di 'Cumulus' senza Flash, ma tenendo la funzionalità di altri JavaScript, quale Lightbox2, per esempio.

Un esempio usando Drupal e views? Bisogna semplicemente aggiungere il codice JavaScript, e puntarlo al view (pagina costruito con stile HTML list, non ordinato) renderlo appetibile a Drupal, e modificare le selector della lista:

/**
* Produce 3D rotating link cloud (similar to Cumulus)
*
* See http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/ */
Drupal.behaviors.linkCloud = function (context) {
  var offset3d = 0;                                                                  // angle offset for animation
  var stepping3d = 0.03;                                                             // how fast the list rotates
  var elements3d = $('div.view-fass-aneddoti div.view-content div.item-list ul li'); // all the list elements
  var list3d = $('div.view-fass-aneddoti div.view-content div.item-list');           // the list wrapper
  ...
};

Il resto del codice segue più o meno quello del link.

Nota Bene. E' stato progettato per una lista di 10-15 elementi. Oltre bisogna modificare un pò più massicciamente il codice. Io avevo 40-60 elementi, ed ho sgobbato un pò per arrivare...

HTH

John

P.S. Naturalmente ho lasciato IE8 come ultima prova. (E/O)rrore. Con HTML più complesso del file statico fa il rendering dei font in modo davvero terribile. Ovviamente cosa che non fa FF, Chromium o Opera. Sigh. La soluzione (drastico) è di togliere il commando di opacity - non chiedermi perchè. Quindi se viene fuori dei fonti che sembrano scritti da una scimmia ubriaco, metti un bel commento (// davanti) alla riga
$element.css("opacity", size / 100);

carino anche se su Chrome e FF4 avrei predisposto le CSS Transitions, per poi effettuare il fallback su jquery puro sugli altri browser (infatti su Chrome è abbastanza laggoso :D)

Buh magari ne faccio uno in css3 :D

Con tutti questi nuovi comandi sul forum, manca "sottotitoli in ingrish". Ma di che cosa stai blatterando? ;-)
Non credevo di blatterare io, penso che ci saranno persone interessati ad usare questo script anche per i views...

Più imparo, più dubito.

jhl.verona wrote:
Con tutti questi nuovi comandi sul forum, manca "sottotitoli in ingrish". Ma di che cosa stai blatterando? ;-)
Non credevo di blatterare io, penso che ci saranno persone interessati ad usare questo script anche per i views...

Cosa non hai capito? Magari ti posso aiutare :D Ti propongo 3 scelte

  • laggoso
  • CSS Transitions
  • fallback

PS: io mi riferivo allo script originale, non alla tua guida; sorry!

Più imparo, più dubito.

jhl.verona wrote:
Il primo che hai detto

E' l'italianizzazione dell'aggettivo "laggy", ma nell'accezione di "problematico, non fluido".

INteressante lo script, con FF3.6 manda una CPU al 100%, per il resto sono abbastanza d'accordo con psicomante, proverei con le transizioni di CSS3 prevedendo eventualmente sistemi di fallback. Sicuramente interessante il tentativo di rimuovere flash dai siti per le cose inutili :)

Se ti interessa ci sono anche altri modi di farlo, sfruttando canvas, vedi per esempio:

Ciao
Marco
--
My blog
Working at @agavee

Il secondo link sembra interessante. Cercerò di dedicare un pò di tempo a studiarlo perchè fa proprio il fallback - canvas se c'è altrimenti metodo tradizionale...

Ho dato un occhiata al script jQuery3d, ed aggiunto qualche miglioreria. Su Windowz XP IE8 mi da 45% CPU, su Linux FF3.6 66%. Molto, ma molto meno per Opera e Chromium.

Nota: per 'stressare' il CPU bisogna 'passare' il bordo alto o basso del quadro col mouse per avere la massima rotazione. Se metti il mouse in centro, si ferma ed il CPU va a 1%...

Più imparo, più dubito.