Après quelques mois d’absence, je vous présente une galerie d’images faite sous jQuery.

Avec des transitions à faire rougir les flasheurs, elle s’intégrera très facilement dans votre site Web.

Testé sur Android et iPhone, je suis resté impressionné par le rendu.

Pour les téléchargements, ça se passe sur :

Site de l’auteur

Dans le même genre, il existe :

• Coin Slider
• Nivo Slider
• Galleria
• Horinaja

J’aime de plus en plus utiliser la librairie jQuery, c’est pourquoi je vous présente aujourd’hui un plugin : « Feature List ».

Démonstration

Pour vous aider à voir le résultat, voici un aperçu :

Et une démo

Pour l’intégration, c’est très simple :

• Ajoutez les librairies javascript :

 <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.featureList-1.0.0.js"></script>

• les feuilles de style :

 <link
      rel="stylesheet" type="text/css"
      href="http://fonts.googleapis.com/css?family=Reenie+Beanie">

• Affichez votre page HTML :

<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="services.png" />
						<h3>Services</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="programming.png" />
						<h3>Programming</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="applications.png" />
						<h3>Applications</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="sample1.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample2.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample3.jpg" />
					<a href="#">See project details</a>
				</li>
			</ul> 

		</div>

• Lancez le code javascript :

// On attend le chargement de la page
$(document).ready(function() {

	// On crée la "feature list"
	$.featureList(
		$("#tabs li a"),
		$("#output li"), {
			start_item : 1
		}
	);
});

Télécharger un exemple
Accéder au site du créateur

LazyLoad est une librairie jQuery qui permet d’éviter la surcharge du serveur en ne téléchargeant pas les images inutiles.

Elle permet donc de ne pas télécharger les images qui ne sont pas visible dans la fenêtre de l’internaute (les images en bas de page, non visible au chargement).
Ces images ne vont être chargée que lorsque l’utilisateur fait défiler la page et arrive à l’image pas encore chargée).

Pour mieux la découvrir je vous invite à vous rendre sur http://www.appelsiini.net/projects/lazyload.

Demo

Cette solution se contente de créer le visuel du calendrier et va charger avec des requêtes Ajax les évènements à afficher.

Tout est visuellement paramétrable. Vous avez aussi la possibilité de gérer des actions suite au clic ou drag and drop des évènements du calendrier.

Ce plugin ne permet donc pas la modification des évènement ou même de leur titre. Mais vous pourrez associer le flux calendrier de vos Google Calendar pour les afficher directement sur vos applications web !

Démonstration

Se rendre sur le site de fullcalendar

Vous avez déjà remarqué les Sliders que l’on peux retrouver sur l’iPhone pour le déverrouiller ?
Découvrez comment remplacer les cases à cocher de votre site web par ceci :

La mise en place est très simple :
On réalise toutes les importations :

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="iphone-style-checkboxes.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

On crée un événement pour mettre en place les sliders à la fin du chargement :

 // Avec jQuery :
$(document).ready(function() {
     $(".checkbox").iphoneStyle();
});

// Avec prototypeJS :
document.observe("dom:loaded", function() {
     new iPhoneStyle('[type=checkbox]');
});

Comme nous pouvons le voir, cette librairie fournie GitHug est très simple à mettre en place.
On notera aussi que cette librairie:

• supporte le glissement à la souris
• s’ajuste automatique en fonction du contenu
• fonctionne avec les navigateurs ne prenant pas en compte le javascript
• est compatible avec l’iPhone