blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Articles tagués ‘html’

S Gallery: une galerie d’images en jquery et css3 , responsive, qui plus est

décidément, en ce moment je ne poste que des plug-in d’effet et de galerie… en voici encore un en css3 jquery et html5. sobre et sympathique. facile à mettre en place. Il affiche les images en mosaïque et lorsque l’on clique sur l’une d’elle elle apparait en gros plan à l’écran. Rien d’extraordinaire. mais c’est léger et efficace. idéal pour un portfolio je pense.

 

voici le lien vers le site du développeur S Gallery

 

voici un lien vers la démo de S Gallery

 

enfin je vous conseil de voir tout ce que fait sara soueidan sur cette page, il y a plein de chose sympathiques

 

 

Publicités

TinEye Labs: trouver des photos correspondant à votre schema de couleur et vice versa

Voici un service en ligne assez sympa, qui permet de trouver soit un stock de photo correspondant à une palette de couleur html que vous aurez définis, ou bien d’uploader une image qui va générer une palette de couleur à partir de laquelle vous pourrez retrouver d’autres images correspondant aux même couleurs.

Pour ses stock d’images, le site se base sur Flickr.

http://labs.tineye.com/

prototype: enable ou disable un élément de formulaire html à l’aide de ce framework javascript

voici comment activer (enable) ou désactiver (disable) un élément (input) de formulaire html avec le framework javascript prototype.

$('idDeMonElement').enable();
// or
$('idDeMonElement').disable();

ceci va griser ou non l’élément ciblé et le rendre inutilisable mais il sera toujours affiché.

texte défilant avec jquery

Voici comment créer un texte défilant avec jquery.

tout d’abord télécharger le fichier javascript suivant jquery.li-scroller.1.0.js

téléchargez ensuite le fichier css suivant li-scroller.css

1 – inclure ces deux fichiers dans votre page.

2 – copié le code html suivant dans votre <body></body>

<ul id="ticker01">

<li><span>10/10/2007</span><a href="#">The first thing ...</a></li>

<li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>

<li><span>10/10/2007</span><a href="#">The code that you ...</a></li>

<!-- eccetera -->

</ul>

3 – copiez le code javascript suivant dans une balise script javascript

$(function(){ $("ul#ticker01").liScroll({travelocity: 0.15}); });

le tour est joué, modifié le style css au besoins et ajustez la vitesse de défilement