Segnalazione di alcune plugins jQuery di varia utilità

Pro e contro nel loro utilizzo, comparazione con plugins simili, osservazioni.

1

Danilo Sanchi, RiccioneRetina Snc, Cattolica

Le plugins di cui parleremo sono:

- jScrollPane- Jcrop- jQuery Image Annotation- Easy Slider- Image Shadow- UnitPngPix- onImageLoadPlugin- jQuery Canvas Rounded Corners

2

jScrollPaneSito:www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Descrizione: Realizza una scrollbar in un div a dimensioni fisse

Pro:Buona UX, intercetta il mouse wheel, reinizializzazione onImageLoad

Contro:Monoautore (blog), scrollbar a scomparsa.

Osservazioni:Dipende da più librerie. Meglio dello Slider della UI.

uiSlider

3

JcropSito:deepliquid.com/content/Jcrop.html

Descrizione: Interfaccia web per il ritaglio di immagini

Osservazioni:Ottima UX.Utilizzato da Gravatar.Da agganciare a codice server-side.Utile per imporre immagini a proporzioni fisse.

gravatar

4

jQuery Image AnnotationSito:http://www.flipbit.co.uk/jquery-image-annotation.html

Descrizione: Interfaccia web per il binding di commenti a porzioni di immagine

Osservazioni:Basato su Image Annotation Plugin for Drupal.Tag delle fotografie, vedi Flickr, FacebookInterfaccia per creare mappe di link su un’immagine

5

Easy SliderSito:http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

Descrizione: Slide show di testo e immagini.

Osservazioni:Varie opzioni per coprire la maggior parte dei bisogniFacile manipolazione CSS

at

6

Image ShadowSito:http://www.gcmingati.net/wordpress/2007/03/14/drop-shadow-con-jquery/

Descrizione: Tecnica per generare l’ombra alle immagini

Osservazioni:Div annidati generati da jQueryDimensione variabile

dropShadowPlugin tecnica

7

Unit Png FixSito:http://labs.unitinteractive.com/unitpngfix.php

Descrizione: Png Fix per IE6

Pro:Non sono necessari width ed height. Background e img.

Contro:Non è jQuery. Conflitti con il ready di jQuery.

Osservazioni:Si può estrarre la funzione e legarla al ready

onload

8

Unit Png FixHack per utilizzarlo con jQuery

function loadLightBox() { … }

function onImgLoad($selector) { //note: $selector is $('body') here }

function onLoad() { pngfix(); $('body').onImagesLoad({ selectorCallback:onImgLoad }); loadLightBox(); }

$(document).ready(onLoad);

var clear="img/clear.gif"; //path to clear.gifpngfix = function() { if (!(jQuery.browser.msie && jQuery.browser.version.substr(0,1)<"7")) return; … }

onload

9

onImagesLoadPluginSito:http://plugins.jquery.com/project/onImagesLoad

Descrizione: Gestione dell’evento onImagesLoad

Osservazioni:Differente dall’evento onLoad:onLoad: fine lettura index.php onImagesLoad: fine scaricamento di tutte le immagini

10

jQuery Canvas Rounded CornersSito:http://ragamo.medioclick.com/jquery/corners/

Descrizione: Genera div con gli angoli arrotonadati

Osservazioni:Sfruttando il Canvas di JS disegna le stondature sugli angoli.

11

Conclusione

Grazie per l’attenzione,Danilo

12