Category Archives: jQuery

modoslider(s)

modoslider
© modostudio

I talentuosi amici di modostudio mi hanno chiesto di realizzare un paio di nuovi imagesliders per il loro sito. Ne ho quindi realizzato uno per la homepage basato sul markup esistente in pagina ed uno per i singoli progetti generato da un feed xml – cioè il DOM relativo a lista ed immagini sono iniettati a runtime; quest’ultimo, in particolare, è una versione modificata del mio jQuery slideViewer, adattato allo scopo per poter usare i feed preesistenti (xml con nome e path delle immagini) che servivano a generare le galleries implementate con SlideShowPro, un Flash-based gallery engine che ha fatto il suo tempo. Lo slider per la home invece si presenta come un endless scroller con thumbnails.

Ken Schles uses slideViewerPro

kenschles
Image credits: Ken Schles photography – portaits page. featuring slideViewerPro.

Tre o quattro settimane fa, il fotografo Ken Schles mi ha contattato chiedendomi se potevo aiutarlo ad implementare slideViewerPro (il mio jQuery gallery engine) sul suo sito; mi capita abbastanza spesso di ricevere richieste di ‘aiuto’ o di implementazioni di nuove features. Questo ‘Ken’ mi aveva inviato anche una url per vedere come stava implementando l’engine e per farsi aiutare a risolvere alcuni problemi di allineamento su altri elementi della pagina; incollo la url nel browser e appena parte lo slider ecco apparire volti molto noti, tra i quali mi sembra di riconoscere Rod Stewart, Alicia Keys e Martin Scorsese. Dico, ma chi é questo Ken? Leggo la sua bio e mi accorgo che é uno dei fotografi americani più noti ed importanti, con esposizioni permanenti al MoMa di New York, autore di libri definiti una “intellectual milestones in photography” (Süddeutsche Zeitung) e di foto degli album di rock bands come Cypress Hill e Green Day, solo per citarne alcune. Insomma un pro della macchina fotografica.

In un primo momento ho tentato di applicare qualche fix al CSS ma mi sono subito reso conto che avendo Ken costruito quel sito nell’arco di alcuni anni, si era portato dietro parecchie incongruenze e ripetizioni inutili nelle dichiarazioni; un altro grande problema risiedeva nel fatto che nessuna pagina aveva lo stesso markup della precedente: ogni pagina era unica. Ovvio, un progetto amatoriale ma tutto sommato abbastanza bene eseguito; si vede che usa un Mac e che il suo browser di riferimento deve essere Safari: ha usato selettori ed animazioni ‘tipiche’ del webkit, molto avanzate e questo mi ha stupito. Comunque, mi sono proposto di riscrivere per intero il CSS e anche i templates dai quali avrebbe potuto continuare da solo a ricodificare l’intero sito; era l’unico modo – fra l’altro – di far funzionare correttamente la gallery e rendere la grafica consistente in tutte le pagine. Oggi lo ha pubblicato e sono davvero contento di averlo aiutato a ricostruire questo suo sito, nel quale evidentemente ha investito ore di lavoro e voglia di imparare. Bravo Ken.

vizlab.it

vizlab
VIZLAB – Digital Images for Architecture and Design www.vizlab.it

Gli amici di modostudio hanno chiesto la mia collaborazione per un nuovo progetto: Vizlab. Vizlab é il loro Visualization Department cioé l’area dello studio dedicata ai rendering; per un buon showcase dei loro incredibili lavori, abbiamo pensato di realizzare una gallery di immagini fullscreen con una interfaccia minimale ed effetti di fading fra una slide e l’altra, con jQuery, ovviamente. Dai rendering pubblicati ci si rende subito conto che ricerca, sviluppo ed un elevato livello tecnico rappresentano il motore e la vision del gruppo; modostudio/vizlab é una realtà tra le più promettenti del panorama italiano… e come si dice? Una immagine vale più di mille parole.

Dal punto di vista design/development del minisito, oltre a consigliarvi di dare uno sguardo al codice JavaScript (jQuery), posso anticiparvi che parti di esso potrebbero essere utilizzate per costruire soluzioni similari o più avanzate; non entrerò troppo nel dettaglio ma posso dire che data l’esigenza di dover visualizzare delle immagini a fullscreen, l’unico problema poteva essere quello di dover attendere il caricamento delle stesse (5, 25 o 100 e molto grandi) prima di far partire lo slideshow (come avviene per slideViewer e slideViewer Pro). Per risolvere il problema ho pensato di sviluppare una soluzione in cui gli oggetti immagine vengono reperiti a partire da un file JSON nel quale si trovano il path e la descrizione – non sono quindi inseriti del DOM della pagina; in questo modo, definito un limite minimo di attesa (per es. si attenda che le prime 3 immagini siano in memoria) é possibile far partire lo slideshow. Non é di certo una soluzione non intrusiva (se JavaScript é disabilitato non si vede nulla) ma se state tutti in fissa con FaceBook vuol dire che avete tutti JS abilitato.

