0

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.

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.

html

<ul class="section">
    <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' >
    </li>
    <li id="pic1" class='sub_section'
        data-path='data/5/images/10.jpg'
        data-title="Nullam aliquam"
        data-target='_blank' >
    </li>
</ul>

javascript

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]);
    }
}
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
codelearner
  • 131
  • 1
  • 1
  • 12
  • can u add a jsfiddle? – Sushil May 01 '15 at 20:55
  • Sorry..I dont know how to do that. – codelearner May 01 '15 at 20:56
  • 3
    urlArray will always be empty in the code shown because setInterval doesn't pass anything. – dandavis May 01 '15 at 20:58
  • So, you have argument in `setImages` definition. And how do you pass it to function call? – u_mulder May 01 '15 at 20:58
  • @codelearner: go to http://jsfiddle.net/, paste in your code, click "save" and then paste the new page url in your question/post. – dandavis May 01 '15 at 20:59
  • I made this fiddle : http://jsfiddle.net/u378v75a/ the data-path is updated, but I don't know which API you're using to display image in your gallery. – Jonathan Anctil May 01 '15 at 21:00
  • I am passing urlArray from some other code and i have checked it contains urls and those 2 urls change after 15 seconds – codelearner May 01 '15 at 21:00
  • Sorry for inconvenience I have posed snaps of my code html/js not full code. – codelearner May 01 '15 at 21:03
  • urlArray is being set globally – codelearner May 01 '15 at 21:04
  • I have updated question. Added few lines in the end – codelearner May 01 '15 at 21:10
  • hmm.. can you try putting an alert after u set the attribute? – Sushil May 01 '15 at 21:12
  • Your code is 100% fine, there must be a problem with the other API your using that converts the data-path attr to an image etc. What are you using? – Dean Meehan May 01 '15 at 21:14
  • @Jonathan Anctil : I am using codecanyon api to diplay gallery – codelearner May 01 '15 at 21:14
  • Just curious, you have tagged jQuery in the question, but you're not using it. Was that a mis-tag? – jwatts1980 May 01 '15 at 21:16
  • But first time it set my images correctly by replacing default images. – codelearner May 01 '15 at 21:17
  • @jwatt1980:I can use jquery or javascript both if required – codelearner May 01 '15 at 21:18
  • Could it be a problem related to image loading? – codelearner May 01 '15 at 21:18
  • In jquery the loop can be replaced with `$.each(urlArray, function(i, el) { $('pic'+i).data("path", el); })` Don't know that it will fix anything, but that's why this is a comment. – jwatts1980 May 01 '15 at 21:21
  • @codelearner: Please provide an example of the contents of urlArray, preferably by adding code showing assigning the appropriate values to the array. – Conspicuous Compiler May 01 '15 at 21:37
  • `for...in` is for iterating over object properties, don't use it to iterate over arrays. [It is a bad idea and causes lots of different problems](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea). Instead use a normal `for` statement or even better [`Array.prototype.forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). In the future when ES6 is more widely supported you could also use [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of). – Useless Code May 02 '15 at 00:06

1 Answers1

-1

Yours looks like it only runs at first interval. Use this approach instead when doing setInterval. 

var urlArray = [{src: 'http://riverboatsmusic.com.au/wp-content/uploads/2014/09/1shuu4q3.wizardchan.test_.png'},
                    {src: 'http://www.bealecorner.com/trv900/respat/eia1956-small.jpg'}];

    setInterval(function () {
        for(var i = 0; i < urlArray.length; i++){ 
            document.getElementById("pic"+i).setAttribute("data-path", urlArray[i].src);
            console.log("running");
        } 
    }, 3000);

http://jsfiddle.net/cdb0efv1/1/

Robin Carlo Catacutan
  • 13,249
  • 11
  • 52
  • 85