title: Change image using setAttribute javascript
body: <p>I am displaying photos in gallery from dropbox. Photos in gallery keep changing in 15 seconds. Issue is once I display a photo I unable to replace it by another photo after 15 secs.</p>
  
  <p>I am posting snaps of my html and js code. I cant post full code because its big and confidential. I just want to know if there is anything I am doing wrong from syntax or js perspective or is there any other way to do it? I am using firefox browser.</p>
  
  <p>html</p>
  
  <pre><code>&lt;ul class="section"&gt;
      &lt;li id="pic0" class='sub_section'
          data-path='data/5/images/01.jpg' //this is default image to be displayed
          data-title="Optional title"
          data-target='_blank' &gt;
      &lt;/li&gt;
      &lt;li id="pic1" class='sub_section'
          data-path='data/5/images/10.jpg'
          data-title="Nullam aliquam"
          data-target='_blank' &gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>setInterval(setImages, 15000);
  function setImages(urlArray) {//this is array which contains 2 image urls this is global variable)
      for(var i in urlArray){
          document.getElementById("pic"+i).removeAttribute("data-path",null);
          document.getElementById("pic"+i).setAttribute("data-path",urlArray[i]);
      }
  }
  </code></pre>