{"id":2916,"date":"2012-06-10T08:05:39","date_gmt":"2012-06-10T08:05:39","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2916"},"modified":"2012-08-26T15:53:03","modified_gmt":"2012-08-26T15:53:03","slug":"abrir-informacion-extra-en-una-nueva-ventana-con-fancybox","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/","title":{"rendered":"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4"},"content":{"rendered":"<p>FancyBox es una herramienta para la visualizaci\u00f3n de im\u00e1genes, contenido HTML y multimedia al estilo \u00ablightbox\u00bb flotante sobre la p\u00e1gina web.<\/p>\n<p>En este art\u00edculo vamos a ver como abrir informaci\u00f3n extra de nuestra p\u00e1gina en una nueva ventana modal utilizando Fancybox.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2955\" title=\"fancybox-info\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png\" alt=\"\" width=\"623\" height=\"420\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png 623w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1-300x202.png 300w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/a>Lo primero que tendremos que hacer es ir a la p\u00e1gina oficial de <a href=\"http:\/\/fancybox.net\/\" target=\"_blank\">Fancybox<\/a> para descargar el script y ver m\u00e1s informaci\u00f3n.<\/p>\n<p>Una vez tenemos los archivos necesarios en nuestro servidor podemos empezar a a\u00f1adir a nuestra p\u00e1gina HTML el efecto Fancybox.<\/p>\n<p>En nuestra cabecera o &lt;head&gt; deberemos a\u00f1adir los estilos y scripts necesarios:<\/p>\n<pre>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\".\/fancybox\/jquery.fancybox-1.3.4.css\" media=\"screen\" \/&gt;\r\n&lt;link rel=\"stylesheet\" href=\"style.css\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\".\/fancybox\/jquery.mousewheel-3.0.4.pack.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\".\/fancybox\/jquery.fancybox-1.3.4.pack.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n\u00a0\u00a0 \u00a0$(\"#open_conditions\").fancybox();\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Har\u00e1 falta la librer\u00eda jQuery y los scritps y estilos de Fancybox, adem\u00e1s de la llamada a la funci\u00f3n fancybox() tras pulsar en el link o elemento con id=\u00bbopen_conditions\u00bb.<\/p>\n<p>En nuestro &lt;body&gt; deberemos a\u00f1adir el link que tras pulsarlo abrir\u00e1 la informaci\u00f3n extra en una nueva ventana modal y el contenido de esta ventana inicialmente escondido.<\/p>\n<pre>&lt;a id=\"open_conditions\" href=\"#conditions\" title=\"Lorem ipsum dolor sit amet\"&gt;Ver condiciones&lt;\/a&gt;\r\n&lt;div style=\"display: none;\"&gt;\r\n\u00a0\u00a0 \u00a0&lt;div id=\"conditions\" style=\"width:400px;height:200px;overflow:auto;\"&gt;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.\r\n\u00a0\u00a0 \u00a0&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/fancybox\/open-information.html\" target=\"_blank\">Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>FancyBox es una herramienta para la visualizaci\u00f3n de im\u00e1genes, contenido HTML y multimedia al estilo \u00ablightbox\u00bb flotante sobre la p\u00e1gina web. En este art\u00edculo vamos a ver como abrir informaci\u00f3n extra de nuestra p\u00e1gina en una nueva ventana modal utilizando Fancybox. Lo primero que tendremos que hacer es ir a la p\u00e1gina oficial de Fancybox [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,5],"tags":[74,135,55,87],"class_list":["post-2916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-jquery","tag-contenedores","tag-fancybox","tag-lightbox","tag-popups"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4 - 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=\"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"FancyBox es una herramienta para la visualizaci\u00f3n de im\u00e1genes, contenido HTML y multimedia al estilo \u00ablightbox\u00bb flotante sobre la p\u00e1gina web. En este art\u00edculo vamos a ver como abrir informaci\u00f3n extra de nuestra p\u00e1gina en una nueva ventana modal utilizando Fancybox. Lo primero que tendremos que hacer es ir a la p\u00e1gina oficial de Fancybox [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/\" \/>\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-06-10T08:05:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-08-26T15:53:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"623\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\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=\"2 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\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/\",\"name\":\"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png\",\"datePublished\":\"2012-06-10T08:05:39+00:00\",\"dateModified\":\"2012-08-26T15:53:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png\",\"width\":623,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4\"}]},{\"@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":"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4 - 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":"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4 - Jose Aguilar Blog","og_description":"FancyBox es una herramienta para la visualizaci\u00f3n de im\u00e1genes, contenido HTML y multimedia al estilo \u00ablightbox\u00bb flotante sobre la p\u00e1gina web. En este art\u00edculo vamos a ver como abrir informaci\u00f3n extra de nuestra p\u00e1gina en una nueva ventana modal utilizando Fancybox. Lo primero que tendremos que hacer es ir a la p\u00e1gina oficial de Fancybox [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-06-10T08:05:39+00:00","article_modified_time":"2012-08-26T15:53:03+00:00","og_image":[{"width":623,"height":420,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.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":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/","url":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/","name":"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png","datePublished":"2012-06-10T08:05:39+00:00","dateModified":"2012-08-26T15:53:03+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/06\/fancybox-info1.png","width":623,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/abrir-informacion-extra-en-una-nueva-ventana-con-fancybox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Abrir informaci\u00f3n extra en una nueva ventana con Fancybox 1.3.4"}]},{"@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\/2916","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=2916"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/2955"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}