0
1<br />Segnalazione di alcune pluginsjQuery di varia utilità<br />Pro e contro nel loro utilizzo, comparazione con plugins...
2<br />Le plugins di cui parleremo sono:<br /><ul><li>jScrollPane
Jcrop
jQueryImageAnnotation
Easy Slider
ImageShadow
UnitPngPix
onImageLoadPlugin
jQueryCanvasRoundedCorners</li></li></ul><li>3<br />jScrollPane<br />Sito:<br />www.kelvinluck.com/assets/jquery/jScrollPa...
4<br />Jcrop<br />Sito:<br />deepliquid.com/content/Jcrop.html<br />Descrizione:<br />Interfaccia web per  il ritaglio di ...
5<br />jQueryImageAnnotation<br />Sito:<br />http://www.flipbit.co.uk/jquery-image-annotation.html<br />Descrizione:<br />...
6<br />Easy Slider<br />Sito:<br />http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding<br /...
Upcoming SlideShare
Loading in...5
×

Segnalazione di alcune plugins jQuery di varia utilità

1,190

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Segnalazione di alcune plugins jQuery di varia utilità"

  1. 1. 1<br />Segnalazione di alcune pluginsjQuery di varia utilità<br />Pro e contro nel loro utilizzo, comparazione con plugins simili, osservazioni. <br />Danilo Sanchi, Riccione<br />Retina Snc, Cattolica<br />
  2. 2. 2<br />Le plugins di cui parleremo sono:<br /><ul><li>jScrollPane
  3. 3. Jcrop
  4. 4. jQueryImageAnnotation
  5. 5. Easy Slider
  6. 6. ImageShadow
  7. 7. UnitPngPix
  8. 8. onImageLoadPlugin
  9. 9. jQueryCanvasRoundedCorners</li></li></ul><li>3<br />jScrollPane<br />Sito:<br />www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html<br />Descrizione:<br />Realizza una scrollbar in un div a dimensioni fisse<br />Pro:<br />Buona UX, intercetta il mouse wheel, reinizializzazioneonImageLoad<br />Contro:<br />Monoautore (blog), scrollbar a scomparsa.<br />Osservazioni:<br />Dipende da più librerie. Meglio dello Slider della UI.<br />uiSlider<br />
  10. 10. 4<br />Jcrop<br />Sito:<br />deepliquid.com/content/Jcrop.html<br />Descrizione:<br />Interfaccia web per il ritaglio di immagini<br />Osservazioni:<br />Ottima UX.<br />Utilizzato da Gravatar.<br />Da agganciare a codice server-side.<br />Utile per imporre immagini a proporzioni fisse.<br />gravatar<br />
  11. 11. 5<br />jQueryImageAnnotation<br />Sito:<br />http://www.flipbit.co.uk/jquery-image-annotation.html<br />Descrizione:<br />Interfaccia web per il binding di commenti a porzioni di immagine<br />Osservazioni:<br />Basato su ImageAnnotationPluginforDrupal.<br />Tag delle fotografie, vedi Flickr, Facebook<br />Interfaccia per creare mappe di link su un’immagine<br />
  12. 12. 6<br />Easy Slider<br />Sito:<br />http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding<br />Descrizione:<br />Slide show di testo e immagini.<br />Osservazioni:<br />Varie opzioni per coprire la maggior parte dei bisogni<br />Facile manipolazione CSS<br />at<br />
  13. 13. 7<br />ImageShadow<br />Sito:<br />http://www.gcmingati.net/wordpress/2007/03/14/drop-shadow-con-jquery/<br />Descrizione:<br />Tecnica per generare l’ombra alle immagini<br />Osservazioni:<br />Div annidati generati da jQuery<br />Dimensione variabile<br />dropShadowPlugintecnica<br />
  14. 14. 8<br />UnitPngFix<br />Sito:<br />http://labs.unitinteractive.com/unitpngfix.php<br />Descrizione:<br />PngFix per IE6<br />Pro:<br />Non sono necessari width ed height. Background e img.<br />Contro:<br />Non è jQuery. Conflitti con il ready di jQuery. <br />Osservazioni:<br />Si può estrarre la funzione e legarla al ready<br />onload<br />
  15. 15. 9<br />UnitPngFix<br />Hack per utilizzarlo con jQuery<br />function loadLightBox() { … }<br />function onImgLoad($selector) { //note: $selector is $(&apos;body&apos;) here }<br />function onLoad() { <br /> pngfix();<br /> $(&apos;body&apos;).onImagesLoad({ selectorCallback:onImgLoad });<br /> loadLightBox(); <br />}<br />$(document).ready(onLoad);<br />var clear=&quot;img/clear.gif&quot;; //path to clear.gif<br />pngfix = function() {<br /> if (!(jQuery.browser.msie && jQuery.browser.version.substr(0,1)&lt;&quot;7&quot;)) return;<br /> … <br />} <br />onload<br />
  16. 16. 10<br />onImagesLoadPlugin<br />Sito:<br />http://plugins.jquery.com/project/onImagesLoad<br />Descrizione:<br />Gestione dell’evento onImagesLoad<br />Osservazioni:<br />Differente dall’evento onLoad:<br />onLoad: fine lettura index.php<br />onImagesLoad: fine scaricamento di tutte le immagini<br />
  17. 17. 11<br />jQueryCanvasRoundedCorners<br />Sito:<br />http://ragamo.medioclick.com/jquery/corners/<br />Descrizione:<br />Genera div con gli angoli arrotonadati<br />Osservazioni:<br />Sfruttando il Canvas di JS disegna le stondature sugli angoli.<br />
  18. 18. 12<br />Conclusione<br />Grazie per l’attenzione,<br />Danilo<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×