Automatically load next image from array everytime user enters website











up vote
0
down vote

favorite












So this code selects random image whenever a person loads my website, how can I change the code so that images are selected sequentially from first to last everytime a person loads the website and then again resets to first image when the counter reaches the end?
P.s- The code works fine on hosting server, here it gives an error i don't know why.






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var randomNum = Math.floor(Math.random() * myPix.length);

     document.getElementById("myPicture").src = myPix[randomNum];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>








javascript php html arrays







share|improve this question
























  • 1. You need to change the id of the image tag to myPicture, since you use getElementById; 2. If I have 3 images, you want to display the first one when I enter, then if I refresh the page to show the 2nd one again, then after another refresh the 3rd one and after to go back to the 1st one?
    – Adi
    Nov 19 at 11:32










  • Use localstorage.
    – Jestin Sebastian
    Nov 19 at 11:36










  • Just changed the ID to myPicture, it works now. Question still remains, how can I change it to select next picture. @Adi Yes exactly 1st image then 2nd then 3rd then again 1st but it should be on the website so suppose user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise.
    – Chaila
    Nov 19 at 11:42















up vote
0
down vote

favorite












So this code selects random image whenever a person loads my website, how can I change the code so that images are selected sequentially from first to last everytime a person loads the website and then again resets to first image when the counter reaches the end?
P.s- The code works fine on hosting server, here it gives an error i don't know why.






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var randomNum = Math.floor(Math.random() * myPix.length);

     document.getElementById("myPicture").src = myPix[randomNum];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>








javascript php html arrays







share|improve this question
























  • 1. You need to change the id of the image tag to myPicture, since you use getElementById; 2. If I have 3 images, you want to display the first one when I enter, then if I refresh the page to show the 2nd one again, then after another refresh the 3rd one and after to go back to the 1st one?
    – Adi
    Nov 19 at 11:32










  • Use localstorage.
    – Jestin Sebastian
    Nov 19 at 11:36










  • Just changed the ID to myPicture, it works now. Question still remains, how can I change it to select next picture. @Adi Yes exactly 1st image then 2nd then 3rd then again 1st but it should be on the website so suppose user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise.
    – Chaila
    Nov 19 at 11:42













up vote
0
down vote

favorite









up vote
0
down vote

favorite











So this code selects random image whenever a person loads my website, how can I change the code so that images are selected sequentially from first to last everytime a person loads the website and then again resets to first image when the counter reaches the end?
P.s- The code works fine on hosting server, here it gives an error i don't know why.






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var randomNum = Math.floor(Math.random() * myPix.length);

     document.getElementById("myPicture").src = myPix[randomNum];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>








javascript php html arrays







share|improve this question















So this code selects random image whenever a person loads my website, how can I change the code so that images are selected sequentially from first to last everytime a person loads the website and then again resets to first image when the counter reaches the end?
P.s- The code works fine on hosting server, here it gives an error i don't know why.






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var randomNum = Math.floor(Math.random() * myPix.length);

     document.getElementById("myPicture").src = myPix[randomNum];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>








window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var randomNum = Math.floor(Math.random() * myPix.length);

     document.getElementById("myPicture").src = myPix[randomNum];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var randomNum = Math.floor(Math.random() * myPix.length);

     document.getElementById("myPicture").src = myPix[randomNum];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





javascript php html arrays




javascript php html arrays






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 19 at 11:39

























asked Nov 19 at 11:29









Chaila

33




