Jump to content
Please Use CODE Tags

website 3x3 picture grid, random image with no duplicates?

HeyKitty
By HeyKitty
in Programming
 Share
Posted

I want to add a 3x3 grid of images that'll randomly show images from a folder on my website with no duplicating any of the other shown images.

 

I am no good at Javascript, so this is a bit beyond my level.

 

hoping for a copy/pasta or small editing.

THIS IS MY SUPER TEENY TINY SIGNATURE!

Ain't it just the cutest little signature.

Some would argue it is the cutest little signature ever.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

grab file names, add to an array then random pick, keep a track of what's picked and you're golden. 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, vorticalbox said:

grab file names, add to an array then random pick, keep a track of what's picked and you're golden. 

You make that sound easy, but that is beyond me. I am a basic html/css.

THIS IS MY SUPER TEENY TINY SIGNATURE!

Ain't it just the cutest little signature.

Some would argue it is the cutest little signature ever.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
5 hours ago, HeyKitty said:

I want to add a 3x3 grid of images that'll randomly show images from a folder on my website with no duplicating any of the other shown images.

 

I am no good at Javascript, so this is a bit beyond my level.

 

hoping for a copy/pasta or small editing.

If you want to get images from server using Javascript it's going to be very difficult (or impossible) since Javascript runs on the client side.You could load them using php on page load and then use the array of filenames with numbers to get random values and every time you choose one image, you remove it from the list to not get any duplicates.

 

To get list of files using PHP you could use scandir function (http://php.net/manual/en/function.scandir.php) and then in your html file you could do:

  

<script type="text/javascript">
    var files = <?php echo json_encode(scandir($directoryPath);); ?>;
</script>

and then in your javascript you could loop through: 

//Choose random index
//     Math.random() will give you a random value between 0 and 1
//     Math.random() * files.length will give you a value between 0 and number of files in the directory
//     Math.floor assures that the number is always less than files.length to not go over the number of elements in the array
var chosenIndex = Math.floor(Math.random()*files.length);

//Get filename associated with the index
var chosenFile = files[chosenIndex];

//At this point you have your chosen filename
//[DO SOMETHING WITH THE FILE NAME]

//Remove file from array to not get duplicates
files.Splice(chosenIndex,1);

Note that this is essentially a "Frankenstein" code that may not work as it is and you may change some stuff. It's a basic idea.

Edit: Since you want to reuse the list every couple of seconds to make images change, I would recommend  keeping the list of numbers that have been chosen and checking if new, random number has not been yet chosen in this run than deleting the chosen element of the list.

Try, fail, learn, repeat...

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

alright, let's do it so it's quite simple to reason from the basics:

I assume this images would change every time you open the page so the function you want to use must be defined as the onload attribute of the html body 

<body onload="myOnLoadFunction()">

now, on the html create 9 img tags with the id attribute image1 through image9 and place them on a 3x3 grid

 

Let's go to the javascript part:

You need to store the name of every image so you are able to reference it. The easiest way is to name them img0 through imgN with N being the number for the last image and just make a loop assigning the names 

var i=0
for(i=0;i<numImages;i++){
  listImages.push("img"+i);
}

now you want a function to generate 9 random numbers without repetition. There was a thread in the forum about it a few days ago. Check it out here.

Finally you want to set those images in the img tags you defined earlier. To change the image in a img tag you need to do 

document.getElementById("img tag id").setAttribute("src","new image name");

 

This should be everything you need to reason the logic into your program

The best way to measure the quality of a piece of code is "Oh F*** "s per line

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
6 minutes ago, espurritado said:

alright, let's do it so it's quite simple to reason from the basics:

I assume this images would change every time you open the page so the function you want to use must be defined as the onload attribute of the html body 


<body onload="myOnLoadFunction()">

now, on the html create 9 img tags with the id attribute image1 through image9 and place them on a 3x3 grid

 

Let's go to the javascript part:

You need to store the name of every image so you are able to reference it. The easiest way is to name them img0 through imgN with N being the number for the last image and just make a loop assigning the names 


var i=0
for(i=0;i<numImages;i++){
  listImages.push("img"+i);
}

now you want a function to generate 9 random numbers without repetition. There was a thread in the forum about it a few days ago. Check it out here.

Finally you want to set those images in the img tags you defined earlier. To change the image in a img tag you need to do 


document.getElementById("img tag id").setAttribute("src","new image name");

 

This should be everything you need to reason the logic into your program

This, I may be able to work with.  I am wanting it to swap out every few seconds rather than on page load.  lets see if I can get this to work.

THIS IS MY SUPER TEENY TINY SIGNATURE!

Ain't it just the cutest little signature.

Some would argue it is the cutest little signature ever.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 hour ago, zwirek2201 said:

If you want to get images from server using Javascript it's going to be very difficult (or impossible) since Javascript runs on the client

why not set the name 1.jpg, ...... 12.jpg. Then use that to load the images. 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 minutes ago, vorticalbox said:

why not set the name 1.jpg, ...... 12.jpg. Then use that to load the images. 

Well you could do it, but you have to specify the file names very carefully so there are no gaps and it would be difficult to reuse these files later. Also, how do you get the numer of files in the directory to generate the random number accordingly? What happens if you add an image to the directory? Do you have to change the number? 

 

While it probably would work, it would be quite difficult to maintain (especially the numer of files in the directory). I posted a code that downloads all of the files in specified directory and uses them so there's virtually no maintenance. Also, it doesn't change file names so you can reuse them as you wish. 

Try, fail, learn, repeat...

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 hour ago, espurritado said:

alright, let's do it so it's quite simple to reason from the basics:

I assume this images would change every time you open the page so the function you want to use must be defined as the onload attribute of the html body 


<body onload="myOnLoadFunction()">

now, on the html create 9 img tags with the id attribute image1 through image9 and place them on a 3x3 grid

 

Let's go to the javascript part:

You need to store the name of every image so you are able to reference it. The easiest way is to name them img0 through imgN with N being the number for the last image and just make a loop assigning the names 


var i=0
for(i=0;i<numImages;i++){
  listImages.push("img"+i);
}

now you want a function to generate 9 random numbers without repetition. There was a thread in the forum about it a few days ago. Check it out here.

Finally you want to set those images in the img tags you defined earlier. To change the image in a img tag you need to do 


document.getElementById("img tag id").setAttribute("src","new image name");

 

This should be everything you need to reason the logic into your program

How do you get the numer of files in the folder? What would happen if you added a file to the folder? Would you have to change the number manually? 

Try, fail, learn, repeat...

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 hours ago, zwirek2201 said:

Well you could do it, but you have to specify the file names very carefully so there are no gaps and it would be difficult to reuse these files later. Also, how do you get the numer of files in the directory to generate the random number accordingly? What happens if you add an image to the directory? Do you have to change the number? 

yes you would need to keep them all named and manually change the numbers but it would work assuming you're not adding any more pictures.

 

that php seems a a simple and better solution.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×