{"id":707,"date":"2013-08-16T15:30:43","date_gmt":"2013-08-16T15:30:43","guid":{"rendered":"http:\/\/maquetando.com\/?p=707"},"modified":"2013-08-16T16:01:15","modified_gmt":"2013-08-16T16:01:15","slug":"jquery-picture-un-plugin-de-jquery-para-implementar-imagenes-y","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/jquery-picture-un-plugin-de-jquery-para-implementar-imagenes-y\/","title":{"rendered":"jQuery Picture : Un plugin para implementar im\u00e1genes de diferentes tama\u00f1os"},"content":{"rendered":"

\"picture\"<\/a><\/p>\n

jQuery Picture<\/strong>\u00a0\u00a0es un peque\u00f1o plug-in (2kb) para \u00a0usar imagenes de diferente tama\u00f1o en \u00a0nuestro sitio web \u00a0dependiendo del tama\u00f1o del navegador.<\/p>\n

B\u00e1sicamente Jquery Picture redimensiona \u00a0una imagen \u00a0hasta llegar a un punto \u00a0limite donde manda \u00a0llamar a otra \u00a0 y reemplaza \u00a0la existente \u00a0evitando as\u00ed que la imagen original se distorsione, esto es muy \u00fatil para implementar en sitios web responsivos\u00a0.<\/p>\n

Tienes dos \u00a0maneras de utilizar el plugin, con la etiqueta <figure> o con \u00a0las etiquetas \u00a0<picture> y \u00a0 <source> , aunque estas ultimas no son etiquetas validas para algunos navegadores .<\/p>\n

Para usar el plugin :<\/p>\n

$(function(){\r\n    $('figure.responsive').picture();\r\n});<\/pre>\n
Para utilizar la etiqueta <figure> es necesario \u00a0agregar la url de las im\u00e1genes que vamos a cargar mediante \u00a0 atributos y agregamos el tama\u00f1o con el que se condicionara la carga de la imagen quedando de esta forma \u00abdata-media440\u00bb de esta forma le indicamos \u00a0al plugin \u00a0que \u00a0cuando la ventana del navegador llegue a 400px \u00a0o menos \u00a0 cargue \u00a0la imagen correspondiente \u00a0:<\/p>\n
<figure class=\"responsive\" data-media=\"assets\/images\/small.png\" data-media440=\"assets\/images\/medium.png\" data-media600=\"assets\/images\/large.png\" title=\"A Half Brained Idea\">\r\n    <noscript>\r\n        <img src=\"assets\/images\/large.png\" alt=\"A Half Brained Idea\">\r\n    <\/noscript>\r\n<\/figure><\/pre>\n
Con <picture> en lugar de declarar las im\u00e1genes en los atributos \u00a0data, vamos a usar la etiqueta <source> para incluir cada una de ellas \u00a0 especificando con \u00a0‘ media=\u00bb(min-width:440px)\u00bb‘ \u00a0los puntos donde se llamara a la imagen \u00a0:<\/p>\n
$(function(){\r\n    $('picture').picture();\r\n});<\/pre>\n
Este seria el c\u00f3digo usando <picture> :<\/p>\n
<picture alt=\"A Half Brained Idea\">\r\n    <source src=\"assets\/images\/small.png\">\r\n    <source src=\"assets\/images\/medium.png\" media=\"(min-width:440px)\">\r\n    <source src=\"assets\/images\/large.png\" media=\"(min-width:600px)\">\r\n    <noscript>\r\n        <img src=\"assets\/images\/large.png\" alt=\"A Half Brained Idea\">\r\n    <\/noscript>\r\n<\/picture><\/pre>\n
 <\/p>\n
[ Enlace : jQuery Picture<\/a> ]<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery Picture\u00a0\u00a0es un peque\u00f1o plug-in (2kb) para \u00a0usar imagenes de diferente tama\u00f1o en \u00a0nuestro sitio…<\/p>\n","protected":false},"author":1,"featured_media":708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,99],"tags":[61,17],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/707"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":15,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":723,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/707\/revisions\/723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/708"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}