Category Archives: my jQuery plugins

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.

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.

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

liScroll – a jQuery News Ticker made easy

In questo periodo ho dovuto creare parecchi di questi news ticker(s) per delle app. intranet. Chi lo voleva che leggesse il contenuto da un XML feed, chi lo voleva largo, chi lo voleva più lento… oh ma un requisito comune no eh?! Insomma tanto ho fatto che ho deciso di farne un plugin per jQuery e lo ho chiamato liScroll (beh, scrolla una lista…) così ognuno se lo fa come vuole: si crea la solita lista non-ordinata di links, gli si dà un ID univoco, si include jQuery 1.2.1 e si inizializza così:

1
2
3
$(function(){
	$("ul#ticker01").liScroll();
});

Opzionalmente, se non vi va bene la velocità, potete cambiare la stessa in questo modo:

1
2
3
$(function(){
	$("ul#ticker02").liScroll({travelocity: 0.08});
});

Enjoy jQuery liScroll!

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