Le problème lors de l’utilisation d’un formulaire d’upload classique est que l’on ne voit pas le fichier uploader.
Pour remédier à cela on peut utiliser un peu de Javascript afin d’afficher une miniature dès l’upload et vérifier ainsi son choix d’image.

Voici donc la solution à l’aide de Jquery:
Installation et Démo : http://www.zurb.com/playground/ajax_upload
Licence: MIT Licence

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/ajaxupload.js" type="text/javascript"></script>

$(document).ready(function(){

	var thumb = $('img#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

Le thème est totalement skinnable via le fichier CSS.

Caractéristiques Ajax Availability Calendar :

• Open Source et gratuit
• Items illimités
• Langues illimités.
• Etat de réservation illimité (dispo, réservé, offre spéciale etc.)
• Back-office intégré
• Multiple administration utilisateur

Site Web: http://www.ajaxavailabilitycalendar.com/
Démo: http://www.ajaxavailabilitycalendar.com/demo
Back-office Démo: http://www.ajaxavailabilitycalendar.com/calendar/ac-…
User: admin – Password: demo
Téléchargement : http://www.ajaxavailabilitycalendar.com/download

jqFancyTransitions est un plugin jQuery pour des diaporamas photos, il supporte 3 types de transition:

• Vague
• rideau
• tirette

avec la possibilité de choisir la direction et la position de l’animation

Les options de configuration sont

• Vitesse du titre
• Opacité du titre
• délai entre les transitions
• délai entre les bandes
• nombre de bandes

jqFancyTransitions ne nécessite pas de liste non-ordonnée mais simplement d’une div contenant les images.

Compatible avec la majorité des navigateurs web,
Licence GPL
Site Web : http://workshop.rs/projects/jqfancytransitions/
Télécharger : http://code.google.com/p/jqfancytransitions/downloads/list

YoxView est un plugin jQuery hautement customisable (Lightbox) pour afficher des images sous forme de galerie dans une page.
Il affiche une liste d’images dans une modal box avec les boutons standard suivant/précédent ou sous forme de diaporama.
Il permet aussi d’afficher plusieurs instances configurables indépendamment dans la même page.

YoxView est multi-langues et dispo avec plusieurs fichiers langue.
La navigation entre les images peut de plus se faire avec le clavier.
Les options sont nombreuses comme l’opacité, l’arrière-plan, transitions, etc….

A découvrir donc rapidement…

Compatible avec la majorité des navigateurs web.
Site Web : http://www.yoxigen.com/yoxview/
Télécharger : http://www.yoxigen.com/

jDigiClock est un plugin jQuery inspiré du widget Montre du célébre HTC Hero.
Pour l’utiliser il suffit d’inclure la librairie jQuery,
Dans la partie HEAD:

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Configuration goes here
        });
    });
</script>

jDigiClock posséde pas mal d’options tels que les chemins pour l’arrière-plan, pour les icônes, la config pour les codes de géolocalisation, config AM/PM et la température C/F.

jDigiClock compatible avec les navigateurs suivants:

• Internet Explorer 7
• FireFox 3.5
• Google Chrome 3.0
• Safari 4.0

Site Web : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
Licence : MIT et GPL Licence

Les caractéristiques

Le code (ex jQuery)

<!-- Load Queue widget CSS and jQuery -->
<style type="text/css">@import url(css/plupload.queue.css);</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
	google.load("jquery", "1.3");
</script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="/plupload/js/gears_init.js">
</script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js">
</script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->

<script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
$("#uploader").pluploadQueue({
	// General settings
	runtimes : 'gears,flash,silverlight,browserplus,html5',
	url : 'upload.php',
	max_file_size : '10mb',
	chunk_size : '1mb',
	unique_names : true,

	// Resize images on clientside if we can
	resize : {width : 320, height : 240, quality : 90},

	// Specify what files to browse for
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"},
		{title : "Zip files", extensions : "zip"}
	],

	// Flash settings
	flash_swf_url : '/plupload/js/plupload.flash.swf',

	// Silverlight settings
	silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
});

// Client side form validation
$('form').submit(function(e) {
	var uploader = $('#uploader').pluploadQueue();

	// Validate number of uploaded files
	if (uploader.total.uploaded == 0) {
	// Files in queue upload them first
	if (uploader.files.length > 0) {
	// When all files are uploaded submit form
	uploader.bind('UploadProgress', function() {
	if (uploader.total.uploaded == uploader.files.length)
		$('form').submit();
	});

	uploader.start();
} else
alert('You must at least upload one
file.');

	e.preventDefault();
	}
	});
});
</script>

<form>
	<div id="uploader">

	<p>You browser doesn't have Flash, Silverlight, Gears,
BrowserPlus or HTML5 support.</p>
	</div>
</form>
			

La documentation est bien fournie et il y a de nombreux exemples selon les utilisations.
Le tout sous licence GPL v2 License
Site Web : http://www.plupload.com/
Démos : http://www.plupload.com/example_queuewidget.php

Formwizard est un plugin jquery qui peut convertir votre formulaire standard en un formulaire multi-part et vous permettra d’augmenter votre taux de transformation de saisie de formulaire, car selon les statistiques un formulaire trop long peut être une barrière pour l’utilisateur. Le fait de le convertir en plusieurs étapes permet de réduire cela.