In realtà si tratta del motore per slideshow basati su JSON che avevo ideato per visualizzare le mie foto da flickr ma che non ho mai realmente completato e reso pubblico sotto forma di plugin poichè in questo momento sono più interessato allo sviluppo con Processing. In ogni caso, usando il metodo getJSON() é possibile parsare un file di questo tipo ed utilizzarlo per costruire a runtime tutto il DOM che volete; poche righe di codice per un risultato professionale e la base per un plugin molto interessante, che mi riprometto di completare, prima o poi.

offset con jQuery

Durante la fase iniziale dello sviluppo di un widget jQuery un bel pò più articolato, mi sono ritrovato al punto in cui offset().left e top, ed il loro utilizzo erano chiari; ho quindi deciso di condividere con voi questi ‘effettini’ trasformandoli in un piccolo plugin con funzionalità di Zoom e Pan (ingrandimento e scroll in base alla X e Y del puntatore del mouse).

miniZoomPan

Si chiama miniZoomPan e funziona così: si prepara il markup composto da una DIV con un ID e dentro ci si mette un’immagine; la classica immagine in un post, per esempio.

1
2
3
<div id="zoom01">
	<img src="leaf_s.jpg" />
</div>

Si instanzia il plugin (scaricabile qui) in questo modo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
	$("#zoom01").miniZoomPan({
	sW: 200, //small image width and height
	sH: 250,
	lW: 370, //large image width and height
	lH: 462
	// other options
	/*
	frameColor: "#cecece",
	frameWidth: 1,
	loaderContent: "loading..." // text or image tag eg.: "<img src='spinner.gif' />"
	*/
	})
});

Fatto. Come potete notare sW e sH sono le dimensioni dell’immagine piccola, mentre lW e lH sono quelle dell’ingrandimento. Obbligatoriamente le vs. immagini dovranno avere la parte finale del nome file modificato ad hoc (mycat_s.jpg per la piccola, mycat_l.jpg per la grande).
A questo punto quando vi posizionate sull’immagine, ne viene caricata una di dimensioni maggiori (grande quanto volete) che scrollerà in base alla posizione del mouse. Un preload customizzabile con testo o con una gif informa l’utente del caricamento in corso.

Qui trovate la pagina d’esempio, dove con un minimo di pazienza potrete recuperare il CSS e lo script che comunque per comodità potete prelevare rispettivamente qui e qui. Si tratta di piccolo plugin senza pretese, che però può servire su un online store per visualizzare al volo l’ingrandimento di una maglietta o di un oggetto senza dover cambiare pagina o usare finestre modali.

miniZoomPan plugin. Enjoy.

slideViewerPro. For ‘pro’ gallery needs.

jQuery slideViewerPro
Image credits: Alien Blob – J. Bumgardner

In questi giorni ho potuto rimettere le mani su un ‘vecchio’ progetto, dopo che per caso mi sono dovuto cimentare nella realizzazione di qualcosa di simile, che poi mi è servito – con le opportune modifiche – per proseguire nella realizzazione di questo plugin per jQuery: slideViewerPro.

Devo dire che sono soddisfatto del risultato finale visto che tra le richieste di updates per il suo predecessore c’erano la possibilità di far avanzare le slides in modo automatico e di poter avere delle thumbnails da selezionare, in alternativa ai numeri; slideViewerPro ha tutto questo, e altre opzioni. Ho anche scritto un tutorial in inglese grazie al quale – forse – si capisce come costruire uno slider per immagini da mettere nel proprio blog, o da usare come base per uno slideshow di progetti; per questo non riporto porzioni di codice o istruzioni su questo post.
Inoltre è nata una collaborazione a ‘due mani’ di cui però non darò ulteriori dettagli se non che con questo mio ‘asiatico’ collaboratore stiamo lavorando ad un merge tra le due versioni di slideviewer (1.1 e Pro); in pratica alla fine dovremmo arrivare alla realizzazione di una complete-gallery-solution cioè un unico script che con un paio di settings proponga una UI con numeri o thumbnails.

