Javascript - Galerie d'images interactive et responsive

Bonjour,

J'ai besoin d'aide quant à créer pour mon site internet une galerie d'images (qui sont aussi des liens) qui soit responsive et adaptée à tous types d'écrans mais aussi que l'on peut trier via un Javascript parmi 4 boutons qui indiquent leur spécificité (le 5ème faisant revenir l'intrégralité des images "all").
Voici mon HTML contenant un seul thumbnail pour le moment et la navigation qui sont pour le moment des liens qui redirigeaient sur d'autres pages avec les thumbnails déjà triées :

<div class="nav">
        
                <a href="work_photos.html">photos</a>
                <a href="work_commercials.html">commercials</a>
                <a href="work_musicvideos.html">music&nbspvideos</a>
                <a href="work_features.html">features</a>
                <a href="work.html">all</a>

            </div>

<div class="grid">

                <div class="thumbnail" style="top: 0px; left: 50%;">
                <a href="projectsilence.html"><img src="silence.png" style="width: 600px;">
                <div class="overlay"><h2 style="font-weight: 550; font-size: 45px;">SILENCE</h2></div></a>
                </div>
                

          </div>

Et voici mon CSS pour ce grid et ce thumbnail :

.grid
{
	position: relative;
    text-align: center;
	min-height: 1200px;
	max-width: 100%;
	margin-top: 150px;
	width: 100%;
	border solid black 1px;
}

.thumbnail
{
	position: absolute;
	display: inline-block;
	max-width: 600px;
	transition: 1s;
    transform: translate(-50%, -0%);
	margin: 30px 20px;
	font-family: serif;
}

.overlay
{
	position: relative;
	padding: 20px 15px 20px;
	text-align: center;
	margin-top: -40px;
	opacity: 0;
	letter-spacing: 5px;
	transition: 0.5s;
}

Merci pour votre aide je ne suis pas encore très à l'aise avec le code Java !
Modifié par Jazzma (20 Jul 2018 - 13:49)

Salut,

Si tu n'as pas "fortes" notions en JS (du moins, pour gérer le DOM), je ne te recommande pas de concevoir une galerie dynamique et filtrable toi-même. Cela inclut de forte notions en JS (et aussi de savoir bien structurer son CSS pour les cas responsive).

Il y a des librairie déjà toutes prête que tu peux apprendre à configurer : https://isotope.metafizzy.co/

En plus d'être une galerie filtrable et responsive, celle-ci a aussi la vocation d'être mansory.

Aussi, il ne faut pas confondre Java et Javascript, ce sont deux langages bien différents et qui n'ont ni la même cible, ni la même finalité.

Merci beaucoup !

Effectivement je pense que c'est cela dont j'ai besoin des templates prêts à l'emploi. Est-ce qu'il y aurait d'autres sites sur lesquels je pourrai en trouver ?

Et est-ce vraiment si compliqué de coder en Javascript (et pas Java) ce genre de sélection ?