{"id":4746,"date":"2012-09-19T19:49:01","date_gmt":"2012-09-19T19:49:01","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=4746"},"modified":"2015-11-10T14:01:49","modified_gmt":"2015-11-10T14:01:49","slug":"jpageflip","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/","title":{"rendered":"jPageflip"},"content":{"rendered":"<p>jPageFlip es un plugin jQuery para simular el giro de las p\u00e1ginas de un libro. Requiere la librer\u00eda jQuery para ser utilizado. La versi\u00f3n actual ha sido probado con la versi\u00f3n de jQuery 1.4.2.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4752\" title=\"jpageflip\" alt=\"\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png\" width=\"515\" height=\"333\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png 515w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip-300x193.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/a><\/p>\n<p>jPageFlip es altamente configurable, consulte la secci\u00f3n de configuraci\u00f3n de la p\u00e1gina oficial. Extensiones adicionales de las opciones de configuraci\u00f3n est\u00e1n previstas para la pr\u00f3xima versi\u00f3n. jPageFlip se basa actualmente en la \u00abtecnolog\u00eda de lienzo\u00bb, que es s\u00f3lo soportadas por Firefox, Chrome, Opera y Safari, al menos en sus versiones m\u00e1s recientes. Internet Explorer 8 (IE8) no es compatible con la tecnolog\u00eda de lona, esto s\u00f3lo llegar\u00e1 con IE9.<\/p>\n<p>Desde la versi\u00f3n 0.9.5 jPageFlip im\u00e1genes transparentes y semitransparentes son compatibles.<\/p>\n<p>Para hacer pasar las diap\u00f3sitivas o im\u00e1genes hay que hacer click en la esquina inferior derecha.<\/p>\n<p>Se puede utilizar para visualizar un albun de fotos, un dossier de documentos o un libro. Siempre trabaja con im\u00e1genes.<\/p>\n<p>Para implementarlo deberemos a\u00f1adir en el &lt;head&gt; de nuestra p\u00e1gina Web la librer\u00eda jQuery, el plugin y su llamada:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jpageflip-0.9.7.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nwindow.onload = pageIsLoaded(); \r\nfunction pageIsLoaded() {\r\n\u00a0\u00a0 \u00a0$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#myPageFlip').jPageFlip({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 225,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 300,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 top: 30,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 left: 70,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 startPage : 1\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0});\r\n}\r\n&lt;\/script&gt;<\/pre>\n<p>Y luego en el &lt;body&gt; el siguiente c\u00f3digo HTML a\u00f1adimos las im\u00e1genes que queremos a\u00f1adir dentro del contenedor:<\/p>\n<pre>&lt;div id=\"myPageFlip\"&gt;\r\n\u00a0\u00a0 \u00a0&lt;img src=\"images\/image1.jpg\" class=\"jPageFlip\"&gt;\r\n\u00a0\u00a0\u00a0 &lt;img src=\"images\/image2.jpg\" class=\"jPageFlip\"&gt;\r\n\u00a0\u00a0\u00a0 ...\r\n\u00a0\u00a0 \u00a0&lt;img src=\"images\/imageX.jpg\" class=\"jPageFlip\"&gt;\r\n&lt;\/div&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>jPageFlip es un plugin jQuery para simular el giro de las p\u00e1ginas de un libro. Requiere la librer\u00eda jQuery para ser utilizado. La versi\u00f3n actual ha sido probado con la versi\u00f3n de jQuery 1.4.2. jPageFlip es altamente configurable, consulte la secci\u00f3n de configuraci\u00f3n de la p\u00e1gina oficial. Extensiones adicionales de las opciones de configuraci\u00f3n est\u00e1n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[74,110,52],"class_list":["post-4746","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-contenedores","tag-imagenes","tag-sliders"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jPageflip - 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=\"jPageflip - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"jPageFlip es un plugin jQuery para simular el giro de las p\u00e1ginas de un libro. Requiere la librer\u00eda jQuery para ser utilizado. La versi\u00f3n actual ha sido probado con la versi\u00f3n de jQuery 1.4.2. jPageFlip es altamente configurable, consulte la secci\u00f3n de configuraci\u00f3n de la p\u00e1gina oficial. Extensiones adicionales de las opciones de configuraci\u00f3n est\u00e1n [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/\" \/>\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-09-19T19:49:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-11-10T14:01:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png\" \/>\n\t<meta property=\"og:image:width\" content=\"515\" \/>\n\t<meta property=\"og:image:height\" content=\"333\" \/>\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\/jpageflip\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/\",\"name\":\"jPageflip - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png\",\"datePublished\":\"2012-09-19T19:49:01+00:00\",\"dateModified\":\"2015-11-10T14:01:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png\",\"width\":515,\"height\":333},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jPageflip\"}]},{\"@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":"jPageflip - 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":"jPageflip - Jose Aguilar Blog","og_description":"jPageFlip es un plugin jQuery para simular el giro de las p\u00e1ginas de un libro. Requiere la librer\u00eda jQuery para ser utilizado. La versi\u00f3n actual ha sido probado con la versi\u00f3n de jQuery 1.4.2. jPageFlip es altamente configurable, consulte la secci\u00f3n de configuraci\u00f3n de la p\u00e1gina oficial. Extensiones adicionales de las opciones de configuraci\u00f3n est\u00e1n [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-09-19T19:49:01+00:00","article_modified_time":"2015-11-10T14:01:49+00:00","og_image":[{"width":515,"height":333,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.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\/jpageflip\/","url":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/","name":"jPageflip - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png","datePublished":"2012-09-19T19:49:01+00:00","dateModified":"2015-11-10T14:01:49+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/09\/jpageflip.png","width":515,"height":333},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/jpageflip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jPageflip"}]},{"@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\/4746","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=4746"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/4746\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4752"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=4746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=4746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=4746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}