onlyforbopi
9/24/2018 - 12:41 PM

JS.Template.PictureGallery.v4.js

JS.Template.PictureGallery.v4.js

style.css
content_copyfile_download
main {
    display: flex;
    flex-flow: row wrap;

}

nav.pictures {
    display: flex;
    flex-flow: column nowrap;
}

img.thumb {
	padding : 3px;
	border : solid 4px black;
	margin : 5px;
    box-shadow : 2px 2px 5px grey;
    flex: 1 1 auto;
}

article {
    flex: 1 1 auto;
}

article > * {
    padding: 20px;
}
script.js
content_copyfile_download
let myPicturesArray = [
    {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
    },
    {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "http://placehold.it/600/771796",
    "thumbnailUrl": "http://placehold.it/150/771796"
    },
    {
    "albumId": 2,
    "id": 51,
    "title": "non sunt voluptatem placeat consequuntur rem incidunt",
    "url": "http://placehold.it/600/8e973b",
    "thumbnailUrl": "http://placehold.it/150/8e973b"
    },
    {
    "albumId": 2,
    "id": 52,
    "title": "eveniet pariatur quia nobis reiciendis laboriosam ea",
    "url": "http://placehold.it/600/121fa4",
    "thumbnailUrl": "http://placehold.it/150/121fa4"
    },
    {
    "albumId": 3,
    "id": 127,
    "title": "magnam quia sed aspernatur",
    "url": "http://placehold.it/600/74456b",
    "thumbnailUrl": "http://placehold.it/150/74456b"
    },
    {
    "albumId": 3,
    "id": 128,
    "title": "est facere ut nam repellat numquam quia quia eos",
    "url": "http://placehold.it/600/b0931d",
    "thumbnailUrl": "http://placehold.it/150/b0931d"
    }
    ];
 
 let myAlbumArray=[];   

    window.addEventListener('load', init);

    function init(){
    // Display picures
    myPicturesArray.forEach(function(currentImage) {
        let image = document.createElement("img");
        image.src = currentImage.thumbnailUrl;
        image.alt = currentImage.title;
        image.className += "thumb";
        image.className += " album"+currentImage.albumId;
        image.addEventListener('click', function(evt){showpic(evt,currentImage)});
        console.log(image);
        document.querySelector("nav.pictures").append(image);
        myAlbumArray.push(currentImage.albumId);
        console.log(myAlbumArray);
     });
         
    let myAlbums = sort_unique(myAlbumArray);
    
myAlbums.forEach(function(currentButtonId){
let button = document.createElement("button");
button.id = "album" + currentButtonId;
button.textContent = "album" + currentButtonId;
button.addEventListener('click', function(evt){filterpic(evt,currentButtonId)});
console.log(button);
document.querySelector("header").append(button);
});

}

function showpic(evt, selectedImage) {
    let bigimage = document.createElement("img");
    bigimage.src = selectedImage.url;
    bigimage.alt = selectedImage.title;
    console.log(bigimage);
    document.querySelector("article").innerHTML = "";
    document.querySelector("article").appendChild(bigimage);
}

function filterpic(evt, selectedAlbum) {
var albums = document.querySelectorAll("img.thumb:not(.album"+selectedAlbum+")");
for (var i = 0; i < albums.length; i++) {
    albums[i].style.display = "none";
}
}

/* slacksort */
function sort_unique(arr) {
    if (arr.length === 0) return arr;
    arr = arr.sort(function (a, b) { return a*1 - b*1; });
    var ret = [arr[0]];
    for (var i = 1; i < arr.length; i++) { //Start loop at 1: arr[0] can never be a duplicate
      if (arr[i-1] !== arr[i]) {
        ret.push(arr[i]);
      }
    }
    return ret;
  }
js-template-picturegallery-v4-js.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Template.PictureGallery.v4.js

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Module 3 optional project = picture albums</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    
	<header>
        <h1>Albums</h1>
        <nav class="albums"></nav>
    </header>
<main>
	<nav class="pictures">
	</nav>
	<article>
        placeholder
    </article>
</main>
</body>
</html>