Hej,
Na początek musisz w html i css (najlepiej) zrobić sobie takiego grida jak na pierwszym zdjeciu. Mozesz użyć bootstrapa, flexboxa lub css grida i polecam do tego strony css grida i frog flexbox (jakos tak). Nastepnie zrób clickEvent za pomocą addEventListner i napjsz funkcję która wlaczy drugi wcześniej przygotowany widok tez w html i css :) Używaj display propercji w css aby niektóre rzeczy pokazywać lub zasłaniać. Potem za pomocą kolejnego ClickEventa wybieraj ze zdjęć niżej w tych miniaturkach zdjęcie za pomocą this i wyswietlaj w tym wiekszym kontenerze za pomocą nadpisywania zmiennej trzymającej ścieżkę do zdjęcia. Myślę ze to Ci sie przyda, pozdro.
PS. Uzywaj balsamiq do takich wireframow jak wyżej ;)