{"id":1595,"date":"2012-02-09T13:24:50","date_gmt":"2012-02-09T13:24:50","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1595"},"modified":"2012-11-05T14:46:15","modified_gmt":"2012-11-05T14:46:15","slug":"rlightbox","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/","title":{"rendered":"Rlightbox"},"content":{"rendered":"<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-4306\" title=\"jquery\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2-150x150.png 150w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2-80x80.png 80w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2-180x180.png 180w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png 256w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>rlightbox es una interfaz de usuario jQuery mediabox que puede mostrar muchos tipos de contenidos tales como im\u00e1genes, v\u00eddeos de YouTube y Vimeo. Tiene muchas caracter\u00edsticas \u00fanicas, como la vista en panorama y la redimensi\u00f3n en vivo.<\/p>\n<p>Tiene una gran similitud al script Lightbox para ampliar im\u00e1genes pero adem\u00e1s permite por ejemplo ampliar una imagen con gran calidad, abrir una galer\u00eda de im\u00e1genes donde cada foto puede tener su descripci\u00f3n podiendo pasar de foto a foto dentro de la vista en panorama. Tambi\u00e9n permite visionar videos de YouTube o Vimeo con un aspecto muy agradable.<\/p>\n<p>La visi\u00f3n en panorama es una forma de mostrar parte de una imagen de tama\u00f1o completo en la pantalla. Puesto que a menudo una imagen es m\u00e1s grande que la pantalla, tiene que ser reducido. La vista en panorama le permite verlo en sus resoluciones nativas mediante los movimientos horizontales, es decir, arrastrar y soltar.<\/p>\n<p>El modo Panorama est\u00e1 disponible cuando el icono con cuatro flechas aparece en la esquina superior izquierda del widget. Para activarlo, puede hacer clic en el icono o el uso del teclado (tecla [Z] es la opci\u00f3n predeterminada).<\/p>\n<p>rlightbox ha sido probado en muchos navegadores. Algunos navegadores como Internet Explorer 6 son demasiado antiguos y no se apoya. Debido a alg\u00fan ciclo de liberaci\u00f3n como la de los navegadores Chrome y Firefox hasta hace poco, es muy dif\u00edcil hacer un seguimiento del comportamiento de rlightbox en estos navegadores. As\u00ed, el widget se puso a prueba s\u00f3lo en Chrome \/ Chromium y Firefox 4 y 5.<\/p>\n<p>rlightbox fue probado en los siguientes navegadores:<\/p>\n<ul id=\"browsers\">\n<li>Internet Explorer 7+<\/li>\n<li>Firefox 3.0.19+<\/li>\n<li>Chrome<\/li>\n<li>Opera 10.00+<\/li>\n<li>Safari 4.0.5+<\/li>\n<\/ul>\n<p>Para hacer funcionar este estupendo ampliador de im\u00e1genes y videos deberemos incluir en el &lt;head&gt; de nuestra p\u00e1gina Web lo estilos y scripts:<\/p>\n<pre>&lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/ui-lightness\/jquery-ui-1.8.16.custom.css\" \/&gt;\r\n&lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"css\/lightbox.min.css\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"lib\/jquery-1.6.4.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"lib\/jquery.ui.core.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"lib\/jquery.ui.widget.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"lib\/jquery.ui.rlightbox.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0 jQuery(function($) {\r\n\u00a0\u00a0 \u00a0    $( \".lb_galery\" ).rlightbox({counterDelimiter: \" de \"});\r\n\u00a0\u00a0\u00a0 });\r\n&lt;\/script&gt;<\/pre>\n<p>Despu\u00e9s en el &lt;body&gt;, por ejemplo para obtener una estupenda galer\u00eda de im\u00e1genes podemos hacer lo siguiente:<\/p>\n<pre>&lt;a class=\"lb_galery\" title=\"Warsaw, April 10, 2011: \u2018combat lie with the truth\u2019\" href=\"images\/01.jpg\"&gt;\r\n   &lt;img alt=\"Warsaw, April 10, 2011: \u2018combat lie with the truth\u2019\" src=\"images\/01.jpg\" width=\"160\" height=\"120\"\/&gt;\r\n&lt;\/a&gt;\r\n&lt;a class=\"lb_galery\" title=\"authority vs. the people\" href=\"images\/03.jpg\"&gt;\r\n   &lt;img alt=\"Warsaw, April 10, 2011: \u2018combat lie with the truth\u2019\" src=\"images\/03.jpg\" width=\"160\" height=\"120\"\/&gt;\r\n&lt;\/a&gt;\r\n&lt;a class=\"lb_galery\" title=\"\u2018Katy\u0144: I remember\u2019\" href=\"images\/05.jpg\"&gt;\r\n   &lt;img alt=\"Warsaw, April 10, 2011: \u2018combat lie with the truth\u2019\" src=\"images\/05.jpg\" width=\"160\" height=\"120\"\/&gt;\r\n&lt;\/a&gt;\r\n&lt;a class=\"lb_galery\" title=\"take Tusk to court\" href=\"images\/06.jpg\"&gt;\r\n   &lt;img alt=\"Warsaw, April 10, 2011: \u2018combat lie with the truth\u2019\" src=\"images\/06.jpg\" width=\"160\" height=\"120\"\/&gt;\r\n&lt;\/a&gt;\r\n&lt;a class=\"lb_galery\" title=\"thousands of lights\" href=\"images\/07.jpg\"&gt;\r\n   &lt;img alt=\"Warsaw, April 10, 2011: \u2018combat lie with the truth\u2019\" src=\"images\/07.jpg\" width=\"160\" height=\"120\"\/&gt;\r\n&lt;\/a&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/rlightbox\/\">Ver ejemplos en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>rlightbox es una interfaz de usuario jQuery mediabox que puede mostrar muchos tipos de contenidos tales como im\u00e1genes, v\u00eddeos de YouTube y Vimeo. Tiene muchas caracter\u00edsticas \u00fanicas, como la vista en panorama y la redimensi\u00f3n en vivo. Tiene una gran similitud al script Lightbox para ampliar im\u00e1genes pero adem\u00e1s permite por ejemplo ampliar una imagen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4306,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[56,55,54],"class_list":["post-1595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-galerias","tag-lightbox","tag-zoom"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Rlightbox - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rlightbox - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"rlightbox es una interfaz de usuario jQuery mediabox que puede mostrar muchos tipos de contenidos tales como im\u00e1genes, v\u00eddeos de YouTube y Vimeo. Tiene muchas caracter\u00edsticas \u00fanicas, como la vista en panorama y la redimensi\u00f3n en vivo. Tiene una gran similitud al script Lightbox para ampliar im\u00e1genes pero adem\u00e1s permite por ejemplo ampliar una imagen [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-02-09T13:24:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-11-05T14:46:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/\",\"name\":\"Rlightbox - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png\",\"datePublished\":\"2012-02-09T13:24:50+00:00\",\"dateModified\":\"2012-11-05T14:46:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rlightbox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rlightbox - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Rlightbox - Jose Aguilar Blog","og_description":"rlightbox es una interfaz de usuario jQuery mediabox que puede mostrar muchos tipos de contenidos tales como im\u00e1genes, v\u00eddeos de YouTube y Vimeo. Tiene muchas caracter\u00edsticas \u00fanicas, como la vista en panorama y la redimensi\u00f3n en vivo. Tiene una gran similitud al script Lightbox para ampliar im\u00e1genes pero adem\u00e1s permite por ejemplo ampliar una imagen [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-02-09T13:24:50+00:00","article_modified_time":"2012-11-05T14:46:15+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/","url":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/","name":"Rlightbox - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png","datePublished":"2012-02-09T13:24:50+00:00","dateModified":"2012-11-05T14:46:15+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery2.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/rlightbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Rlightbox"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1595"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1595\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4306"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}