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

J’ai été assez surpris par cette librairie javascript qui permet de faire de la 3D.

Le rendu est très fluide, il y a même un compteur de FPS (frame per seconds).

Voici quelques exemples :

A quand les jeux vidéos en javascript  ?
Se rendre sur le site de l’auteur.

Exemple de code :
(Lire la suite…)

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

Pour l’avoir déjà cité une fois dans mon article « Â Inclure un fichier javascript à la volée !  » , je vous présente le site php.js.

Vous êtes habitué à utiliser des fonctions comme strip_tags, json_encode ou bien is_int en PHP et vous aimeriez pouvoir les retrouver en Javascript ?

C’est ce que propose le site php.js en regroupant plus d’une centaine de fonctions PHP adaptée au langage javascript.

Très pratique quand ne veux pas passer 1h à faire ses propres fonctions