Derniers articles

Par absurdsystem le 29 janvier 2014

Faut que ça bouge

Bon apr?s 3 ans sans rien publier je pense qu’il est temps que cela change. Je vais continuer ? publier des astuces, que ce soit en php, css ou html. Je vais aussi raconter mes gal?res rencontr?es au boulot, ainsi que les solutions prises. C’est toujours int?ressant de voir la mani?re dont on corrige les bugs, les contournements que l’on peut faire, parfois par manque de connaissances sur des fonctionnalit?s d?j? existantes. Le chemin pour aller d’un point A ? un point B n’est pas toujours une ligne droite. Il est souvent sem? d’emb?ches, avec parfois l’obligation de faire demi-tour. Mais la satisfaction est ? l’arriv?e. Je visite beaucoup de sites et j’adore ceux qui partage leur petit bout de code. Le code que tu cherche depuis des mois ? faire, ou qui fait d?j? 100 lignes. Et lorsque tu tombe sur un site trouv? de fil en aiguille via Google, Stackoverflow ou d’autres, le sien en fait ? peine 20. Et c’est toujours ? ce moment que tu d?couvres que la roue existe d?j?. Bref tout ?a pour dire que le partage c’est important, c’est ce qui nous permet d’avancer, de s’am?liorer. Alors faites de m?me ! (et quand j’aurais le temps je ferais un vrai design de site parce que l?…)

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