Interação texto-variável-pasta

[RodrigoFavarete 0]

Olá a todos,
Preciso criar uma função que me ajude a montar uma galeria com centenas de imagens, preciso inserir cada uma dentro do corpo de um site e é muito trabalhoso fazer isso com cada uma das imagens - não posso usar banco de dados e .php.
A princípio estou usando o trecho de código seguinte para cada imagem, onde substituo a parte VARIÁVEL pelo nome da imagem, para depois copiar e colar esse mesmo trecho de código e substituir novamente a VARIÁVEL pelo nome de outra imagem e assim por diante.

<div class="three columns category">

<h5>VARIÁVEL</h5>

<p>

<!-- MAIS INFORMAÇÕES --->

</p>

<div class="portofoliothumb">

<div class="portofoliothumboverlay fouroverlay">

<div class="viewgallery fourgallery">

</div>

<div class="inner fourdetail">

<a data-gal="prettyPhoto[gallery]" href="images/pasta1/VARIÁVEL.jpg" class="projectdetail">+ Detalhes</a>

</div>

</div>

<img src="images/pasta1/VARIÁVEL.jpg" class="fourimage" alt=""/>

</div>

</div>

*O nome da mesma imagem nas três repetições da VARIÁVEL.


Então preciso que a função faça o seguinte:

1- Copie todos os nomes das imagens dentro de uma determinada pasta;
2- Substitua a VARIÁVEL pelo nome da primeira imagem, depois use o mesmo trecho de código para substituir a VARIÁVEL pelo nome da imagem seguinte e assim por diante;
3- Mostrar os resultados na tela, por exemplo, se for referente a uma pasta com quatro imagens, o trecho de código acima apareceria quatro vezes, cada uma das vezes com a VARIÁVEL mostrando o nome de cada uma das imagens da pasta. Daí eu poderia copiar pro HTML sem precisar substituir o nome das imagens "na mão" dentro do trecho de código acima. Apareceria como no trecho a seguir:

<div class="three columns category">

<h5>IMG01</h5>

<p>

<!-- MAIS INFORMAÇÕES --->

</p>

<div class="portofoliothumb">

<div class="portofoliothumboverlay fouroverlay">

<div class="viewgallery fourgallery">

</div>

<div class="inner fourdetail">

<a data-gal="prettyPhoto[gallery]" href="images/pasta1/IMG01.jpg" class="projectdetail">+ Detalhes</a>

</div>

</div>

<img src="images/pasta1/IMG01.jpg" class="fourimage" alt=""/>

</div>

</div>

<div class="three columns category">

<h5>IMG02</h5>

<p>

<!-- MAIS INFORMAÇÕES --->

</p>

<div class="portofoliothumb">

<div class="portofoliothumboverlay fouroverlay">

<div class="viewgallery fourgallery">

</div>

<div class="inner fourdetail">

<a data-gal="prettyPhoto[gallery]" href="images/pasta1/IMG02.jpg" class="projectdetail">+ Detalhes</a>

</div>

</div>

<img src="images/pasta1/IMG02.jpg" class="fourimage" alt=""/>

</div>

</div>

 

<div class="three columns category">

<h5>IMG03</h5>

<p>

<!-- MAIS INFORMAÇÕES --->

</p>

<div class="portofoliothumb">

<div class="portofoliothumboverlay fouroverlay">

<div class="viewgallery fourgallery">

</div>

<div class="inner fourdetail">

<a data-gal="prettyPhoto[gallery]" href="images/pasta1/IMG03.jpg" class="projectdetail">+ Detalhes</a>

</div>

</div>

<img src="images/pasta1/IMG03.jpg" class="fourimage" alt=""/>

</div>

</div>

<div class="three columns category">

<h5>IMG04</h5>

<p>

<!-- MAIS INFORMAÇÕES --->

</p>

<div class="portofoliothumb">

<div class="portofoliothumboverlay fouroverlay">

<div class="viewgallery fourgallery">

</div>

<div class="inner fourdetail">

<a data-gal="prettyPhoto[gallery]" href="images/pasta1/IMG04.jpg" class="projectdetail">+ Detalhes</a>

</div>

</div>

<img src="images/pasta1/IMG04.jpg" class="fourimage" alt=""/>

</div>

</div>

Tenho pouco conhecimento de Java, mas pela lógica não me parece difícil fazer algo assim, só não sei por onde começar, então qualquer ajuda será muito bem vinda. =)

[reebr 94]

Com jsp seria assim:

<%for(int i = 0; i < 4; i++){ %> <!-- abre o loop -->
<%String string = "img"+(i+1);%> <!-- cria a variável que vai substituir -->
   <div class="three columns category">
      <h5><%=string%></h5> <!-- variável -->
      <p>
           <!-- MAIS INFORMAÇÕES --->
      </p>
      <div class="portofoliothumb">
         <div class="portofoliothumboverlay fouroverlay">
             <div class="viewgallery fourgallery">
             </div>
             <div class="inner fourdetail">
                <a data-gal="prettyPhoto[gallery]" href="images/pasta1/<%=string%>.jpg" class="projectdetail">+ Detalhes</a>
             </div>
         </div>
         <img src="images/pasta1/<%=string%>.jpg" class="fourimage" alt=""/>
      </div>
   </div>
<%}%> <!-- fecha o loop -->

[RodrigoFavarete 0]

Muito obrigado, rnxn. Existe alguma forma de, no lugar da string substituindo os números em sequência nas imagens, o código puxar pelos nomes das imagens? Por exemplo, se eu tiver uma "pasta1", com três imagens dentro: "carro.jpg", "capacete.jpg", "cabrito.jpg". O código identificar esses nomes dentro da pasta e me devolver com eles quando eu rodasse o jsp?

Obs: O mesmo caso acima, mas com nomes diferentes nas imagens e não mais "img01.jpg","img02.jpg","img03.jpg",etc.

[reebr 94]

Dá uma olhada aqui:

http://pt.stackoverflow.com/questions/20930/listar-arquivos-do-diret%C3%B3rio-e-subdiret%C3%B3rio-com-listfiles