Come da ‘tradizione’ slideViewerPro si lo si può usare in modo molto semplice, a partire da una lista non ordinata di immagini.

happy birthday jQuery

Rapidissimi auguri per jQuery, il celeberrimo framework JavaScript ideato e presentato esattamente 3 anni fa al primo BarCampNYC da John Resig. Inoltre esce oggi la tanto attesa versione 1.3; ecco alcune delle BIG features:

  • Sizzle: A sizzlin’ hot CSS selector engine.
  • Live Events: Event delegation with a jQuery twist.
  • jQuery Event Overhaul: Completely rewired to simplify event handling.
  • HTML Injection Rewrite: Lightning-fast HTML appending.
  • Offset Rewrite: Super-quick position calculation.
  • No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

E sempre da oggi, è disponibile un nuovissimo API browser.
Tanti auguri jQuery!

slideViewer (image click)

Durante lo scorso anno ho ricevuto decine di mails a proposito di slideViewer, il mio modesto – ma ampiamente apprezzato – engine per image-galleries fatto con jQuery. La maggior parte delle richieste erano: “si può fare in modo che le immagini vadano avanti facendo click sulle immagini stesse?”.
Stamane, dopo 18 mesi (giugno 2007) dalla prima release del plugin, ho voluto vedere quanto ci voleva a fare questa modifica.

1
2
3
4
5
6
7
8
9
10
// next image via image click 14/01/2009
jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) {
jQuery(this).bind("click", function(){
	var ui 	= 	jQuery(this).parent().parent().parent().next().find("a");
	if(z+1 < pictEls){
		ui.eq(z+1).trigger("click");
	}
	else ui.eq(0).trigger("click");
   });
});

All’inizio, come per tutte le cose che hai fatto da molto tempo e di cui non ricordi neanche come ci sei riuscito, ho cominciato a giocherellare coi selettori per trovare l’immagine, associarvi un evento click, ripassare la posizione alla interfaccia coi numeri… poi un lampo: bastava usare .trigger(”click”) per ’simulare’ il click su uno degli elementi della UI. In effetti era già tutto pronto, selezione/deselezione del link interessato, spostamento della UL… l’unica cosa chè ho dovuto fare è verificare se stiamo cliccando sull’ultima immagine della lista per ‘riavvolgere’ tutto alla posizione 0, iniziale.
Sarebbe il caso, se avessi tempo, di calcolare l’offset del mouse rispetto all’immagine. In questo modo se clicco nella metà destra di una foto posso andare alla prossima, viceversa se sono nella metà sinistra, torno indietro. Boh, aspettiamo che me lo chiedano.
slideViewer 1.1

jQuery, Microsoft, and Nokia

jQuery logoMicrosoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).

Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.

Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.

new Year brings new things

Let me send out best wishes to all for you and your families in the following year! No matter how good or bad past year was for you, I hope this brand new year will bring more success and happiness in everyone’s business and personal life.
GCM

A proposito di success e satisfaction voglio annotare in questo breve post di auguri per il nuovo anno, anche un paio di piccole soddisfazioni personali, relative ai miei (unici) due plugin jQuery finora realizzati: liScroll e slideViewer.

Già da tempo avevo visto che sia l’uno, sia l’altro avevano un buon ranking tra i “Most Popular” plugin di jQuery e, poichè nelle pagine-tutorial di questi miei plugins ho installato Google Analytics ho potuto apprezzare il traffico generato da queste pagine (il referral è la pagina plugin di jQuery): picchi di 500 visite al giorno per slideViewer (il mio generatore di image-galleries) e 600 per liScroll (il mio news ticker).

Addirittura c’è chi si è preso la briga di paragonare 5 gallerie fatte con jQuery e di decretare come la migliore proprio slideViewer, o chi la ha inserita tra le “12 better Javascript and Ajax based solutions for gallery needs”; e poi c’è chi ha scritto tutorial del tutorial per il mio news ticker plugin (e da qui il numero di visite) … insomma l’anno è finito bene e comincia bene (ma si dai siamo ottimisti, stò governo cadrà, la monnezza a Napoli brucerà e Carla Bruni si sposerà… e andiamo), ho avuto un buon feedback per queste due semplici idee e penso che il mio impegno non potrà che aumentare su questo fronte infatti sto lavorando alla versione 2.0 di slideViewer, ho pubblicato un brand new “sliding” portfolio … e mi sono comprato un Logo 500DX al posto del pesante Quick EP10.

Happy new Year!