Ver 3.0

eugeniosegala · Oct 27, 2017 · f3c97f0 · f3c97f0
1 parent c16296b
commit f3c97f0
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -13,8 +13,18 @@ Just insert:
 and call easy_background:
 
 ```
-// FIRST CHOSE THE CONTAINER AND AFTER SET DELAY TIME AND IMAGE OF SINGLE IAMGE
-easy_background("body", 3000, "img/1.jpg", 3000, "img/2.jpg", 3000, "img/3.jpg");
+// FIRST CHOSE THE CONTAINER (selector) AND AFTER SET DELAY TIME AND IMAGE OF SINGLE IAMGE, IF YOU DON'T SET A DELAY TIME, THE SCRIPT TAKE A DELAY TIME OF 3s.
+
+easy_background("body",
+
+  {
+	i: ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"],
+
+	d: [2000, 2000, 2000, 2000, 2000]
+  }
+
+
+);
 ```
 <br>
 

diff --git a/easy_background.js b/easy_background.js
@@ -1,106 +1,92 @@
-function easy_background(selector, a1, a2, b1, b2, c1, c2, d1, d2, e1, e2) {
-
-
-  function empty_var(x) {
-    if (x) {
-      return x;
-    } else {
-      return 0;
-    }
-  }
-
-
+function easy_background(selector, sld_args) {
 
 
   function empty_img(x) {
     if (x) {
-      return "<img src='"+ x +"'>";
+      return "<img src='" + x + "'>";
     } else {
       return "";
     }
   }
 
+  //use object same as arrays in php {nameofindex:variable} inside object you can use arrays [value1,val2] (variable in object can be as array
+  //var sld_args={i:["img/555.jpg","img/44.jpg","img/33.jpg","img/22.jpg","img/11.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],d:[3000,3000,3000,3000,3000] };
 
+  //if delay is empty or forgotten then use this default value
+  var def_del = 3000;
 
+  var p = document.createElement("div");
+  p.innerHTML = " ";
+  p.classList.add("easy_slider");
 
-var p = document.createElement("div");
-p.innerHTML = " ";
-p.classList.add("easy_slider");
-
-
-document.body.insertBefore(p, document.body.firstChild);
-
-
-document.querySelector(".easy_slider").innerHTML = empty_img(a2) + empty_img(b2) + empty_img(c2) + empty_img(d2) + empty_img(e2);
-
-
-document.querySelector(".easy_slider").style.display = "none";
-
-
-
-
-
-  tot_time = empty_var(a1) + empty_var(b1) + empty_var(c1) + empty_var(d1) + empty_var(e1);
 
-  console.log(tot_time);
-
-
-
-  function slider() {
-
-
-
-    if (a1) {
-      setTimeout(function() {
-
-        document.querySelector(selector).style.backgroundImage = "url('" + a2 + "')";
-
-      }, 0000); // 1
+  document.body.insertBefore(p, document.body.firstChild);
+  //switch all values in object -- objectname.index in you case sld_args is object and i is index of array which keep images (i). We use this function for fill div with img tags
+  //and for insert delays into empty or forgotten places in object
+  sld_args.i.forEach(function(v, i) {
+    if (v) {
+      document.querySelector(".easy_slider").innerHTML += empty_img(v);
+      if (typeof sld_args.d[i] == 'undefined' || typeof sld_args.d[i] == '' || sld_args.d[i] == 0) {
+        sld_args.d[i] = def_del;
+      }
     }
 
+  });
 
 
-    if (b1) {
-      var delay = a1;
-      setTimeout(function() {
+  //add various style on selector
+  document.querySelector(".easy_slider").style.display = "none";
 
-        document.querySelector(selector).style.backgroundImage = "url('" + b2 + "')";
+  //add various style on selector
+  document.querySelector(selector).style.WebkitTransition = "all 0.5s ease-in";
+  document.querySelector(selector).style.MozTransition = "all 0.5s ease-in";
+  document.querySelector(selector).style.MsTransition = "all 0.5s ease-in";
+  document.querySelector(selector).style.OTransition = "all 0.5s ease-in";
+  document.querySelector(selector).style.transition = "all 0.5s ease-in";
 
-      }, delay); // 2
-    }
+  //add various style on selector
+  document.querySelector(selector).style.backgroundSize = "cover";
+  document.querySelector(selector).style.backgroundRepeat = "no-repeat";
+  document.querySelector(selector).style.backgroundPosition = "center center";
 
 
 
-    if (c1) {
-      var delay = a1 + b1;
-      setTimeout(function() {
+  //this n is number of row  in object - if first row one function if more than 1 then other
+  var n = 1;
+  //li collection previous delays from previous slides
+  var li = 0;
 
-        document.querySelector(selector).style.backgroundImage = "url('" + c2 + "')";
-
-      }, delay); // 3
-    }
-
-
-
-    if (d1) {
-      var delay = a1 + b1 + c1;
-      setTimeout(function() {
+  function slider() {
+    //switching all images one by one
+    sld_args.i.forEach(function(vvv, iii) {
+      //here go all slides except first
+      if (n > 1) {
+        //set delay from collected number from previous slides
+        var delay = li;
+        setTimeout(function() {
 
-        document.querySelector(selector).style.backgroundImage = "url('" + d2 + "')";
+          document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')";
 
-      }, delay); // 4
-    }
+        }, delay); // >1
+        //collecting delays from curent
+        li = li + sld_args.d[iii];
+      }
+      //this function for only  first slide
+      else {
+        //next row
+        n++;
+        //collect delay first time
+        li = sld_args.d[iii];
 
+        setTimeout(function() {
 
+          document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')";
 
-    if (e1) {
-      var delay = a1 + b1 + c1 + d1;
-      setTimeout(function() {
+        }, 0000); // 1
+      }
 
-        document.querySelector(selector).style.backgroundImage = "url('" + e2 + "')";
 
-      }, delay); // 5
-    }
+    });
 
 
   };
@@ -112,9 +98,8 @@ document.querySelector(".easy_slider").style.display = "none";
   setInterval(function() { // REPEAT
 
     slider();
-    console.log(tot_time);
-
-  }, tot_time);
+    //here used length of array of delays in object instead you tot_time variable
+  }, sld_args.d.length);
 
 
 }
diff --git a/index.html b/index.html
@@ -7,24 +7,16 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
   <meta name="author" content="Eugenio Segala">
+  <meta name="description" content="An extremely easy and clear SlideShow Background dev in Vanilla JS.">
+  <meta name="keywords" content="javascript,background-image,slides,slider,slideshow,gallery,js">
 
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
 
-
   <style>
-
     body {
 
       border: 2.1vh solid black;
-      -webkit-transition: all 0.5s ease-in;
-      -moz-transition: all 0.5s ease-in;
-      -ms-transition: all 0.5s ease-in;
-      -o-transition: all 0.5s ease-in;
-      transition: all 0.5s ease-in;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
       color: white;
       height: 100%;
       width: 100%;
@@ -46,24 +38,33 @@
 
 <body>
 
-<a href="https://github.com/Sn01k3r/easy_background"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
+  <a href="https://github.com/Sn01k3r/easy_background"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
 
   <div class="container ct">
 
     <div class="row">
 
-      <h1>easy_background</h1><i style="font-size: 10px;">dev by <a href="https://github.com/Sn01k3r">Sn01k3r</a></i>
+      <h1>easy_background</h1><i style="font-size: 10px;">dev by <a href="https://github.com/eugeniosegala">Yug</a></i>
 
     </div>
 
 
   </div>
 
-<script src="easy_background.js"></script>
+  <script src="easy_background.js"></script>
+
+  <script>
+    easy_background("body",
+
+      {
+        i: ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"],
+
+        d: [2000, 2000, 2000, 2000, 2000]
+      }
+
 
-<script>
-  easy_background("body", 3000, "img/1.jpg", 3000, "img/2.jpg", 3000, "img/3.jpg", 3000, "img/4.jpg", 3000, "img/5.jpg");
-</script>
+    );
+  </script>
 
 
 </body>