33












  • 1. You need to change the id of the image tag to myPicture, since you use getElementById; 2. If I have 3 images, you want to display the first one when I enter, then if I refresh the page to show the 2nd one again, then after another refresh the 3rd one and after to go back to the 1st one?
    – Adi
    Nov 19 at 11:32










  • Use localstorage.
    – Jestin Sebastian
    Nov 19 at 11:36










  • Just changed the ID to myPicture, it works now. Question still remains, how can I change it to select next picture. @Adi Yes exactly 1st image then 2nd then 3rd then again 1st but it should be on the website so suppose user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise.
    – Chaila
    Nov 19 at 11:42


















  • 1. You need to change the id of the image tag to myPicture, since you use getElementById; 2. If I have 3 images, you want to display the first one when I enter, then if I refresh the page to show the 2nd one again, then after another refresh the 3rd one and after to go back to the 1st one?
    – Adi
    Nov 19 at 11:32










  • Use localstorage.
    – Jestin Sebastian
    Nov 19 at 11:36










  • Just changed the ID to myPicture, it works now. Question still remains, how can I change it to select next picture. @Adi Yes exactly 1st image then 2nd then 3rd then again 1st but it should be on the website so suppose user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise.
    – Chaila
    Nov 19 at 11:42
















1. You need to change the id of the image tag to myPicture, since you use getElementById; 2. If I have 3 images, you want to display the first one when I enter, then if I refresh the page to show the 2nd one again, then after another refresh the 3rd one and after to go back to the 1st one?
– Adi
Nov 19 at 11:32




1. You need to change the id of the image tag to myPicture, since you use getElementById; 2. If I have 3 images, you want to display the first one when I enter, then if I refresh the page to show the 2nd one again, then after another refresh the 3rd one and after to go back to the 1st one?
– Adi
Nov 19 at 11:32












Use localstorage.
– Jestin Sebastian
Nov 19 at 11:36




Use localstorage.
– Jestin Sebastian
Nov 19 at 11:36












Just changed the ID to myPicture, it works now. Question still remains, how can I change it to select next picture. @Adi Yes exactly 1st image then 2nd then 3rd then again 1st but it should be on the website so suppose user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise.
– Chaila
Nov 19 at 11:42




Just changed the ID to myPicture, it works now. Question still remains, how can I change it to select next picture. @Adi Yes exactly 1st image then 2nd then 3rd then again 1st but it should be on the website so suppose user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise.
– Chaila
Nov 19 at 11:42












3 Answers
3






active

oldest

votes

















up vote
0
down vote



accepted










You can use localstorage to achieve this. When the user enters the website, you can do something like:



var pictureIndex = localstorage.getItem("pictureIndex");


But since it may be the user's first visit, it would be better to have:



var pictureIndex = localstorage.getItem("pictureIndex") || 0;


Then, you just increment the pictureIndex and perform a modulo operation (for the case when this is the last image)



pictureIndex = (pictureIndex + 1) % myPix.length;


To save this index, you can use



localStorage.setItem('pictureIndex', pictureIndex);



Next time when the user refreshes the page (or comes back), he will get the next picture in your array.



The final code should look like this:






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





Note that the above code might not work here (but you can test it locally) due to some security restrictions from jsfiddle. A working version can be accessed >here<






share|improve this answer























  • Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
    – Chaila
    Nov 19 at 11:52










  • Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
    – Adi
    Nov 19 at 11:53










  • This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
    – Chaila
    Nov 19 at 12:00










  • If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
    – Adi
    Nov 19 at 12:11












  • I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
    – Adi
    Nov 19 at 12:13


















up vote
0
down vote













function choosePic() {

        var local_item = 0;

        if(localStorage.getItem('pic_key')){

            local_item = parseInt(intvlocalStorage.getItem('pic_key'));

        }

        if(local_item >= myPix.length){

            local_item = 0;

        }

        localStorage.setItem('pic_key', local_item + 1);



        document.getElementById("myPicture").src = myPix[local_item];

    }


You can use LocalStorage to achieve this. When the user enters the website, you can store the key and increment it.






share|improve this answer























  • The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
    – Adi
    Nov 19 at 11:50










  • It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
    – Chaila
    Nov 19 at 11:50










  • Sorry a mistake white testing, updated
    – Jestin Sebastian
    Nov 19 at 11:51










  • @Chaila It should work now.
    – Jestin Sebastian
    Nov 19 at 12:02












  • Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
    – Chaila
    Nov 19 at 12:07


















up vote
0
down vote













