% layout 'default', metakeywords => 'fotos, interior, exterior, banheiro, quarto, natureza, cachoeira, serra, tranquilo, vista, cozinha, cama, sofa', metadescription => 'Galeria de fotos mostrando o Interior da Casa e o Sítio';
<!-- creates all modal thumbs and fotos links which will jquery-auto-adjusted in function of viewport size -->
%foreach my $name (keys %{$thumbs}){
	%for(my $i=0; $i<scalar(@{$thumbs->{$name}}); $i++){
		%my $index = sprintf("%03d",$i+1);
		%my $prev = sprintf("%03d",$i); if($prev==0){ $prev = sprintf("%03d",scalar(@{$thumbs->{$name}})); }
		%my $next = sprintf("%03d",$i+2); if($next==scalar(@{$thumbs->{$name}})+1){ $next = '001'; }
    	<a class="openModal float" href="#<%=$name.$index%>">
    		<img src="1x1.png" data-name="<%=$name%>" data-index="<%=$index%>" data-widths="<%=join(',',@{$thumbs->{$name}->[$i]->{w}})%>" data-heights="<%=join(',',@{$thumbs->{$name}->[$i]->{h}})%>" data-format="jpg" data-prev="<%=$prev%>" data-next="<%=$next%>" alt="<%=$fotos->{$name}->[$i]->{caption}%>"/>
    	</a>
		<aside id="<%=$name.$index%>" class="modal">
			<div>
				<img class="loading" alt="carregando..." src="loadingcircle-48x48.gif"/>
				<img class="foto" src="1x1.png" data-name="<%=$name%>" data-index="<%=$index%>" data-widths="<%=join(',',@{$fotos->{$name}->[$i]->{w}})%>" data-heights="<%=join(',',@{$fotos->{$name}->[$i]->{h}})%>" data-format="jpg" data-prev="<%=$prev%>" data-next="<%=$next%>" alt="<%=$fotos->{$name}->[$i]->{caption}%>"/>
				<div class="caption"><p><%=$fotos->{$name}->[$i]->{caption}%></p></div>
				<a href="#close" title="Fechar"></a>
				<a href="#next" title="Próxima"></a>
				<a href="#prev" title="Anterior"></a>
			</div>
		</aside>
	%}
%}