{"id":3779,"date":"2012-08-12T09:51:42","date_gmt":"2012-08-12T09:51:42","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3779"},"modified":"2013-01-02T14:30:27","modified_gmt":"2013-01-02T14:30:27","slug":"cloud-carousel-3d","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/","title":{"rendered":"Cloud Carousel 3D"},"content":{"rendered":"<p>En este art\u00edculo vamos a hablar de un script jQuery que nos ofrece el profesor Cloud que trata de un carousel 3D que se puede utilizar para iterar im\u00e1genes.<\/p>\n<p>El carrusel por encima de las caracter\u00edsticas opcionales de pasador autom\u00e1tico y la informaci\u00f3n contenida en las etiquetas alt y title de las im\u00e1genes, se aplica un efecto flash al hacer click en los botones.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3918\" title=\"banderas\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png\" alt=\"\" width=\"579\" height=\"210\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png 579w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas-300x108.png 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/a><br \/>\n<!--more--><br \/>\nRealizar este tipo de script con jQuery en vez de Flash ofrece algunas ventajas por ejemplo la facilidad de integraci\u00f3n, se trata de un archivo de tama\u00f1o peque\u00f1o, el SEO es aplicable y la accesibilidad es mucho mayor.<\/p>\n<p>El carrusel cuenta con perspectiva realista. Muchos carruseles 3d s\u00f3lo se aplican escalado perspectiva con el tama\u00f1o de las im\u00e1genes, no sus posiciones. Esto se traduce en diferencias desproporcionadas entre los elementos que aparecen como se contraen en la distancia que parece extra\u00f1o.<\/p>\n<p><strong>Caracter\u00edsticas<\/strong><\/p>\n<ul>\n<li>Funciona con la mayor\u00eda de los navegadores (probado en IE6-IE9, Firefox (IVA V4), Chrome, Opera, Safari).<\/li>\n<li>Perspectiva 3D precisa.<\/li>\n<li>Carousel autom\u00e1tico opcional.<\/li>\n<li>F\u00e1cil integraci\u00f3n con HTML base y un poco de JavaScript.<\/li>\n<li>Peque\u00f1o script 5Kb.<\/li>\n<li>Totalmente accesible sin CSS o navegadores de s\u00f3lo texto.<\/li>\n<li>Funciona con otros plugins, POR EJEMPLO, Slimbox, y conserva sus enlaces y eventos de rat\u00f3n.<\/li>\n<li>Opcional soporte de la rueda del rat\u00f3n en la versi\u00f3n 1.0.2.<\/li>\n<li>Es completamente gratuito.<\/li>\n<\/ul>\n<p>Para a\u00f1adirlo a tu Web debes descargarte el script y a\u00f1adirlo a vuestro &lt;head&gt; junto con la librer\u00eda jQuery y la llamada al script:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/JavaScript\" src=\"cloud-carousel.1.0.5.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n$(document).ready(function(){\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$(\"#carousel1\").CloudCarousel({\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0xPos: 128,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0yPos: 32,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0buttonLeft: $(\"#left-but\"),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0buttonRight: $(\"#right-but\"),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0altBox: $(\"#alt-text\"),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0titleBox: $(\"#title-text\")\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Y el contenido HTML a a\u00f1adir al &lt;body&gt; de tu p\u00e1gina podr\u00eda ser el siguiente:<\/p>\n<pre>&lt;div id =\"carousel1\" style=\"width:256px; height:128px;background:#000;overflow:scroll;\"&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0&lt;img class=\"cloudcarousel\" src=\"images\/flag1.png\" alt=\"Australia Description\" title=\"Australia Title\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;img class=\"cloudcarousel\" src=\"images\/flag2.png\" alt=\"Brasil Description\" title=\"Brasil Title\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;img class=\"cloudcarousel\" src=\"images\/flag3.png\" alt=\"Canada Description\" title=\"Canada Title\" \/&gt;\r\n\u00a0\u00a0\u00a0 &lt;img class=\"cloudcarousel\" src=\"images\/flag4.png\" alt=\"Finlandia Description\" title=\"Finlandia Title\" \/&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;!-- Define left and right buttons. --&gt;\r\n&lt;input id=\"left-but\"\u00a0 type=\"button\" value=\"Left\" \/&gt;\r\n&lt;input id=\"right-but\" type=\"button\" value=\"Right\" \/&gt;\r\n\r\n&lt;!-- Define elements to accept the alt and title text from the images. --&gt;\r\n&lt;p id=\"title-text\"&gt;&lt;\/p&gt;\r\n&lt;p id=\"alt-text\"&gt;&lt;\/p&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/cloud-carousel\/\" target=\"_blank\">Ver ejemplo en funcionamiento<\/a><\/p>\n<p>En la <a href=\"http:\/\/www.professorcloud.com\/mainsite\/carousel.htm\" target=\"_blank\">p\u00e1gina oficial<\/a> puedes ver varios ejemplos m\u00e1s completos, descargar el script y ver m\u00e1s documentaci\u00f3n como por ejemplo las opciones.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a hablar de un script jQuery que nos ofrece el profesor Cloud que trata de un carousel 3D que se puede utilizar para iterar im\u00e1genes. El carrusel por encima de las caracter\u00edsticas opcionales de pasador autom\u00e1tico y la informaci\u00f3n contenida en las etiquetas alt y title de las im\u00e1genes, se aplica [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[51],"class_list":["post-3779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-carousel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cloud Carousel 3D - 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=\"Cloud Carousel 3D - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a hablar de un script jQuery que nos ofrece el profesor Cloud que trata de un carousel 3D que se puede utilizar para iterar im\u00e1genes. El carrusel por encima de las caracter\u00edsticas opcionales de pasador autom\u00e1tico y la informaci\u00f3n contenida en las etiquetas alt y title de las im\u00e1genes, se aplica [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/\" \/>\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-08-12T09:51:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-02T14:30:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png\" \/>\n\t<meta property=\"og:image:width\" content=\"579\" \/>\n\t<meta property=\"og:image:height\" content=\"210\" \/>\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\/cloud-carousel-3d\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/\",\"name\":\"Cloud Carousel 3D - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png\",\"datePublished\":\"2012-08-12T09:51:42+00:00\",\"dateModified\":\"2013-01-02T14:30:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png\",\"width\":579,\"height\":210},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cloud Carousel 3D\"}]},{\"@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":"Cloud Carousel 3D - 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":"Cloud Carousel 3D - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a hablar de un script jQuery que nos ofrece el profesor Cloud que trata de un carousel 3D que se puede utilizar para iterar im\u00e1genes. El carrusel por encima de las caracter\u00edsticas opcionales de pasador autom\u00e1tico y la informaci\u00f3n contenida en las etiquetas alt y title de las im\u00e1genes, se aplica [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-08-12T09:51:42+00:00","article_modified_time":"2013-01-02T14:30:27+00:00","og_image":[{"width":579,"height":210,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.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\/cloud-carousel-3d\/","url":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/","name":"Cloud Carousel 3D - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png","datePublished":"2012-08-12T09:51:42+00:00","dateModified":"2013-01-02T14:30:27+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/banderas.png","width":579,"height":210},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/cloud-carousel-3d\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cloud Carousel 3D"}]},{"@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\/3779","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=3779"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3779\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3918"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}