Automatically load next image from array everytime user enters website












0















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?

    – Adrian Pop
    Nov 19 '18 at 11:32











  • Use localstorage.

    – Jestin Sebastian
    Nov 19 '18 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 '18 at 11:42
















0















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?

    – Adrian Pop
    Nov 19 '18 at 11:32











  • Use localstorage.

    – Jestin Sebastian
    Nov 19 '18 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 '18 at 11:42














0












0








0








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 '18 at 11:39







Chaila

















asked Nov 19 '18 at 11:29









ChailaChaila

53




53













  • 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?

    – Adrian Pop
    Nov 19 '18 at 11:32











  • Use localstorage.

    – Jestin Sebastian
    Nov 19 '18 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 '18 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?

    – Adrian Pop
    Nov 19 '18 at 11:32











  • Use localstorage.

    – Jestin Sebastian
    Nov 19 '18 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 '18 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?

– Adrian Pop
Nov 19 '18 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?

– Adrian Pop
Nov 19 '18 at 11:32













Use localstorage.

– Jestin Sebastian
Nov 19 '18 at 11:36





Use localstorage.

– Jestin Sebastian
Nov 19 '18 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 '18 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 '18 at 11:42












3 Answers
3






active

oldest

votes


















0














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 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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.

    – Adrian Pop
    Nov 19 '18 at 12:13



















0














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.

    – Adrian Pop
    Nov 19 '18 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 '18 at 11:50











  • Sorry a mistake white testing, updated

    – Jestin Sebastian
    Nov 19 '18 at 11:51











  • @Chaila It should work now.

    – Jestin Sebastian
    Nov 19 '18 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 '18 at 12:07



















0














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 '18 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 '18 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',
autoActivateHeartbeat: false,
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









0














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 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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.

    – Adrian Pop
    Nov 19 '18 at 12:13
















0














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 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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.

    – Adrian Pop
    Nov 19 '18 at 12:13














0












0








0







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 '18 at 11:49

























answered Nov 19 '18 at 11:44









Adrian PopAdrian Pop

1,11011121




1,11011121













  • 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 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 '18 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.

– Adrian Pop
Nov 19 '18 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.

– Adrian Pop
Nov 19 '18 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 '18 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 '18 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.

– Adrian Pop
Nov 19 '18 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.

– Adrian Pop
Nov 19 '18 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.

– Adrian Pop
Nov 19 '18 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.

– Adrian Pop
Nov 19 '18 at 12:13













0














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.

    – Adrian Pop
    Nov 19 '18 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 '18 at 11:50











  • Sorry a mistake white testing, updated

    – Jestin Sebastian
    Nov 19 '18 at 11:51











  • @Chaila It should work now.

    – Jestin Sebastian
    Nov 19 '18 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 '18 at 12:07
















0














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.

    – Adrian Pop
    Nov 19 '18 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 '18 at 11:50











  • Sorry a mistake white testing, updated

    – Jestin Sebastian
    Nov 19 '18 at 11:51











  • @Chaila It should work now.

    – Jestin Sebastian
    Nov 19 '18 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 '18 at 12:07














0












0








0







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 '18 at 11:51

























answered Nov 19 '18 at 11:43









Jestin SebastianJestin Sebastian

363110




363110













  • The last line, document.getElementById("myPicture").src = myPix[local_item]; is never going to be executed since above is a return statement.

    – Adrian Pop
    Nov 19 '18 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 '18 at 11:50











  • Sorry a mistake white testing, updated

    – Jestin Sebastian
    Nov 19 '18 at 11:51











  • @Chaila It should work now.

    – Jestin Sebastian
    Nov 19 '18 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 '18 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.

    – Adrian Pop
    Nov 19 '18 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 '18 at 11:50











  • Sorry a mistake white testing, updated

    – Jestin Sebastian
    Nov 19 '18 at 11:51











  • @Chaila It should work now.

    – Jestin Sebastian
    Nov 19 '18 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 '18 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.

– Adrian Pop
Nov 19 '18 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.

– Adrian Pop
Nov 19 '18 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 '18 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 '18 at 11:50













Sorry a mistake white testing, updated

– Jestin Sebastian
Nov 19 '18 at 11:51





Sorry a mistake white testing, updated

– Jestin Sebastian
Nov 19 '18 at 11:51













@Chaila It should work now.

– Jestin Sebastian
Nov 19 '18 at 12:02







@Chaila It should work now.

– Jestin Sebastian
Nov 19 '18 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 '18 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 '18 at 12:07











0














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 '18 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 '18 at 14:24
















0














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 '18 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 '18 at 14:24














0












0








0







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 '18 at 14:22

























answered Nov 19 '18 at 11:58









Alexandros BantzosAlexandros Bantzos

428




428













  • After 3rd refresh images stop showing. Please note images sequence should be global.

    – Chaila
    Nov 19 '18 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 '18 at 14:24



















  • After 3rd refresh images stop showing. Please note images sequence should be global.

    – Chaila
    Nov 19 '18 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 '18 at 14:24

















After 3rd refresh images stop showing. Please note images sequence should be global.

– Chaila
Nov 19 '18 at 12:11





After 3rd refresh images stop showing. Please note images sequence should be global.

– Chaila
Nov 19 '18 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 '18 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 '18 at 14:24


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




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







-

這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

圖片
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I'm trying to build a Chat app UI, the idea of the Layout was pretty simple: When the input bar is focused, keyboard show up and "push" up the chat bar, as it's a grid, the ListView will resize to fit the screen: I update the input bar's margin to "push" it up: NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey)); CGSize keyboardSize = result.RectangleFValue.Size; if (Element != null){ Element.Margin = new Thickness(0, 0, 0,keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated } And this is ...
閱讀完整內容

Post-Redirect-Get with Spring WebFlux and Thymeleaf

圖片
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 2 Can someone explain to me how to implement the post-redirect-get pattern in Spring WebFlux and Thymeleaf? What subscribes on the database save method? @GetMapping("/register") public String showRegisterForm(Model model) { model.addAttribute("user", new User()); return "register"; } @PostMapping public String processRegisterForm(@Valid User user, BindingResult bindingResult) { if (bindingResult.hasErrors()) { return "register"; } else { userRepository.save(user); //what subscribes on this? //how to redirect on e.g. "/login"? ...
閱讀完整內容

Anylogic : not able to use stopDelay()

圖片
-2 I am building a railway station model. I want a train to depart when I click a button. I want to call stopDelay() for that but I am not sure how to do that and from which place. anylogic share | improve this question asked Nov 23 '18 at 10:12 Anupam Singh Anupam Singh 1 Hi Anupam, welcome to SOF. Please check how to ask good questions, see link below. Your question is...
閱讀完整內容