mariz

Boa Tarde pessoal, estou terminando um projeto só falta uma coisa para entregar mas não to conseguindo resolver. é o seguinte eu montei em html/css e programeu em python, na parte de galeria de fotos tem um menu já determinado, que no admin ele escolhe se vai querer categoria 1 , categoria 2, categoria 3 até categoria 9, então ele escolhe a categoria e coloca a foto, até ae tudo bem o meu problema é fazer filtrar quando ele clicar na categoria as fotos da tal categoria, lembrando que o site só tem uma pagina, é daquele tipo que clica e o site roda. Poe favor me ajude segue a parte do site <div class="menu toLeft"> <ul> <li class="oriental toLeft"><p><a href="#">ORIENTAL</a></p></li> <li class="tradicional toLeft"><p><a href="#">TRADICIONAL</a></p></li> <li class="progresso toLeft"><p><a href="#">PROGRESSO</a></p></li> <li class="letras toLeft"><p><a href="#">LETRAS</a></p></li> <li class="tribal toLeft"><p><a href="#">TRIBAL</a></p></li> <li class="cover toLeft"><p><a href="#">COVER UP</a></p></li> <li class="desenhos toLeft"><p><a href="#">DESENHOS</a></p></li> </ul> </div> <div class="galeria"> <ul class="galeria_port"> {% for item in trabalho %} <li class="gal1 toLeft"><a href="{% thumbnail item.img1 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img1 259x143 upscale crop %}"></li> <li class="gal2 toLeft"><a href="{% thumbnail item.img2 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img2 150x233 upscale crop %}"></li> <li class="gal3 toLeft"><a href="{% thumbnail item.img3 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img3 235x233 upscale crop %}"></li> <li class="gal4 toLeft"><a href="{% thumbnail item.img4 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img4 112x233 upscale crop %}"></li> <li class="gal5 toLeft"><a href="{% thumbnail item.img5 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img5 260x143 upscale crop %}"></li> <li class="gal6 toLeft"><a href="{% thumbnail item.img6 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img6 263x198 upscale crop %}"></li> <li class="gal7 toLeft"><a href="{% thumbnail item.img7 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img7 259x270 upscale crop %}"></li> <li class="gal8 toLeft"><a href="{% thumbnail item.img8 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img8 255x137 upscale crop %}"></li> <li class="gal9 toLeft"><a href="{% thumbnail item.img9 800x800 %}" class="ativar_galeria"><img src="{% thumbnail item.img9 255x121 upscale crop %}"></li> {% endfor %} </ul> </div>