Ajuda HTML/Python

[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>