{"id":900,"date":"2014-04-13T12:23:06","date_gmt":"2014-04-13T17:23:06","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=900"},"modified":"2024-11-01T11:50:09","modified_gmt":"2024-11-01T16:50:09","slug":"una-receta-para-crear-cajas-de-luz-lightbox","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/","title":{"rendered":"Una receta para crear cajas de luz (LightBox)"},"content":{"rendered":"<p>Dise\u00f1ar un producto web no es una tarea sencilla. La cantidad de variables que se deben tener presentes exige al equipo de trabajo conocer y dominar diferentes disciplinas: dise\u00f1o gr\u00e1fico y sem\u00e1ntico; creaci\u00f3n de contenidos, psicolog\u00eda y psicopedagog\u00eda; dise\u00f1o y administraci\u00f3n de entornos virtuales; entre otros temas.<\/p>\n<p>De ah\u00ed lo importante de crear grupos de trabajo interdisciplinarios, donde ingenieros, comunicadores, bibliotec\u00f3logos, pedagogos (s\u00ed, pues considero profundamente que los medios de comunicaci\u00f3n -independiente de su objetivo- tienen una funci\u00f3n pedag\u00f3gico\u2013did\u00e1ctica) y creativos operan bajo una meta com\u00fan.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Entrando en materia<\/h2>\n<p>Esta entrada pretende dar una peque\u00f1a soluci\u00f3n (muy peque\u00f1a) a una pregunta que puede surgir en el equipo de producci\u00f3n: \u00bfC\u00f3mo crear una caja de luz en mi sitio Web?<\/p>\n<p>Pero, antes de abordar la soluci\u00f3n, es importante tener presente los siguientes conceptos, as\u00ed no seamos ingenieros desarrolladores web.<\/p>\n<blockquote>\n<p><strong>Lightbox:<\/strong> Es un script que presenta contenidos multimedia sobre una p\u00e1gina web (superposici\u00f3n). Es decir, sin abandonar el documento, el usuario puede acceder a un nuevo recurso, gracias a una \u201ccaja\u201d que aparece encima del contenido de la p\u00e1gina. Por decirlo en otras palabras (sin que ello sea lo mismo) un <em>pop-up<\/em> o ventana emergente sobre la misma p\u00e1gina.<\/p>\n<p><strong>JavaScript:<\/strong> Brevemente, es un lenguaje de programaci\u00f3n orientado a objetos que se ejecuta en el cliente (<a href=\"https:\/\/e-lexia.com\/diccionario-tic\/navegador-web\/\" rel=\"noopener\" target=\"_blank\">navegador web<\/a>). Este permite agregar experiencias interactivas a una p\u00e1gina web. El <em>lightbox<\/em> se soporta en este lenguaje. La extensi\u00f3n de los archivos es \u201cJS\u201d.<\/p>\n<p><strong>jQuery:<\/strong> Es un librer\u00eda <em>JavaScript<\/em> que facilita la integraci\u00f3n de soluciones y experiencias interactivas en un documento web. jQuery puede definirse como un <em>framework JS<\/em>, donde existen soluciones desarrolladas y sirve como base para crear nuevas.<\/p>\n<p><strong>CSS:<\/strong> Es un lenguaje de estilos que permite definir la apariencia de documentos web. Para este ejercicio, el <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a> nos permitir\u00e1 \u2013adem\u00e1s- relacionar el JS con los elementos HTML.<\/p>\n<\/blockquote>\n<h2>Ingredientes<\/h2>\n<p>Como si se tratase de una receta, a continuaci\u00f3n presento los ingredientes para la integraci\u00f3n de una caja de luz en una p\u00e1gina web. Toma atenta nota:<\/p>\n<ul>\n<li>Un documento HTML. Este puede ser un documento local (en tu computador), un art\u00edculo de contenido de un <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/cms\/\" rel=\"noopener\" target=\"_blank\">CMS<\/a> o una p\u00e1gina de aterrizaje de un servicio en l\u00ednea<\/li>\n<li>Conexi\u00f3n a una librer\u00eda jQuery. Esta puede estar en un servidor propio (obtenida desde un <em>framework<\/em> como <a href=\"http:\/\/html5boilerplate.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Boilerplate<\/a>, p.e.) u obtenerse desde un repositorio en l\u00ednea, como <a href=\"https:\/\/developers.google.com\/speed\/libraries\">Google Hosted Libraries<\/a>.<\/li>\n<li>Conexi\u00f3n al script HTML5LightBox, disponible en <a href=\"http:\/\/html5box.com\/html5lightbox\/\" target=\"_blank\" rel=\"noopener noreferrer\">Html5box.com<\/a>. Nota: Este archivo es libre y puede almacenarse en un servidor web sin ning\u00fan inconveniente.<\/li>\n<\/ul>\n<h2>Preparaci\u00f3n:<\/h2>\n<p>Continuando con el s\u00edmil, para preparar la caja de luz se debes realizar los siguientes pasos:<\/p>\n<ol>\n<li>Crear el documento HTML, donde debe indicarse:\n<ul>\n<li>Llamado a la librer\u00eda jQuery, desde el <code>HEAD<\/code><\/li>\n<li>Llamado al script \u201chtml5lightbox.js\u201d, desde el <code>HEAD<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Elemento HTML (enlace) que activa la caja de luz, en el <code>BODY<\/code>\n<ul>\n<li>Llamado CSS, que vincula el html5lightbox con el enlace.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>El c\u00f3digo de una p\u00e1gina HTML ser\u00eda algo similar a:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2014\/screen01-lightbox.jpg\"><\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<p>La explicaci\u00f3n ser\u00eda:<\/p>\n<ul>\n<li>En la l\u00ednea 6 se hace el llamado a la librer\u00eda jQuery, donde obtenemos un conjunto de funciones ya desarrolladas que requiere el efecto LightBox.<\/li>\n<li>En la l\u00ednea 7 se realiza el llamado al script <code>html5lightbox.js<\/code>, que permite crear la caja de luz.<\/li>\n<li>En la l\u00ednea 10 se crea el enlace, que permite habilitar la caja de luz. Los par\u00e1metros del enlace indican:\n<ul>\n<li><code>class=\"html5lightbox\"<\/code>. Esto conecta el JS con el enlace;<\/li>\n<li><code>href=\"\/\/www.e-lexia.com<\/code>. Indica el recurso que va a cargarse en la caja de luz. Aqu\u00ed aparece el sitio de e-Lexia.com, mi proyecto empresarial. Solo debes cambiar este valor.<\/li>\n<li><code>data-width=\"780\"<\/code>. Especifica el ancho de la caja de luz. Para este caso, la caja de luz mide 780 p\u00edxeles. Puedes cambiar este valor.<\/li>\n<li><code>data-height=\"650\"<\/code>. Indica el alto de la caja de luz. Puedes modificar este valor.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Ahora miremos c\u00f3mo ser\u00eda la configuraci\u00f3n de la soluci\u00f3n en Unbounce.com<\/p>\n<ul>\n<li>Cargar los archivos JS (jQuery y html5lightbox) a un servidor web.<\/li>\n<li>Realizar el llamado de los archivos JS desde la opci\u00f3n \u201cJavascripts\u201d, ubicada en la barra inferior de la zona de trabajo de Unbounce.\n<ul>\n<li>Clic en \u00abJavascripts\u00bb<\/li>\n<li>Clic en \u00abAdd New Javascript\u00bb<\/li>\n<li>Asignar un nombre del script (el que quiera, no hay problema)<\/li>\n<li>Ubicar el script en el <code>HEAD<\/code>, a trav\u00e9s de la opci\u00f3n \u201cPlacement\u201d<\/li>\n<li>Anotar el llamado al script en la caja de texto. Si los JS estuvieran en el servidor e-Lexia.com, el llamado ser\u00eda as\u00ed: <code>&#60;script src=\"jquery.js\"&#62;&#60;\/script&#62;<\/code><\/li>\n<li>Repetir el llamado JS para cargar el archivo \u00abhtml5lightbox.js\u00bb. El script ser\u00eda as\u00ed: <code>&#60;script src=\"html5lightbox.js\"&#62;&#60;\/script&#62;<\/code><\/li>\n<li>Al final, la opci\u00f3n \u00abJavascripts\u00bb debe indicar dos archivos (aparece un c\u00edrculo verde con el n\u00famero 2)<\/li>\n<\/ul>\n<\/li>\n<li>Agregar un elemento \u00abCustom HTML\u00bb (buscar la opci\u00f3n en el panel de herramientas, ubicada en la barra izquierda)\n<ul>\n<li>Agregar la l\u00ednea del enlace, donde indique la ubicaci\u00f3n del recurso, la clase \u00abhtml5lightbox\u00bb y el ancho y alto de la caja. Por ejemplo: <code>&#60;a class=\"html5lightbox\" href=\"http:\/\/www.e-lexia.com\" data-width=\"780\" data-height=\"650\"&#62;Clic para ver la caja de luz&#60;\/a&#62;<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Y listo. Guardar y publicar.<\/li>\n<\/ul>\n<h2>El postre<\/h2>\n<p>Si deseas dar apariencia al enlace, utiliza una clase CSS para mejorar la apariencia del bot\u00f3n.<\/p>\n<p>Para el primer caso (el archivo HTML), anexa una hoja de estilos donde define los atributos para el enlace <code>a.html5lightbox<\/code>. Aqu\u00ed tienes una opci\u00f3n CSS que puedes modificar a tu gusto.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2014\/screen02-lightbox.jpg\"><\/p>\n<p>Para el caso de Unbouce.com, deber\u00e1s crear el estilo a nivel de c\u00f3digo. Es decir, su enlace deber\u00e1 quedar \u2013conservando los mismos estilos del ejemplo anterior- as\u00ed:<\/p>\n<p><code>&#60;a class=\"html5lightbox\" href=\"http:\/\/www.e-lexia.com\" data-width=\"780\" data-height=\"650\" style=\"background: rgb(229,160,75); border:1px solid #333; border-radius:0.3em; box-shadow:1px 1px 4px #CCC; color:#FFF; font-size:1.2em; font-weight:bold; margin:1em auto; padding:0.8em; text-align:center; width:200px;\"&#62;Clic para ver la caja de luz&#60;\/a&#62;<\/code><\/p>\n<h2>Bon App\u00e9tit<\/h2>\n<p>En caso que tengas dificultades, <a href=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2014\/html5lightbox\/\" target=\"_blank\" rel=\"noopener noreferrer\">ingresa al demo<\/a> y verifica el c\u00f3digo fuente para conocer m\u00e1s detalles. Espero que te sirva.<\/p>\n<p>Recuerda compartir esta entrada. Gracias por leerme y seguir mi blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1ar un producto web no es una tarea sencilla. La cantidad de variables que se deben tener presentes exige al equipo de trabajo conocer y dominar diferentes disciplinas: dise\u00f1o gr\u00e1fico y sem\u00e1ntico; creaci\u00f3n de contenidos, psicolog\u00eda y psicopedagog\u00eda; dise\u00f1o y administraci\u00f3n de entornos virtuales; entre otros temas. De ah\u00ed lo&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,66],"class_list":["post-900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"juancadotcom\"\/>\n\t<meta name=\"google-site-verification\" content=\"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Escuela Digital - Aprende con e-Lexia.com\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Crear cajas de luz (lightbox) - Escuela Digital\" \/>\n\t\t<meta property=\"og:description\" content=\"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/\" \/>\n\t\t<meta property=\"fb:admins\" content=\"42896562054\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"975\" \/>\n\t\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t\t<meta property=\"article:tag\" content=\"escuela de producci\u00f3n\" \/>\n\t\t<meta property=\"article:tag\" content=\"c\u00f3digo\" \/>\n\t\t<meta property=\"article:tag\" content=\"hipermedia\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2014-04-13T17:23:06+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-11-01T16:50:09+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Crear cajas de luz (lightbox) - Escuela Digital\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@juancadotcom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg\" \/>\n\t\t<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t\t<meta name=\"twitter:data1\" content=\"juancadotcom\" \/>\n\t\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura estimado\" \/>\n\t\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#blogposting\",\"name\":\"Crear cajas de luz (lightbox) - Escuela Digital\",\"headline\":\"Una receta para crear cajas de luz (LightBox)\",\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fondo-codigo.jpg\",\"width\":975,\"height\":550,\"caption\":\"Fondo c\\u00f3digo\"},\"datePublished\":\"2014-04-13T12:23:06-05:00\",\"dateModified\":\"2024-11-01T11:50:09-05:00\",\"inLanguage\":\"es-ES\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#webpage\"},\"articleSection\":\"Escuela de Producci\\u00f3n, c\\u00f3digo, hipermedia\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"position\":2,\"name\":\"Escuela de Producci\\u00f3n\",\"item\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#listItem\",\"name\":\"Una receta para crear cajas de luz (LightBox)\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog#listItem\",\"name\":\"Inicio\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#listItem\",\"position\":3,\"name\":\"Una receta para crear cajas de luz (LightBox)\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/category\\\/produccion-web\\\/#listItem\",\"name\":\"Escuela de Producci\\u00f3n\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\",\"name\":\"e-Lexia.com\",\"description\":\"Aprende con e-Lexia.com\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"telephone\":\"+573053933953\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/e-Lexia-Logo-v5-circle.png\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#organizationLogo\",\"width\":600,\"height\":600,\"caption\":\"Logo de e-Lexia.com\"},\"image\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/@escuela-digital\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/\",\"name\":\"juancadotcom\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g\",\"width\":96,\"height\":96,\"caption\":\"juancadotcom\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/juancadotcom\",\"https:\\\/\\\/instagram.com\\\/juancadotcom\",\"https:\\\/\\\/youtube.com\\\/juancadotcom\",\"https:\\\/\\\/linkedin.com\\\/in\\\/juancadotcom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#webpage\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/\",\"name\":\"Crear cajas de luz (lightbox) - Escuela Digital\",\"description\":\"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\\u00edneas de c\\u00f3digo HTML, CSS y Js podr\\u00e1s mejorar la experiencia de usuario\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/author\\\/wpadmin_elexia\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/fondo-codigo.jpg\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#mainImage\",\"width\":975,\"height\":550,\"caption\":\"Fondo c\\u00f3digo\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/una-receta-para-crear-cajas-de-luz-lightbox\\\/#mainImage\"},\"datePublished\":\"2014-04-13T12:23:06-05:00\",\"dateModified\":\"2024-11-01T11:50:09-05:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/\",\"name\":\"Escuela Digital\",\"description\":\"Aprende con e-Lexia.com\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/e-lexia.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Crear cajas de luz (lightbox) - Escuela Digital","description":"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario","canonical_url":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"FTr3psdS63RenyhSIowbaMRJxtaRFHXfmlKgDARf-x4","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#blogposting","name":"Crear cajas de luz (lightbox) - Escuela Digital","headline":"Una receta para crear cajas de luz (LightBox)","author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","width":975,"height":550,"caption":"Fondo c\u00f3digo"},"datePublished":"2014-04-13T12:23:06-05:00","dateModified":"2024-11-01T11:50:09-05:00","inLanguage":"es-ES","mainEntityOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#webpage"},"isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#webpage"},"articleSection":"Escuela de Producci\u00f3n, c\u00f3digo, hipermedia"},{"@type":"BreadcrumbList","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","position":1,"name":"Inicio","item":"https:\/\/e-lexia.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","position":2,"name":"Escuela de Producci\u00f3n","item":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#listItem","name":"Una receta para crear cajas de luz (LightBox)"},"previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog#listItem","name":"Inicio"}},{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#listItem","position":3,"name":"Una receta para crear cajas de luz (LightBox)","previousItem":{"@type":"ListItem","@id":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/#listItem","name":"Escuela de Producci\u00f3n"}}]},{"@type":"Organization","@id":"https:\/\/e-lexia.com\/blog\/#organization","name":"e-Lexia.com","description":"Aprende con e-Lexia.com","url":"https:\/\/e-lexia.com\/blog\/","telephone":"+573053933953","logo":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/01\/e-Lexia-Logo-v5-circle.png","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#organizationLogo","width":600,"height":600,"caption":"Logo de e-Lexia.com"},"image":{"@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#organizationLogo"},"sameAs":["https:\/\/twitter.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/@escuela-digital","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"Person","@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author","url":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/","name":"juancadotcom","image":{"@type":"ImageObject","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/fa6c4798309ab8af2d1f695f7947f6e47f9f6740fb071b71ac02b331ec094975?s=96&r=g","width":96,"height":96,"caption":"juancadotcom"},"sameAs":["https:\/\/x.com\/juancadotcom","https:\/\/instagram.com\/juancadotcom","https:\/\/youtube.com\/juancadotcom","https:\/\/linkedin.com\/in\/juancadotcom"]},{"@type":"WebPage","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#webpage","url":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/","name":"Crear cajas de luz (lightbox) - Escuela Digital","description":"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/e-lexia.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#breadcrumblist"},"author":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"creator":{"@id":"https:\/\/e-lexia.com\/blog\/author\/wpadmin_elexia\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#mainImage","width":975,"height":550,"caption":"Fondo c\u00f3digo"},"primaryImageOfPage":{"@id":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/#mainImage"},"datePublished":"2014-04-13T12:23:06-05:00","dateModified":"2024-11-01T11:50:09-05:00"},{"@type":"WebSite","@id":"https:\/\/e-lexia.com\/blog\/#website","url":"https:\/\/e-lexia.com\/blog\/","name":"Escuela Digital","description":"Aprende con e-Lexia.com","inLanguage":"es-ES","publisher":{"@id":"https:\/\/e-lexia.com\/blog\/#organization"}}]},"og:locale":"es_ES","og:site_name":"Escuela Digital - Aprende con e-Lexia.com","og:type":"article","og:title":"Crear cajas de luz (lightbox) - Escuela Digital","og:description":"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario","og:url":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/","fb:admins":"42896562054","og:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","og:image:secure_url":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","og:image:width":975,"og:image:height":550,"article:tag":["escuela de producci\u00f3n","c\u00f3digo","hipermedia"],"article:published_time":"2014-04-13T17:23:06+00:00","article:modified_time":"2024-11-01T16:50:09+00:00","twitter:card":"summary_large_image","twitter:site":"@juancadotcom","twitter:title":"Crear cajas de luz (lightbox) - Escuela Digital","twitter:description":"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario","twitter:creator":"@juancadotcom","twitter:image":"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2019\/01\/fondo-codigo.jpg","twitter:label1":"Escrito por","twitter:data1":"juancadotcom","twitter:label2":"Tiempo de lectura estimado","twitter:data2":"6 minutos"},"aioseo_meta_data":{"post_id":"900","title":"Crear cajas de luz (lightbox) #separator_sa #site_title","description":"Aprende a integrar cajas de luz (o ventanas modales) en tu sitio web. Con un par de l\u00edneas de c\u00f3digo HTML, CSS y Js podr\u00e1s mejorar la experiencia de usuario","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-12-24 03:16:56","updated":"2025-06-04 13:26:13","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\" title=\"Inicio\">Inicio<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/\" title=\"Escuela de Producci\u00f3n\">Escuela de Producci\u00f3n<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&#047;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tUna receta para crear cajas de luz (LightBox)\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Inicio","link":"https:\/\/e-lexia.com\/blog"},{"label":"Escuela de Producci\u00f3n","link":"https:\/\/e-lexia.com\/blog\/category\/produccion-web\/"},{"label":"Una receta para crear cajas de luz (LightBox)","link":"https:\/\/e-lexia.com\/blog\/una-receta-para-crear-cajas-de-luz-lightbox\/"}],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}