Le formulaire sera donc découpé en plusieurs étapes afin de faciliter son remplissage par l’utilisateur.
Pour cela, il suffit seulement de tags spécifiques tels que: fistStep, secondStep, etc..
Exemple:

<form id="theForm" method="post" action="#">
       <div id="firstStep">
         <h1>step 1 - falls through to step 2 on next</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
       </div>
       <div id="secondStep">
         <h1>step 2 - branch step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
         <select  >
           <option value="" >Choose the step to go to...</option>
           <option value="thirdStep" >Go to Step3</option>
           <option value="fourthStep" >Go to Step4</option>
         </select><br />
       </div>
       <div id="thirdStep">
         <h1>step 3 - submit step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value=""/><br />
       </div>
       <div id="fourthStep">
         <h1>step 4</h1>
         <input  type="text" value="" /><br />
         <input  type="text" name="email" /><br />
       </div>
       <div id="lastStep">
         <h1>step 5 - last step</h1>
         <input  type="text" value="" /><br />
         <input  type="text" value="" /><br />
       </div>
       <input type="reset" value="Reset" />
       <input type="submit" value="Submit" />
     </form>

Configuration:

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script type="text/javascript" src="js/jquery.history.js"></script>
  <script type="text/javascript" src="js/jquery.form.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>

  <script type="text/javascript" src="js/jquery.form.wizard-2.0.0-RC.js"></script>

  <script type="text/javascript">
    $(function(){
      $("#theForm").formwizard({
        //form wizard settings
        historyEnabled : true,
        formPluginEnabled: true,
        validationEnabled : true},
       {
         //validation settings
       },
       {
         // form plugin settings
       }
      );
    });
  </script>

Associé avec le plugin jQuery Validation et jQuery Form il permet de valider les champs de saisies et apporté un plus à l’utilisateur lors de sa saisie.

Fonctionne avec la plupart des navigateurs web.
Site Web : http://thecodemine.org/

SlickBoard développé par l’équipe de XML/SWF Charts, pour créer :

- diaporamas avec animation
- graphiques de tout types
- éléments d’interface: boutons, menus etc…
- tableaux de bords
- panneaux pubs animés
- présentations animés
- pages web dynamiques
- voir plus

Cela fonctionne avec juste un fichier XML décrivant les options de l’animation.
Les possibilités sont quasi illimités (rotation, déplacement, glissement, menu, form, etc…)

Nécessite : Flash Player 9+
Site Web : http://www.maani.us/slickboard/
Démo : http://www.maani.us/slickboard/index.php?menu=Gallery
Téléchargement : http://www.maani.us/slickboard/index.php?menu=Download

Ce plugin bxGallery ultra-léger permet de créer des diaporamas d’images avec miniatures.
Une installation ultra-simple car il suffit d’utiliser une liste non-ordonnée (ul li) d’images et le plugin se charge du reste.

Exemple:

<ul id= »example1″>
<li><img src= »images/image1.jpg » alt= »" /></li>
<li><img src= »images/image2.jpg » alt= »" /></li>
<li><img src= »images/image3.jpg » alt= »" /></li>
<li><img src= »images/image4.jpg » alt= »" /></li>
</ul>

et le code jQuery:

$(document).ready(function(){

	$('#example1').bxGallery({
		maxwidth: 500,
		thumbwidth: 100,
		thumbcrop: true
	});

});

Les nombreuses sont nombreuses et bien documentées:

* max largeur/hauteur d’images (redimensionnera les images en respectant le ratio)
* largeur des miniatures et découpe pour créer des carrés
* opacité des miniatures
* chargement textes et images

Le positionnement des miniatures et au choix grâce à une option ce qui est plutôt intéressant. Vous pouvez donc les mettre où vous voulez (top-bottom-right-left).

A découvrir donc car simple léger et facile à utiliser.

Site Web avec explications  : http://bxgalleryplugin.com/
Les démos : http://bxgalleryplugin.com/demos.php

Télécharger bxGallery : http://bxgalleryplugin.com/js/jquery.bxGallery.min.js.zip

Au programme quelques nouveautés et optimisations tels que pour les fonctions Ajax et les données manipulées (sérialisation, parsing, json), de nouvelles méthodes pour le parcours des éléments (first, last, eq…)
, une création rapide d’éléments avec la fonction jQuery,  des fonctions .css(), .attr() et équivalentes sont plus évoluées,  des fonctions d’accélération  par propriété CSS dans les animations, callbacks possibles sur les fonctions DOM, etc…

La librairie est légèrement plus lourde (154 Ko pour la version normale).
Google Closure Compiler est utilisé pour produire la version light.

Les performances sont améliorées dans un bon nombre de fonctions :

Téléchargement:

• jQuery Minified (23ko Gzipped)
• jQuery Regular (154ko)

Pour aller plus loin voici quelques ressources:

• The 14 Days of jQuery avec les premiers articles présentant les améliorations jQuery 1.4
• jQuery 1.4 API docs
• Vidéo: John Resig — Testing, Performance et jQuery 1.4
• jQuery 1.4 hébergé chez Google
• The 15 New Features you Must Know article de James Padolsey pour Nettuts
• jQuery 1.4 API Cheatsheet – dispo en html, pdf et png
• jQuery Selectors par Cody Lindley
• jQuery 1.4 performance article sur les performance de jQuery 1.4