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







-

這個網誌中的熱門文章

Tangent Lines Diagram Along Smooth Curve

圖片
7 1 I am trying to replicate a diagram and have a minimal example. I don't know how to add additional tangents between the specified points and preserve smoothness. documentclass{article} usepackage{tikz} usetikzlibrary{calc,intersections} begin{document} begin{tikzpicture} % Axes draw [->, name path=x] (-1,0) -- (11,0) node [right] {$x$}; draw [->] (0,-1) -- (0,6) node [above] {$y$}; % Origin node at (0,0) [below left] {$0$}; % Points coordinate (start) at (1,-0.8); coordinate (c1) at (3,3); coordinate (c2) at (5.5,1.5); coordinate (c3) at (8,4); coordinate (end) at (10.5,-0.8); % show the points foreach n in {start,c1,c2,c3,end} fill [black] (n) circle (2pt) node [below] {}; % join the coordinates draw [thick,name path=curve] (start) to[out=70,in=180] (c1) to[out=0,in=180]
閱讀完整內容

Yusuf al-Mu'taman ibn Hud

圖片
Main article: Taifa of Zaragoza Al-Mu'taman Ruler of Zaragoza Reign 1081–1085 Predecessor Ahmad al-Muqtadir Successor Al-Mustain II Born Zaragoza Died 1085 Full name Yusuf ibn Ahmad al-Mu'taman ibn Hūd House Banu Hud Yusuf ibn Ahmad al-Mu'taman ibn Hūd (Arabic: المؤتمن بالله يوسف إبن أحمد إبن هود ‎, al-Mutaman bi l-Lah , died c. 1085) was the third king of the Banu Hud dynasty who ruled over the Taifa of Zaragoza from 1081 to 1085. Yusuf al-Mutaman reigned during the height of power of Muslim Zaragoza , following the thriving period of his father Ahmad al-Muqtadir. He continued his father's efforts and created around him a court of intellectuals, living in the beautiful palace of Aljafería, nicknamed as "the palace of joy". Al-Mu'taman was also a scholarly king and a patron of science, philosophy and arts. As an example of a wise king, he knew astrology, philosophy, and especially mathematics, a discipline in which
閱讀完整內容

Zucchini

圖片
This article is about the vegetable. For other uses, see Zucchini (disambiguation). Zucchini (courgette) A striped and a uniform color zucchini Genus Cucurbita Species Cucurbita pepo Origin 19th century northern Italy The zucchini ( / z uː ˈ k iː n i / , American English) or courgette ( / k ʊər ˈ ʒ ɛ t / , British English) is a summer squash which can reach nearly 1 metre (100 cm; 39 in) in length, but is usually harvested when still immature at about 15 to 25 cm (6 to 10 in). [1] A zucchini is a thin-skinned cultivar of what in Britain and Ireland is referred to as a marrow. [2] [3] In South Africa, a zucchini is known as a baby marrow. Along with certain other squashes and pumpkins, the zucchini belongs to the species Cucurbita pepo . It can be dark or light green. A related hybrid, the golden zucchini, is a deep yellow or orange color. [4] In a culinary context, the zucchini is treated as a vegetable; it is usually cooked and presented as a savory dish o
閱讀完整內容