Use local storage to save the data you need [e.g. visited = 3(3rd time the same person visited your website)]



Your js code can be implemented like this:



window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     if (localStorage.getItem('visited') == null)

     {

         document.getElementById("myPicture").src = myPix[0];

         localStorage.setItem('visited', 1);

     }

     else if (localStorage.getItem('visited') >= myPix.length)

     {

         localStorage.setItem('visited', 0);

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];



     }

     else

     {

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];

         localStorage.setItem('visited', localStorage.getItem('visited') + 1);

     }

}





share|improve this answer























  • After 3rd refresh images stop showing. Please note images sequence should be global.
    – Chaila
    Nov 19 at 12:11










  • @Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
    – Alexandros Bantzos
    Nov 19 at 14:24











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373686%2fautomatically-load-next-image-from-array-everytime-user-enters-website%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























3 Answers
3






active

oldest

votes








3 Answers
3






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote



accepted










You can use localstorage to achieve this. When the user enters the website, you can do something like:



var pictureIndex = localstorage.getItem("pictureIndex");


But since it may be the user's first visit, it would be better to have:



var pictureIndex = localstorage.getItem("pictureIndex") || 0;


Then, you just increment the pictureIndex and perform a modulo operation (for the case when this is the last image)



pictureIndex = (pictureIndex + 1) % myPix.length;


To save this index, you can use



localStorage.setItem('pictureIndex', pictureIndex);



Next time when the user refreshes the page (or comes back), he will get the next picture in your array.



The final code should look like this:






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





Note that the above code might not work here (but you can test it locally) due to some security restrictions from jsfiddle. A working version can be accessed >here<






share|improve this answer























  • Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
    – Chaila
    Nov 19 at 11:52










  • Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
    – Adi
    Nov 19 at 11:53










  • This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
    – Chaila
    Nov 19 at 12:00










  • If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
    – Adi
    Nov 19 at 12:11












  • I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
    – Adi
    Nov 19 at 12:13















up vote
0
down vote



accepted










You can use localstorage to achieve this. When the user enters the website, you can do something like:



var pictureIndex = localstorage.getItem("pictureIndex");


But since it may be the user's first visit, it would be better to have:



var pictureIndex = localstorage.getItem("pictureIndex") || 0;


Then, you just increment the pictureIndex and perform a modulo operation (for the case when this is the last image)



pictureIndex = (pictureIndex + 1) % myPix.length;


To save this index, you can use



localStorage.setItem('pictureIndex', pictureIndex);



Next time when the user refreshes the page (or comes back), he will get the next picture in your array.



The final code should look like this:






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





Note that the above code might not work here (but you can test it locally) due to some security restrictions from jsfiddle. A working version can be accessed >here<






share|improve this answer























  • Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
    – Chaila
    Nov 19 at 11:52










  • Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
    – Adi
    Nov 19 at 11:53










  • This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
    – Chaila
    Nov 19 at 12:00










  • If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
    – Adi
    Nov 19 at 12:11












  • I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
    – Adi
    Nov 19 at 12:13













up vote
0
down vote



accepted







up vote
0
down vote



accepted






You can use localstorage to achieve this. When the user enters the website, you can do something like:



var pictureIndex = localstorage.getItem("pictureIndex");


But since it may be the user's first visit, it would be better to have:



var pictureIndex = localstorage.getItem("pictureIndex") || 0;


Then, you just increment the pictureIndex and perform a modulo operation (for the case when this is the last image)



pictureIndex = (pictureIndex + 1) % myPix.length;


To save this index, you can use



localStorage.setItem('pictureIndex', pictureIndex);



Next time when the user refreshes the page (or comes back), he will get the next picture in your array.



The final code should look like this:






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





Note that the above code might not work here (but you can test it locally) due to some security restrictions from jsfiddle. A working version can be accessed >here<






share|improve this answer














You can use localstorage to achieve this. When the user enters the website, you can do something like:



var pictureIndex = localstorage.getItem("pictureIndex");


But since it may be the user's first visit, it would be better to have:



var pictureIndex = localstorage.getItem("pictureIndex") || 0;


Then, you just increment the pictureIndex and perform a modulo operation (for the case when this is the last image)



pictureIndex = (pictureIndex + 1) % myPix.length;


To save this index, you can use



localStorage.setItem('pictureIndex', pictureIndex);



Next time when the user refreshes the page (or comes back), he will get the next picture in your array.



The final code should look like this:






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





Note that the above code might not work here (but you can test it locally) due to some security restrictions from jsfiddle. A working version can be accessed >here<






window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>





window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     var pictureIndex = window.localStorage.getItem("pictureIndex") || 0;

     pictureIndex = (pictureIndex + 1) % myPix.length;



     window.localStorage.setItem("pictureIndex", pictureIndex);

     document.getElementById("imgid").innerHTML = pictureIndex;

     document.getElementById("myPicture").src = myPix[pictureIndex];

}

<!DOCTYPE html>

<html>

<head>

     <title>Random Image</title>

     <script src="thumb.js"></script>

</head>

<body>

  Press "Run" multiple times to cycle through the images.

  Currently showing: <span id="imgid"></span>

 <img src="images/spacer.gif" id="myPicture" alt="some image">

</body>

</html>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 19 at 11:49

























answered Nov 19 at 11:44









Adi

553419




553419












  • Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
    – Chaila
    Nov 19 at 11:52










  • Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
    – Adi
    Nov 19 at 11:53










  • This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
    – Chaila
    Nov 19 at 12:00










  • If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
    – Adi
    Nov 19 at 12:11












  • I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
    – Adi
    Nov 19 at 12:13


















  • Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
    – Chaila
    Nov 19 at 11:52










  • Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
    – Adi
    Nov 19 at 11:53










  • This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
    – Chaila
    Nov 19 at 12:00










  • If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
    – Adi
    Nov 19 at 12:11












  • I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
    – Adi
    Nov 19 at 12:13
















Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
– Chaila
Nov 19 at 11:52




Just implemented your code and it selects 1st image and the directly the last image. I used var pictureIndex = localstorage.getItem("pictureIndex");
– Chaila
Nov 19 at 11:52












Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
– Adi
Nov 19 at 11:53




Look at the code in the fiddle at the end (jsfiddle.net/adrianpop/2w36jzpy/7); I added some more photos and it works. I also added a counter to see the progress.
– Adi
Nov 19 at 11:53












This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
– Chaila
Nov 19 at 12:00




This works but it restarts from image 1 on every new session, I want it to be global if last request was image 2, next request should be image 3 for any user who visits it next.
– Chaila
Nov 19 at 12:00












If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
– Adi
Nov 19 at 12:11






If you want it to be for every user who visits the websites, it cannot be done with localstorage and you need some internal counter. Basically you need to keep a counter in a database where the website is stored and update every time a user enters the website. I thought (as the other people who answered here) that it should be a per-user-behaviour, not a global one.
– Adi
Nov 19 at 12:11














I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
– Adi
Nov 19 at 12:13




I say that it can't be done globally using just javascript because the javascript code is loaded and executed individually by every browser. Any variables declared live only in that instance and can not communicate with other instances without some real-time connections or updates.
– Adi
Nov 19 at 12:13












up vote
0
down vote













function choosePic() {

        var local_item = 0;

        if(localStorage.getItem('pic_key')){

            local_item = parseInt(intvlocalStorage.getItem('pic_key'));

        }

        if(local_item >= myPix.length){

            local_item = 0;

        }

        localStorage.setItem('pic_key', local_item + 1);



        document.getElementById("myPicture").src = myPix[local_item];

    }


You can use LocalStorage to achieve this. When the user enters the website, you can store the key and increment it.






share|improve this answer























  • The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
    – Adi
    Nov 19 at 11:50










  • It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
    – Chaila
    Nov 19 at 11:50










  • Sorry a mistake white testing, updated
    – Jestin Sebastian
    Nov 19 at 11:51










  • @Chaila It should work now.
    – Jestin Sebastian
    Nov 19 at 12:02












  • Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
    – Chaila
    Nov 19 at 12:07















up vote
0
down vote













function choosePic() {

        var local_item = 0;

        if(localStorage.getItem('pic_key')){

            local_item = parseInt(intvlocalStorage.getItem('pic_key'));

        }

        if(local_item >= myPix.length){

            local_item = 0;

        }

        localStorage.setItem('pic_key', local_item + 1);



        document.getElementById("myPicture").src = myPix[local_item];

    }


You can use LocalStorage to achieve this. When the user enters the website, you can store the key and increment it.






share|improve this answer























  • The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
    – Adi
    Nov 19 at 11:50










  • It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
    – Chaila
    Nov 19 at 11:50










  • Sorry a mistake white testing, updated
    – Jestin Sebastian
    Nov 19 at 11:51










  • @Chaila It should work now.
    – Jestin Sebastian
    Nov 19 at 12:02












  • Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
    – Chaila
    Nov 19 at 12:07













up vote
0
down vote










up vote
0
down vote









function choosePic() {

        var local_item = 0;

        if(localStorage.getItem('pic_key')){

            local_item = parseInt(intvlocalStorage.getItem('pic_key'));

        }

        if(local_item >= myPix.length){

            local_item = 0;

        }

        localStorage.setItem('pic_key', local_item + 1);



        document.getElementById("myPicture").src = myPix[local_item];

    }


You can use LocalStorage to achieve this. When the user enters the website, you can store the key and increment it.






share|improve this answer














function choosePic() {

        var local_item = 0;

        if(localStorage.getItem('pic_key')){

            local_item = parseInt(intvlocalStorage.getItem('pic_key'));

        }

        if(local_item >= myPix.length){

            local_item = 0;

        }

        localStorage.setItem('pic_key', local_item + 1);



        document.getElementById("myPicture").src = myPix[local_item];

    }


You can use LocalStorage to achieve this. When the user enters the website, you can store the key and increment it.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 19 at 11:51

























answered Nov 19 at 11:43









Jestin Sebastian

24310




24310












  • The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
    – Adi
    Nov 19 at 11:50










  • It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
    – Chaila
    Nov 19 at 11:50










  • Sorry a mistake white testing, updated
    – Jestin Sebastian
    Nov 19 at 11:51










  • @Chaila It should work now.
    – Jestin Sebastian
    Nov 19 at 12:02












  • Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
    – Chaila
    Nov 19 at 12:07


















  • The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
    – Adi
    Nov 19 at 11:50










  • It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
    – Chaila
    Nov 19 at 11:50










  • Sorry a mistake white testing, updated
    – Jestin Sebastian
    Nov 19 at 11:51










  • @Chaila It should work now.
    – Jestin Sebastian
    Nov 19 at 12:02












  • Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
    – Chaila
    Nov 19 at 12:07
















The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
– Adi
Nov 19 at 11:50




The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.
– Adi
Nov 19 at 11:50












It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
– Chaila
Nov 19 at 11:50




It says unreachable document after return. Also this is how I want "user1 visits it loads image 1, user2 visits it loads image2, user1 again visits it loads image3 and likewise."
– Chaila
Nov 19 at 11:50












Sorry a mistake white testing, updated
– Jestin Sebastian
Nov 19 at 11:51




Sorry a mistake white testing, updated
– Jestin Sebastian
Nov 19 at 11:51












@Chaila It should work now.
– Jestin Sebastian
Nov 19 at 12:02






@Chaila It should work now.
– Jestin Sebastian
Nov 19 at 12:02














Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
– Chaila
Nov 19 at 12:07




Sorry, I am not familiar with Localstorage but after pasting your code beneath the array it doesn't load any image, Do I have to replace something here? @JestinSebastian
– Chaila
Nov 19 at 12:07










up vote
0
down vote













Use local storage to save the data you need [e.g. visited = 3(3rd time the same person visited your website)]



Your js code can be implemented like this:



window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     if (localStorage.getItem('visited') == null)

     {

         document.getElementById("myPicture").src = myPix[0];

         localStorage.setItem('visited', 1);

     }

     else if (localStorage.getItem('visited') >= myPix.length)

     {

         localStorage.setItem('visited', 0);

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];



     }

     else

     {

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];

         localStorage.setItem('visited', localStorage.getItem('visited') + 1);

     }

}





share|improve this answer























  • After 3rd refresh images stop showing. Please note images sequence should be global.
    – Chaila
    Nov 19 at 12:11










  • @Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
    – Alexandros Bantzos
    Nov 19 at 14:24















up vote
0
down vote













Use local storage to save the data you need [e.g. visited = 3(3rd time the same person visited your website)]



Your js code can be implemented like this:



window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     if (localStorage.getItem('visited') == null)

     {

         document.getElementById("myPicture").src = myPix[0];

         localStorage.setItem('visited', 1);

     }

     else if (localStorage.getItem('visited') >= myPix.length)

     {

         localStorage.setItem('visited', 0);

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];



     }

     else

     {

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];

         localStorage.setItem('visited', localStorage.getItem('visited') + 1);

     }

}





share|improve this answer























  • After 3rd refresh images stop showing. Please note images sequence should be global.
    – Chaila
    Nov 19 at 12:11










  • @Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
    – Alexandros Bantzos
    Nov 19 at 14:24













up vote
0
down vote










up vote
0
down vote









Use local storage to save the data you need [e.g. visited = 3(3rd time the same person visited your website)]



Your js code can be implemented like this:



window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     if (localStorage.getItem('visited') == null)

     {

         document.getElementById("myPicture").src = myPix[0];

         localStorage.setItem('visited', 1);

     }

     else if (localStorage.getItem('visited') >= myPix.length)

     {

         localStorage.setItem('visited', 0);

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];



     }

     else

     {

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];

         localStorage.setItem('visited', localStorage.getItem('visited') + 1);

     }

}





share|improve this answer














Use local storage to save the data you need [e.g. visited = 3(3rd time the same person visited your website)]



Your js code can be implemented like this:



window.onload = choosePic;



var myPix = new Array("https://i.imgur.com/LHtVLbh.jpg", "https://i.imgur.com/2YHazkp.png", "https://i.imgur.com/Uscmgqx.jpg");



function choosePic() {

     if (localStorage.getItem('visited') == null)

     {

         document.getElementById("myPicture").src = myPix[0];

         localStorage.setItem('visited', 1);

     }

     else if (localStorage.getItem('visited') >= myPix.length)

     {

         localStorage.setItem('visited', 0);

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];



     }

     else

     {

         document.getElementById("myPicture").src = myPix[localStorage.getItem('visited')];

         localStorage.setItem('visited', localStorage.getItem('visited') + 1);

     }

}






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 19 at 14:22

























answered Nov 19 at 11:58









Alexandros Bantzos

136




136












  • After 3rd refresh images stop showing. Please note images sequence should be global.
    – Chaila
    Nov 19 at 12:11










  • @Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
    – Alexandros Bantzos
    Nov 19 at 14:24


















  • After 3rd refresh images stop showing. Please note images sequence should be global.
    – Chaila
    Nov 19 at 12:11










  • @Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
    – Alexandros Bantzos
    Nov 19 at 14:24
















After 3rd refresh images stop showing. Please note images sequence should be global.
– Chaila
Nov 19 at 12:11




After 3rd refresh images stop showing. Please note images sequence should be global.
– Chaila
Nov 19 at 12:11












@Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
– Alexandros Bantzos
Nov 19 at 14:24




@Chaila You're right. I made a mistake into the "else if" which the counter were not getting reset in max count. It should work now.
– Alexandros Bantzos
Nov 19 at 14:24


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373686%2fautomatically-load-next-image-from-array-everytime-user-enters-website%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
Read more

Dieringhausen

Image
Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
Read more