Adaptive backgrounds, un plugin jQuery

Je vous propose de découvrir aujourd’hui Adaptive Backgrounds, un plugin jQuery gratuit qui vous permet d’extraire les couleurs dominantes d’une image pour les appliquer à des éléments de votre page.

Adaptive Backgrounds utilise la balise <canvas> et l’objet ImageData. L’image doit être hébergée sur le même domaine que le script pour des raisons de sécurité (limitations de sécurité cross-site), à moins que l’image autorise le « Cross Origin Resource Sharing ».

adaptive background exemple jquery plugin

Pour l’utiliser, rien de plus simple. Ajoutez, si ce n’est pas déjà fait, jQuery et le plugin dans votre page, et utilisez le script de cette manière :

$(document).ready(function(){

  $.adaptiveBackground.run()

});

Le script cherchera les images qui possèdent l’attribut data-adaptive-background :

<img src="/image.jpg" data-adaptive-background='1'>

Pour spécifier quelle image utiliser sur quel parent, vous pouvez également utiliser le code suivant :

var opts = {

  selector: '.some-selector',

  parent:   '.some-parent-of-some-selector'

}

$.adaptiveBackground.run(opts)

Quelques liens utiles :

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business. En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

2 réponses

  1. 14 janvier 2014

    […] Adaptive Backgrounds, un plugin jQuery gratuit vous permettant d'extraire les couleurs d'une image pour les appliquer à des éléments de votre page.  […]

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :