{"id":31855,"date":"2014-08-04T13:13:16","date_gmt":"2014-08-04T18:13:16","guid":{"rendered":"http:\/\/webirix.com\/?p=31855"},"modified":"2014-08-04T13:13:16","modified_gmt":"2014-08-04T18:13:16","slug":"color-de-fondo-automatico-adaptative-backgrounds","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/color-de-fondo-automatico-adaptative-backgrounds\/","title":{"rendered":"Automatic Background Color Adaptive Backgrounds"},"content":{"rendered":"<p style=\"color: #555555;\"><a href=\"http:\/\/webirix.com\/wp-content\/uploads\/2014\/08\/back.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-31856 aligncenter\" src=\"http:\/\/webirix.com\/wp-content\/uploads\/2014\/08\/back.jpg\" alt=\"back\" width=\"650\" height=\"377\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2014\/08\/back.jpg 650w, https:\/\/webirix.com\/wp-content\/uploads\/2014\/08\/back-300x174.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p style=\"color: #555555;\">A veces escoger los colores correctos que queremos usar en nuestra web puede ser algo bastante dif\u00edcil de conseguir. Cuando tengas uno de esos d\u00edas en que tu parte creativa se ha esfumado, jQuery estar\u00e1 ah\u00ed para ayudarte.<\/p>\n<p style=\"color: #555555;\">\n<p style=\"color: #555555;\">Este plugin jQuery obtiene el color predominante de una imagen y lo aplica como color de fondo del elemento superior.<\/p>\n<h2 style=\"color: #444444;\">Qu\u00e9 necesitamos<\/h2>\n<ul style=\"color: #555555;\" data-style=\"style4\">\n<li>Biblioteca jQuery<\/li>\n<li>Fichero JavaScript\u00a0<strong>jquery.adaptive-backgrounds.js<\/strong><\/li>\n<\/ul>\n<p style=\"color: #555555;\">Descargar ficheros del\u00a0<a style=\"color: #5990de;\" title=\"clic y empieza la descarga\" href=\"https:\/\/github.com\/briangonzalez\/jquery.adaptive-backgrounds.js\/archive\/master.zip\">plugin Adaptative Backgrounds<\/a><\/p>\n<h2 style=\"color: #444444;\">Preparando el terreno<\/h2>\n<p style=\"color: #555555;\">Deberemos hacer la llamada a la biblioteca jQuery, adem\u00e1s de colocar en nuestra carpeta de scripts el fichero .js que viene con el plugin. Tambi\u00e9n deberemos hacer la llamada a nuestro fichero de funciones JavaScript, en nuestro caso functions.js. El c\u00f3digo quedar\u00eda m\u00e1s o menos as\u00ed:<\/p>\n<pre class=\"gk-code\" style=\"color: #666666;\" data-style=\"style2\"><code>&lt;!\u2014Adaptative Backgrounds, functions y jQuery --&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/jquery.adaptive-backgrounds.js \"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/functions.js \"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h2 style=\"color: #444444;\">El HTML de Adaptative Backgrounds<\/h2>\n<p style=\"color: #555555;\">En todas las im\u00e1genes en que queramos aplicar el efecto de este plugin, deberemos ponerle el atributo\u00a0<em>data-adaptive-background=\u20191\u2032<\/em>. Por ejemplo:<\/p>\n<pre class=\"gk-code\" style=\"color: #666666;\" data-style=\"style2\"><code>&lt;img alt=\"Texto alternativo\" src=\"img\/imagen.jpg\" data-adaptive-background=\"1\"&gt;<\/code><\/pre>\n<h2 style=\"color: #444444;\">Empieza la acci\u00f3n<\/h2>\n<p style=\"color: #555555;\">Finalmente, en nuestro fichero de funciones JavaScript haremos la llamada al plugin para que aplique el efecto a todas las im\u00e1genes que corresponda. Es aconsejable hacer la llamada una vez cargue todo el contenido de la p\u00e1gina:<\/p>\n<pre class=\"gk-code\" style=\"color: #666666;\" data-style=\"style2\"><code>jQuery(document).ready(function(){\r\njQuery.adaptiveBackground.run()\r\n});<\/code><\/pre>\n<h2 style=\"color: #444444;\">Configuraci\u00f3n personalizada del plugin<\/h2>\n<ul style=\"color: #555555;\" data-style=\"style4\">\n<li>selector: string que denota el selector CSS que debe tener en cuenta el plugin para aplicar el efecto en las im\u00e1genes. Por defecto es\u00a0<em>img[data-adaptive-background=&#8221;1&#8243;]<\/em><\/li>\n<li>parent: string para indicar el selector CSS de los elentos superiores que el plugin ha de tener en cuenta. Por defecto, el valor es\u00a0<em>null<\/em>\u00a0y el color de fondo se aplica al elemento inmediatamente superior en el \u00e1rbol DOM<\/li>\n<li>normalizeTextColor: booleano que en caso de valer\u00a0<em>true<\/em>, normalizar\u00e1 el color del texto del elemento padre si el color de fondo es demasiado oscuro o demasiado claro. Por defecto es\u00a0<em>false<\/em><\/li>\n<li>normalizedTextColors: objeto literal con el que podemos indicar el color de los textos usado cuando el color de fondo es demasiado oscturo o claro, por ejemplo\u00a0<em>{dark: \u201c#000\u2033, light: \u201c#fff\u201d}<\/em><\/li>\n<\/ul>\n<p style=\"color: #555555;\">Ejemplo uso:<\/p>\n<pre class=\"gk-code\" style=\"color: #666666;\" data-style=\"style2\"><code>jQuery.adaptiveBackground.run({\r\nselector: '[data-adaptive-background=\"1\"]',\r\nparent: null,\r\nnormalizeTextColor:\u00a0\u00a0 true,\r\nnormalizedTextColors:\u00a0 {\r\nlight: \u00a0 \u00a0 \u00a0\"#fff\",\r\ndark: \u00a0 \u00a0 \u00a0 \"#000\"\r\n}\r\n})\r\n<\/code><\/pre>\n<p style=\"color: #555555;\">En la demo podr\u00e1s ver c\u00f3mo el plugin establece colores de fondo por defecto seg\u00fan las im\u00e1genes que le digamos. Tambi\u00e9n puedes mirar la documentaci\u00f3n oficial en la\u00a0<a style=\"color: #5990de;\" title=\"P\u00e1gina GitHub del plugin\" href=\"https:\/\/github.com\/briangonzalez\/jquery.adaptive-backgrounds.js\" target=\"_blank\">p\u00e1gina de GitHub de su autor<\/a>.<\/p>\n<p style=\"color: #555555;\">Fuente:<\/p>\n<p style=\"color: #555555;\">http:\/\/blog.endeos.com\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes choosing the correct colors that we want to use on our website can be quite difficult to achieve. When you have one of those days when your creative side is gone, jQuery will be there to help you. This jQuery plugin takes the predominant color of an image and applies it as a background color ...<\/p>","protected":false},"author":20,"featured_media":31857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1947],"tags":[],"class_list":["post-31855","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-preguntas-frecuentes-categoria"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2014\/08\/la.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/31855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=31855"}],"version-history":[{"count":1,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/31855\/revisions"}],"predecessor-version":[{"id":31858,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/31855\/revisions\/31858"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/31857"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=31855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=31855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=31855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}