Tag Archives: gallery

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.

Web Design All-in-One For Dummies

web design all in one for dummiesQualche mese fa, Sue Jenkins (Luckychair) mi ha chiesto il permesso – prontamente accordato – per poter pubblicare sul suo libro di prossima uscita “Web Design All-in-One For Dummies“, in una sezione relativa alla creazione di gallerie di immagini, un tutorial su slideViewer – il mio famigerato quanto semplice (per dummies?) jQuery plugin; il libro è uscito, e alle pagine 447-449 (Chapter 8 > Creating slide shows) si parla proprio del mio plugin e di come costruire una galleria di immagini per il proprio sito. Sono piccole soddisfazioni, ma questo dimostra quanto alla fine, lavorare ‘per gli altri’ porti sempre buoni frutti.

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.

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

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!

jquery.slideviewer.js

Dopo avere sperimentato un altro pò con la galleria di immagini realizzata nel precedente post, ho realizzato il mio primo plugin ufficiale per jquery: slideViewer.

Si usa molto banalmente; si parte da una lista non ordinata (UL) con dentro delle immagini. Gli si dà un ID (id=”myGalleryID”) ed una classe (class=”svw”) e in perfetto stile jQuery gli si ‘applica’ il plugin dopo avere atteso che sia il DOM sia le immagini si siano caricate:

1
2
3
$(window).bind("load", function() {
	$("div#myGalleryID").slideView();
});

27 giugno 2007: enhanced tooltips
Una cosa che mi ha portato a verificare se un altro plugin poteva essere integrato in slideViewer opzionalmente, e cioè che potesse funzionare con o senza altri plugin estendendo le sue features, è stato il numero di feedback ricevuti sulla discussion list di jQuery.

Commenti come questo, proprio dall’inventore dell’utilissimo toolTip plugin mi hanno fatto molto piacere:

Now, how cool is that? Great stuff. I love the backinout easing. I consider integration of plugins the toughest part of all plugin development, nice to see some great work getting done on that matter :-)

In un paio di giorni (non full-time eh, ho anche gli elicotteri da far volare…) ho integrato il toolTip plugin e ho reso parametrizzabili il tipo di animazione e la sua durata. Il tutorial con gli esempi sono sempre alla stessa pagina comunque posto in queste due righe:

1
2
3
4
5
$("div#mygalthree").slideView({
	easeFunc: "bounceinout",
	easeTime: 2400,
	toolTip: true
});

Si tratta del comando che diamo nell’head della nostra paginetta html se vogliamo creare un galleria di immagini che abbia 2 secondi e quasi-mezzo di durata della transizione tra un foto e l’altra, e che rimbalzi per esempio tramite la funzione bounceinout. Ah appunto, vogliamo anche un tooltip un pò gajardo…

et voilà, slideViewer plugin per jQuery.

Got it, thanks. Fantastic, most lightweight/best slide carousel out there. money. :-P
— E.

Una lista di siti che usano jquery.slideviewer aggiornata al 01/04/2008:
Zachary Zavislak Photography
Di Stefano landscaping
Rival Songs

jQ stripViewer

Come probabilmente si é capito da vari post su questo sito, tra i miei interessi al momento c’è jQuery, questo framework JS che sta rivoluzionando il mio modo (ma non solo il mio) di scrivere javascript (il behaviour di una pagina).
Inspirato dagli effetti in dynamic HTML di questo sito e dalle ormai ‘vecchie’ interfacce in Flash tutte sliding e rimbalzanti, mi sono detto: ma perchè non farne una con jQuery?

strip viewerDi componenti slideShow in js o scritte anche con jQuery già ce ne sono, quindi non mi sono inventato nulla di nuovo, ma ho creato una base su cui lavorare. L’obiettivo é arrivare alla realizzazione di un plugin jQuery per visualizzare delle immagini in una mini-gallery e tale gallery dovrebbe essere parametrica cioè funzionare a prescindere dal numero e dimensione delle foto. Un motore che vada bene per foto grandi e piccole e basato sull’ormai standardizzato concetto che il javascript nelle pagine deve essere “degradabile” e cioè che se l’utente non ha l’interprete JS abilitato nel browser, semplicemente non vede gli “effettini” ma ha accesso comunque ai contenuti.

E così ho creato uno stripViewer (no, non ci sono donnine nude; per strip intendo una ‘fascia’, e cioè un’immagine lunga di cui si vede solo una porzione), e cioè un componente che ‘muove’ con un effetto easing le immagini della gallery, rivelandone solo una alla volta. Il tutto a partire da un markup semplicissimo, come questo:

1
2
3
4
5
6
<ul>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer01.jpg" /></li>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer02.jpg" /></li>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer03.jpg" /></li>
	<!-- eccetera -->
</ul>

Ok vediamo nello specifico che ci facciamo con questa lista. La lista è una banalissima lista flottata (così tutti i LI sono orizzontali) e all’interno di ogni LI abbiamo messo un’immagine.
Ok una lista di immagini. Bene, ci mettiamo intorno una DIV col seguente stile:

1
2
3
4
5
6
7
8
#stripViewer {
	position: relative;
	width: 200px;
	height: 100px;
	overflow: hidden;
	border: 5px solid red;
	margin: 2em 0;
}

Bene, si vede che questa DIV funge da maschera per il suo child (la lista UL) e ne rivela solo 200px; quindi tutte le immagini le dobbiamo fare 200px? Si, fino a che non avrò reso parametrico il valore width del container della lista…
Ok e ora?
Ora creiamo l’interfaccia. Una serie di ‘bottoni’ che comandino la gallery.
Partiamo sempre da una lista. Le liste, ricordate, sono la chiave per scrivere la struttura di un sito: tutto può essere una lista.

1
2
3
4
5
6
7
<ul>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<!-- tanti Li quanti sono quelli della lista immagini -->
</ul>

Ok, a questo punto aggiungiamo un pochino di javascript (jQuery).

1
2
3
4
5
6
7
8
var steps = $("#stripViewer>ul > li > img").attr("width");
	$("#stripTransmitter ul").find("a").each(function(i) {
		$(this).append( (i+1) );
		var cnt=-(steps*i);
		$(this).click( function() {
			$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
		});
	});

Vediamo come funziona:

1
var steps = $("#stripViewer>ul > li > img").attr("width");

Qui cerchiamo la dimensione delle immagini nella lista. Si, devono essere tutte della stessa larghezza (ma lavorerò anche su questo per svincolarla dalle dimensioni fisse e renderlo così parametrico).
L’attributo width delle immagini mi torna 200px.
Ok quindi gli step da fare sono tuti da 200. Ad ogni click ’scorro’ sull’asse x di 200px o multipli di esso (a seconda del tasto premuto).

1
2
3
$("#stripTransmitter ul").find("a").each(function(i) {
		$(this).append( (i+1) )
});

Qui per ogni tag A nella mia lista in “div#stripTransmitter” stampo (.append()) il numero. Otteniamo così una lista con bottoni numerati da 1 a n.

E ora la parte divertente:

1
2
3
4
var cnt=-(steps*i);
$(this).click( function() {
	$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
});

Qui la variabile cnt vale 200(steps) moltiplicato l’iteratore (i) quindi varrà 200, 400, 600 ecc.
Sul click di questi tag A nella nostra lista in “div#stripTransmitter” usiamo il metodo .animate() per dire che ci spostiamo a sinistra, quindi negativamente (-) per i pixel passati da steps , in 750 millesimi di secondo con animazione easing di tipo “expoinout”. per funzionare necessita ovviamente di jQuery Easing Plugin v1.1 ma se usassimo i metodi built-in di jQuery ci basterebbe scrivere “slow” al posto di “expoinout” e funzionerebbe lo stesso, ma senza easing effect.

Et voilà, uno stripViewer con jQuery.
Demo1: stripViewer di un’ unica immagine lunga
Demo2: stripViewer di una serie di immagini in una lista

Enjoy!