{"id":807,"date":"2010-12-04T13:07:22","date_gmt":"2010-12-04T12:07:22","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=807"},"modified":"2010-12-04T14:12:16","modified_gmt":"2010-12-04T13:12:16","slug":"s3slider-un-semplice-slideshow-jquery","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/","title":{"rendered":"s3Slider: un semplice Slideshow jQuery"},"content":{"rendered":"<div pw:image='' class='pw-widget pw-counter-horizontal pw-horizontal' pw:url=\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\" pw:title=\"s3Slider: un semplice Slideshow jQuery\" >\n<\/div><p><a href=\"http:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg\" alt=\"s3Slider un semplice Slideshow jQuery\" title=\"s3Slider un semplice Slideshow jQuery\" width=\"500\" height=\"400\" class=\"aligncenter size-full wp-image-814\" srcset=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg 500w, https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery-300x240.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p><strong>s3Slider<\/strong> \u00e8 un semplice Slideshow di immagini che utilizza la libreria jQuery.<\/p>\n<p>s3Slider \u00e8 un progetto di <a href=\"http:\/\/www.serie3.info\/\">Boban Kari\u0161ik<\/a>, un freelance serbo, che ha condiviso gratuitamente il sorgente di questo plugin in jQuery.<\/p>\n<p><!--more-->Cercher\u00f2 di spiegare come includere in un sito s3Slider:<\/p>\n<h4>Javascript<\/h4>\n<p>Prima di tutto includiamo i file javascript all&#8217;intero dell&#8217;HEAD: la liberia jQuery, scaricabile dal <a target=\"_blank\" href=\"http:\/\/docs.jquery.com\/Downloading_jQuery\"> sito di jQuery<\/a> e il javascript s3Slider.<\/p>\n<pre lang=\"html4strict\">\r\n<script src=\"js\/jquery.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"js\/s3Slider.js\" type=\"text\/javascript\"><\/script>\r\n<\/pre>\n<p>Per inizializzare s3Slider e impostare il tempo di visualizzazione dell&#8217;immagine (il valore \u00e8 in millisecondi) c&#8217;\u00e8 bisogno delle seguenti istruzioni:<\/p>\n<pre lang=\"java\">\r\n$(document).ready(function() { \r\n   $('#s3slider').s3Slider({ \r\n      timeOut: 4000 \r\n   });\r\n});\r\n<\/pre>\n<h4>HTML<\/h4>\n<pre lang=\"html4strict\">\r\n<div id=\"s3slider\">\r\n   <ul id=\"s3sliderContent\">\r\n      <li class=\"s3sliderImage\">\r\n          <img decoding=\"async\" src=\"#\" \/>\r\n          <span>Scrivi qui il testo<\/span>\r\n      <\/li>\r\n      <li class=\"s3sliderImage\">\r\n          <img decoding=\"async\" src=\"#\" \/>\r\n          <span>Scrivi qui il testo<\/span>\r\n      <\/li>\r\n      <div class=\"clear s3sliderImage\"><\/div>\r\n   <\/ul>\r\n<\/div>\r\n<\/pre>\n<h4>CSS<\/h4>\n<pre lang=\"css\">\r\n#s3slider { \r\n   width: 400px; \r\n   height: 300px;\r\n   position: relative;\r\n   overflow: hidden;\r\n}\r\n\r\n#s3sliderContent {\r\n   width: 400px;\r\n   position: absolute;\r\n   top: 0;\r\n   margin-left: 0;\r\n}\r\n\r\n.s3sliderImage {\r\n   float: left;\r\n   position: relative;\r\n   display: none;\r\n}\r\n\r\n.s3sliderImage span {\r\n   position: absolute;\r\n   left: 0;\r\n   font: 10px\/15px Arial, Helvetica, sans-serif;\r\n   padding: 10px 13px;\r\n   width: 374px;\r\n   background-color: #000;\r\n   filter: alpha(opacity=70);\r\n   -moz-opacity: 0.7;\r\n   -khtml-opacity: 0.7;\r\n   opacity: 0.7;\r\n   color: #fff;\r\n   display: none;\r\n   top: 0;\r\n\r\n   \/*\r\n       top: 0; -> il box con il testo verr\u00e0 visualizzato in alto\r\n       bottom: 0; -> il box con il testo verr\u00e0 visualizzato in basso\r\n   *\/\r\n}\r\n\r\n.clear {\r\n   clear: both;\r\n}\r\n<\/pre>\n<h4>Supporto del Browser<\/h4>\n<ul>\n<li>Firefox 2.x (Win)<\/li>\n<li>Firefox 3.0.3 (Win \/ Linux \/ Mac)<\/li>\n<li>Opera 9.6 (Win \/ Linux)<\/li>\n<li>Safari 3.0.3 (Win \/ Mac)<\/li>\n<li>Internet Explorer 6 (Win)<\/li>\n<li>Internet Explorer 7 (Win)<\/li>\n<li>Google Chrome (Win)<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3slider-esempio-slideshow-jquery.jpg\" alt=\"s3slider esempio slideshow jquery\" title=\"s3slider esempio slideshow jquery\" width=\"500\" height=\"224\" class=\"aligncenter size-full wp-image-820\" srcset=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3slider-esempio-slideshow-jquery.jpg 500w, https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3slider-esempio-slideshow-jquery-300x134.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<h4>Copyright<\/h4>\n<p>Questo script \u00e8 sotto licenza Creative Commons Attribuzione 2,5. Cos\u00ec lo si pu\u00f2 utilizzare in tutti i vostri progetti, anche quelli commerciali.<\/p>\n<p><a target=\"_blank\" class=\"awesome magenta large\" href=\"http:\/\/www.serie3.info\/s3slider\/demonstration.html\">Demo<\/a> <a class=\"awesome viola large\" href=\"http:\/\/s3slider-original.googlecode.com\/files\/s3SliderFull.zip\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>s3Slider \u00e8 un semplice Slideshow di immagini che utilizza la libreria jQuery. s3Slider \u00e8 un progetto di Boban Kari\u0161ik, un freelance serbo, che ha condiviso gratuitamente il sorgente di questo plugin in jQuery.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[3,88],"class_list":["post-807","post","type-post","status-publish","format-standard","hentry","category-ajax","tag-jquery","tag-slideshow"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>s3Slider: un semplice Slideshow jQuery | Blog | SimoneDesign<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"s3Slider: un semplice Slideshow jQuery | Blog | SimoneDesign\" \/>\n<meta property=\"og:description\" content=\"s3Slider \u00e8 un semplice Slideshow di immagini che utilizza la libreria jQuery. s3Slider \u00e8 un progetto di Boban Kari\u0161ik, un freelance serbo, che ha condiviso gratuitamente il sorgente di questo plugin in jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | SimoneDesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SimoneDesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-04T12:07:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-12-04T13:12:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simone Forti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:site\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simone Forti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\",\"name\":\"s3Slider: un semplice Slideshow jQuery | Blog | SimoneDesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg\",\"datePublished\":\"2010-12-04T12:07:22+00:00\",\"dateModified\":\"2010-12-04T13:12:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#primaryimage\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg\",\"contentUrl\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg\",\"width\":\"500\",\"height\":\"400\",\"caption\":\"s3Slider un semplice Slideshow jQuery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.simonedesign.it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"s3Slider: un semplice Slideshow jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/\",\"name\":\"Blog | SimoneDesign\",\"description\":\"Web Marketing e non solo..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\",\"name\":\"Simone Forti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"caption\":\"Simone Forti\"},\"sameAs\":[\"http:\/\/www.simonedesign.it\/\"],\"url\":\"https:\/\/www.simonedesign.it\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"s3Slider: un semplice Slideshow jQuery | Blog | SimoneDesign","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/","og_locale":"it_IT","og_type":"article","og_title":"s3Slider: un semplice Slideshow jQuery | Blog | SimoneDesign","og_description":"s3Slider \u00e8 un semplice Slideshow di immagini che utilizza la libreria jQuery. s3Slider \u00e8 un progetto di Boban Kari\u0161ik, un freelance serbo, che ha condiviso gratuitamente il sorgente di questo plugin in jQuery.","og_url":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/","og_site_name":"Blog | SimoneDesign","article_publisher":"https:\/\/www.facebook.com\/SimoneDesign\/","article_published_time":"2010-12-04T12:07:22+00:00","article_modified_time":"2010-12-04T13:12:16+00:00","og_image":[{"width":500,"height":400,"url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg","type":"image\/jpeg"}],"author":"Simone Forti","twitter_card":"summary_large_image","twitter_creator":"@SimoneDesign_","twitter_site":"@SimoneDesign_","twitter_misc":{"Scritto da":"Simone Forti","Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/","url":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/","name":"s3Slider: un semplice Slideshow jQuery | Blog | SimoneDesign","isPartOf":{"@id":"https:\/\/www.simonedesign.it\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#primaryimage"},"thumbnailUrl":"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg","datePublished":"2010-12-04T12:07:22+00:00","dateModified":"2010-12-04T13:12:16+00:00","author":{"@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d"},"breadcrumb":{"@id":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#primaryimage","url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg","contentUrl":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2010\/12\/s3Slider-un-semplice-Slideshow-jQuery.jpg","width":"500","height":"400","caption":"s3Slider un semplice Slideshow jQuery"},{"@type":"BreadcrumbList","@id":"https:\/\/www.simonedesign.it\/blog\/s3slider-un-semplice-slideshow-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.simonedesign.it\/blog\/"},{"@type":"ListItem","position":2,"name":"s3Slider: un semplice Slideshow jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.simonedesign.it\/blog\/#website","url":"https:\/\/www.simonedesign.it\/blog\/","name":"Blog | SimoneDesign","description":"Web Marketing e non solo..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d","name":"Simone Forti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","caption":"Simone Forti"},"sameAs":["http:\/\/www.simonedesign.it\/"],"url":"https:\/\/www.simonedesign.it\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/comments?post=807"}],"version-history":[{"count":18,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/807\/revisions"}],"predecessor-version":[{"id":828,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/807\/revisions\/828"}],"wp:attachment":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/media?parent=807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/categories?post=807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/tags?post=807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}