Archives pour "Ressources"

Par absurdsystem le 25 janvier 2011
n/a

Before and After Photo Effect avec jQuery

beforeafter

Voici deux plugins Jquery qui permettent de superposer deux images afin de les comparer.
Une barre verticale vient par dessus les images et il suffit de la translater à gauche ou droite pour afficher les images à comparer.

Pas de grande différence entre les deux. Le premier nécessite un clic sur la barre verticale afin de la bouger alors que le second utilise simplement le mouvement de la souris et permet d'avoir une légende sur la photo.

Autre point non négligeable, la taille des fichiers javascript.
7Ko pour le premier en version normale et 4Ko pour la version « minified ». Et seulement 2Ko pour le second.

Site : http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
Download: http://www.catchmyfame.com/jquery/jquery.beforeafter.zip

Site : http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery
Download: http://www.queness.com/resources/archives/jquery-qbeforeafter.zip

zp8497586rq
zp8497586rq
Par absurdsystem le 24 janvier 2011
n/a

Zoomy

zoomy

zoomy_demo

Zoomy est un plugin Jquery qui permet de créer un zoomer sur une image facilement.
Pour fonctionner, il nécessite une miniature de votre image ainsi qu'une version de plus grande résolution pour afficher la partie zoomée.

Il existe quelques options, comme la forme du zoom (round), la taille etc.

Site : http://redeyeoperations.com/plugins/zoomy/

zp8497586rq
zp8497586rq
Par absurdsystem le 16 novembre 2010

Mise en cache css et javascript

Par défaut, le navigateur met en cache les fichiers css et javascript afin de réduire le temps de chargement de la page par exemple.

Mais cela peut parfois poser problème si vous avez récemment modifier le fichier. Ce qui se trouve en cache ne correspond plus au véritable contenu actuel. Et il suffit d’avoir modifier la structure HTML de la page pour rendre le site illisible.

La solution ? Ajouter un peu de php.

Exemple :

<link href="css/style.css?&lt;?php echo time(); ?&gt;" rel="stylesheet" type="text/css" />

time() est une fonction qui permet de retourner l’heure courante (plus d’infos ici). Si on affiche la source de la page on obtient ceci :

<link href="css/style.css?1289905403" rel="stylesheet" type="text/css" />

Même chose pour le javascript.

De cette façon, les navigateurs ne mettront plus le fichier style.css en cache car le nom de fichier aura changer par rapport au fichier en cache.

zp8497586rq
Par absurdsystem le 16 novembre 2010
n/a

Jquery Hash-slider

hashslider

Voici un slider qui propose une fonctionnalité assez pratique. Vous pouvez faire un lien directement sur une image contenue dans le slider en utilisant un hashtag dans l'url (voir démo).

Site : http://mgoys.com/lab/hashslider/

Démo : http://mgoys.com/lab/hashslider/#4

zp8497586rq
zp8497586rq
Par absurdsystem le 5 novembre 2010

Open With, un add-on pratique

openwith180

Voici un add-on pour firefox extrêmement pratique. Il permet d'ouvrir d'un simple clic la page en cours dans le navigateur de votre choix.
Vous pouvez l'afficher dans la barre des onglets ou d'un simple clic droit, c'est à votre convenance.

Site : http://www.darktrojan.net/software/addons/openwith/

zp8497586rq