That sounds relatively easy.
Have an array of images for each breed, and shuffle the array.
When an image is clicked, show the image that’s at the top of the list then move it to the bottom.
Here’s some example code:
<p>Click dog to show a different dog of the same breed.</p>
<div class="breeds">
<div id="greatdane" class="breed"></div>
<div id="schnauzer" class="breed"></div>
</div>
And the CSS to centre vertically and horizontally:
.breed {
width: 200px;
height: 150px;
border: 1px solid black;
position: relative;
}
img {
max-width: 200px;
max-height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
We want to get the dogs and shuffle them, which should look something like this:
var breeds = {
greatdane: shuffle(getBreeds("greatdane")),
schnauzer: shuffle(getBreeds("schnauzer"))
};
The shuffling can be easily done using a Fisher-Yates shuffle function.
The dogs can be stored in arrays as objects, so that we can keep track of several related pieces of information for each image:
function getBreeds(breedName) {
if (breedName === "greatdane") {
return [
{alt: "great dane 1", src: "http://www.dogbreedinfo.com/images12/GreatDanealmost200%20lbsdogAlemao.JPG"},
...
{alt: "great dane 10", src: "http://www.dogbreedinfo.com/images27/GreatDanePurebredDogJunior8Months2.JPG"}
];
}
if (breedName === "schnauzer") {
return [
{alt: "schnauzer 1", src: "http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_22950_standard-schnauzer.jpg"},
...
{alt: "schnauzer 10", src: "http://www.dogbreedslist.info/uploads/allimg/dog-pictures/Miniature-Schnauzer-3.jpg"}
];
}
}
When it’s time to show a new dog, we’ll get one from the top of the list, show it, then push it back to the bottom of the list:
function showNewDog(container, breed) {
var dog = breeds[breed].shift();
container.innerHTML = "<img alt='" + dog.alt + "' src='" + dog.src + "'>";
breeds[breed].push(dog);
}
When one of the breeds is clicked, we’ll show a new dog:
function initContainer(breedContainer) {
var breed = breedContainer.id;
breedContainer.addEventListener("click", function (evt) {
var container = this;
showNewDog(container, breed);
});
...
}
And we’ll show a dog when the code first runs:
function initContainer(breedContainer) {
var breed = breedContainer.id;
...
showNewDog(breedContainer, breed);
}
And lastly, we’ll get run that initContainer() function on each breed section of the page:
var breedContainers = document.querySelectorAll(".breed");
Array.prototype.forEach.call(breedContainers, initContainer);
And a demo that I’ve put together showing how this all works together in practice.
