{"id":1120,"date":"2014-01-08T10:29:39","date_gmt":"2014-01-08T09:29:39","guid":{"rendered":"http:\/\/cyol.fr\/blog\/?p=1120"},"modified":"2014-01-08T10:56:41","modified_gmt":"2014-01-08T09:56:41","slug":"petit-slideshow-en-jquery","status":"publish","type":"post","link":"https:\/\/cyol.fr\/blog\/post\/petit-slideshow-en-jquery\/","title":{"rendered":"Petit slideshow en jquery"},"content":{"rendered":"<style>div.slideshow{\n \tmargin: 5px auto;\n \tposition:relative;\n \theight: 110px;\n \twidth: 110px;\n  \tpadding: 10px;\n  \tfloat:left;\n}\ndiv.slideshow img {\n \tborder: 1px solid #d5d5d5;\n \tposition:absolute;\n \tleft:10px;\n \ttop:10px;\n \theight: 100px;\n \twidth: 100px;\n \tdisplay: none;\n}<\/style>\n<div class=\"slideshow\"><img decoding=\"async\" style=\"display: inline;\" title=\"javascript-100\" alt=\"\" src=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/icones\/javascript-100.png\" \/><img decoding=\"async\" alt=\"jQuery-Logo\" src=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/jQuery-Logo.gif\" \/><\/div>\n<p><script type=\"text\/javascript\">\njQuery(function($){\n \t$(\".slideshow img:gt(0)\").hide();\n \tsetInterval(function() {\n  \t\t$('.slideshow').each(function(){\n \t\t\t($(this).children(\":first\")).fadeOut(1000)\n \t\t\t.next('img').fadeIn(1000)\n \t\t\t.end()\n \t\t\t.appendTo($(this));\n \t\t});\n \t},\n  3000);\n});<\/script><br \/>\nDans le cadre d&rsquo;un projet, j&rsquo;ai du cr\u00e9er un petit slideshow, une zone pr\u00e9sentant des images s&rsquo;affichant les une apr\u00e8s les autres.<\/p>\n<p>Ma derni\u00e8re exp\u00e9rience du genre (et donc le bout de code pr\u00e9sent dans ma biblioth\u00e8que perso) datant\u00a0 de presque 10ans, j&rsquo;ai pr\u00e9f\u00e9r\u00e9 effectuer une petite recherche pour trouver un code plus \u00e9l\u00e9gant et moderne.<!--more--><\/p>\n<p>Je suis tomb\u00e9 sur un exemple qui correspondait visuellement \u00e0 mes attentes sur <a title=\"CSS-Trick\" href=\"http:\/\/css-tricks.com\/\" target=\"_blank\">CSS-Tricks<\/a>\u00a0 : <a title=\"Simple Auto-Playing Slideshow on CSS-Trick\" href=\"http:\/\/css-tricks.com\/snippets\/jquery\/simple-auto-playing-slideshow\/\" target=\"_blank\">Simple Auto-Playing Slideshow<\/a><\/p>\n<p>Puis de l\u00e0 un lien vers un autre script simple de Slideshow : <a title=\"Simplest jQuery Slideshow by Snook\" href=\"http:\/\/snook.ca\/archives\/javascript\/simplest-jquery-slideshow\" target=\"_blank\">Simplest jQuery Slideshow<\/a><\/p>\n<p>Je m&rsquo;en suis fait un m\u00e9lange des deux que j&rsquo;ai ensuite modifi\u00e9 en fonction de mes contraintes, notamment celle d&rsquo;avoir plusieurs slideshow possible dans la page et donc de ne pas utiliser un script se basant sur un id unique mais plut\u00f4t sur une classe.<\/p>\n<p>HTML :<\/p>\n<pre class=\"brush:xml\">&lt;div class=\"slideshow\"&gt;\r\n\t&lt;img src=\"\" \/&gt;\r\n\t&lt;img src=\"\" \/&gt;\r\n\t&lt;img src=\"\" \/&gt;\r\n\t&lt;img src=\"\" \/&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>CSS :<\/p>\n<pre class=\"brush:css\">div.slideshow{\r\n\tmargin: 5px auto;\r\n\tposition:relative;\r\n\theight: 80px;\r\n\twidth: 111px; \r\n\tpadding: 10px; \r\n}\r\n\r\ndiv.slideshow img {\r\n\tborder: 1px solid #d5d5d5;\r\n\tposition:absolute;\r\n\tleft:10px;\r\n\ttop:10px;\r\n\theight: 70px;\r\n\twidth: 101px;\r\n\tdisplay: none;\r\n}<\/pre>\n<p>JS :<\/p>\n<pre class=\"brush:js\">jQuery(function($){\r\n\t$(\".slideshow img:gt(0)\").hide();\r\n\tsetInterval(function() { \r\n\t\t$('.slideshow').each(function(){\r\n\t\t\t($(this).children(\":first\")).fadeOut(1000)\r\n\t\t\t.next('img').fadeIn(1000)\r\n\t\t\t.end()\r\n\t\t\t.appendTo($(this));\r\n\t\t});\r\n\t},  3000);\r\n});<\/pre>\n<p>Comme je le disais, ma probl\u00e9matique par rapport aux codes que j&rsquo;avais trouv\u00e9 \u00e9tait qu&rsquo;ils se basaient sur l&rsquo;id de l&rsquo;\u00e9l\u00e9ment encapsulant les slides ce qui imposait un unique slideshow par page ou alors de d\u00e9finir une fonction javascript par slideshow. Et qui imposait aussi de connaitre les id en question, sachant que dans le cadre du projet nous \u00e9tions sur un module Joomla, donc positionnable \u00e0 plusieurs endroits d&rsquo;une m\u00eame page de fa\u00e7on dynamique.<br \/>\nEn utilisant la classe comme cible dans le DOM, j&rsquo;ai pu utiliser le &lsquo;.each()&rsquo; [<em> $(&lsquo;.slideshow&rsquo;).each(&#8230;);<\/em>] et ainsi m&rsquo;assurer que les changements d&rsquo;images ne se croisent pas si la page pr\u00e9sente plusieurs slideshows.<\/p>\n<p><em>PS : Merci \u00e0 <a title=\"LE GLOB DE BARGEO\" href=\"http:\/\/glob.bargeo.fr\" target=\"_blank\">LE GLOB DE BARGEO<\/a> pour son <a title=\"'Astuce pour int\u00e9grer du javascript dans un article wordpress' sur LE GLOB DE BARGEO\" href=\"http:\/\/glob.bargeo.fr\/fr\/web\/wordpress\/wordpress-inserer-du-javascript-dans-le-contenu-dun-article\/\" target=\"_blank\">astuce permettant d&rsquo;int\u00e9grer du javascript directement dans le corps d&rsquo;un article WordPress<\/a>.<br \/>\nLe probl\u00e8me de base \u00e9tant que l&rsquo;\u00e9diteur visuel reformate m\u00eame ce qu&rsquo;on a saisi simplement du cot\u00e9 \u00ab\u00a0texte\u00a0\u00bb en y rajoutant balises et espaces qui invalident le fonctionnement du JS.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans le cadre d&rsquo;un projet, j&rsquo;ai du cr\u00e9er un petit slideshow. Ma derni\u00e8re exp\u00e9rience du genre (et donc le bout de code pr\u00e9sent dans ma biblioth\u00e8que perso) datant de presque 10ans, j&rsquo;ai pr\u00e9f\u00e9r\u00e9 effectuer une petite recherche pour trouver un code plus \u00e9l\u00e9gant et moderne. Je suis tomb\u00e9 sur un exemple qui correspondait visuellement \u00e0 mes attentes sur CSS-Tricks : Simple Auto-Playing Slideshow HTML : &lt;div class=\u00a0\u00bbslideshow\u00a0\u00bb&gt; &lt;img src=\u00a0\u00bb\u00a0\u00bb style=\u00a0\u00bbdisplay: inline\u00a0\u00bb \/&gt; &lt;img src=\u00a0\u00bb\u00a0\u00bb \/&gt; &lt;img src=\u00a0\u00bb\u00a0\u00bb \/&gt; &lt;img src=\u00a0\u00bb\u00a0\u00bb \/&gt; &lt;\/div&gt; CSS : div. [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":1128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[116],"class_list":["post-1120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","odd"],"_links":{"self":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":30,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"predecessor-version":[{"id":1152,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1120\/revisions\/1152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media\/1128"}],"wp:attachment":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}