[Resolvido] PHP + LightBox

[Stevanato 0]

Bom não sei se aqui é o lugar certo, mas vamos la.

Gostaria de sabe como faço pra por exemplo:

 

tenho uma imagem (link), ae quando clico nessa imagem ela abre com o lightbox e tipo ja ler todas as fotos que tem dentro da pasta pra ir passando pra proxima ou anterior. Bom vou posta um link com o exemplo mais ou menos.

 

Exemplo 01 clica na imagem "TELAS"

 

+/- assim tipo uma imagem sendo como "categoria".

 

bom não sei se deu pra entender, mas desde ja obrigado!

[William Bruno 1501]

para ler as imagens da pasta, você pode usar um glob() do php.

Faça o HTML normal.. como se fosse exibir uma album de fotos.

 

Esconda as miniaturas com css, e pronto. você terá o seu link que exibe "toda a pasta".

[Stevanato 0]

eu so leigo de tudo nessa parte cara, poderia me dar um exemplo ou alguma referencia.

obriagdo, pela coompressão.

[William Bruno 1501]

Também já fui "leigo". Comece do básico.

 

Faça uma página .html, que abra lightbox. Com um monte de imagens sendo puxadas "na mão", ou seja, você digitando o link delas.

Depois disso podemos prosseguir.

 

Entendeu ? faça o que você quer, estático. Depois disso feito, adicionaremos o php.

[Stevanato 0]

bom eu tenho montado +/- ...

<div id="CONTEUDO">
	<div class="thumb"><a href="imagens/obras/01/JP01.jpg" rel="lightbox[roadtrip]"><img src="thumb.php?img=imagens/obras/01/JP01.jpg" /></a></div>
	<div class="thumb"><a href="imagens/obras/01/JP02.jpg" rel="lightbox[roadtrip]"><img src="thumb.php?img=imagens/obras/01/JP02.jpg" /></a></div>
	<div class="clear"></div>
</div>

 

que nem ae ele só "mostra" as duas imagens que tem ae.

[William Bruno 1501]

Ok.

 

Agora para mostrar o restante da pasta:

<div id="CONTEUDO">
<?php
  foreach (glob("imagens/obras/01/*.jpg") as $arquivo) {
 {  
?>
               <div class="thumb"><a href="imagens/obras/01/<?php echo $arquivo; ?>" rel="lightbox[roadtrip]"><img src="thumb.php?img=imagens/obras/01/<?php echo $arquivo; ?>" /></a></div>

<?php } ?>
               <div class="clear"></div>
       </div>

Algo assim, entendeu ?

[Stevanato 0]

eu até entendi, mas que nem no caso ae ele vai lista todo conteudo da pasta e imprimi na tela né ?!

é que acho que não me expressei direito por isso postei o link acima...

que nem no caso era pra "carregar" quando eu abrisse a primeira imagem ela chamace as outras pra "div" do lightbox...

[William Bruno 1501]

eu até entendi, mas que nem no caso ae ele vai lista todo conteudo da pasta e imprimi na tela né ?!

sim, ai se você não quiser que apareça na tela, você esconde.

Funcionará da forma que você quer.

 

Aparece apenas uma imagem pro usuário, e qndo ele clica, ele navega por todas.

Só que no HTML estarão todas disponíveis, entendeu ?

 

 

ir carregando sobdemanda, ao clicar no lightbox, é um pouco mais complicado. Por isso sugeri essa forma básica e funcional.

 

<div id="CONTEUDO">
<?php
  $i = 0;
  foreach (glob("imagens/obras/01/*.jpg") as $arquivo) {
 {
    $class =  $i>=1 ? ' style="display: none;"' : '';
?>
               <div class="thumb"<?php echo $class; ?>><a href="imagens/obras/01/<?php echo $arquivo; ?>" rel="lightbox[roadtrip]"><img src="thumb.php?img=imagens/obras/01/<?php echo $arquivo; ?>" /></a></div>

<?php 
       $i++;
   }
?>
               <div class="clear"></div>
       </div>

Resolve ?

[Stevanato 0]

hummm é bem isso mesmo.

só que me fala uma coisa, que nem se eu cria tipo uma outra pasta "02" e assim por diante, pra cada link tem que fazer esse mesmo código ? ou tem como "resumir" idependente da quantidade de pasta e link.

 

desde ja obrigado!

[Stevanato 0]

é infezlismente do geito que falei ae em cima não deu...

ele pega todas as imagens junto mesmo mudando a pasta de 01 pra o2 ...

 

bom mesmo assim obrigado pela atenção e ajuda.

[William Bruno 1501]

ele pega todas as imagens junto mesmo mudando a pasta de 01 pra o2 ...

isso você vai controlar no javascript.

 

Diferenciando uma "galeria" de outra.

 

pra cada link tem que fazer esse mesmo código ?

No php sim, você precisará de uma rotina dessa com o foreach() para cada pasta que você tiver.

 

 

 

Para "separar" as galerias, ai você faz com javascript.

[Stevanato 0]

então porque eu fiz assim ó

<div id="CONTEUDO">
	<h1>portifólio</h1>
	<p><?php echo $portifolio_texto; ?></p>
	<?php
		$i = 0;
		foreach (glob("imagens/obras/01/*.jpg") as $arquivo1) {
			$class =  $i>=1 ? 'style="display: none;"':'';
	?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $arquivo1; ?>" rel="lightbox[roadtrip]"><img src="thumb.php?img=<?php echo $arquivo1; ?>" /></a></div>
	<?php $i++;  } ?>
	<?php
		$i = 0;
		foreach (glob("imagens/obras/02/*.jpg") as $arquivo2) {
			$class =  $i>=1 ? 'style="display: none;"':'';
	?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $arquivo2; ?>" rel="lightbox[roadtrip]"><img src="thumb.php?img=<?php echo $arquivo2; ?>" /></a></div>
	<?php $i++;  } ?>
	<div class="clear"></div>
</div>

 

ae o que acontece o "Lightbox" le o montante de fotos das pastas, se uma tem 04 a outra 03 ele mostra as 07...

é porque ele le as divs "escondidas"...

ae eu to tentando "separar"...

[William Bruno 1501]

        <div id="CONTEUDO">
               <h1>portifólio</h1>
               <p><?php echo $portifolio_texto; ?></p>
               <?php
                       $i = 0;
                       foreach (glob("imagens/obras/01/*.jpg") as $arquivo1) {
                               $class =  $i>=1 ? 'style="display: none;"':'';
               ?>
                       <div class="thumb" <?php echo $class; ?>><a href="<?php echo $arquivo1; ?>" rel="lightbox[roadtrip]"><img src="thumb.php?img=<?php echo $arquivo1; ?>" /></a></div>
               <?php $i++;  } ?>
               <?php
                       $i = 0;
                       foreach (glob("imagens/obras/02/*.jpg") as $arquivo2) {
                               $class =  $i>=1 ? 'style="display: none;"':'';
               ?>
                       <div class="thumb" <?php echo $class; ?>><a href="<?php echo $arquivo2; ?>" rel="lightbox[roadtrip2]"><img src="thumb.php?img=<?php echo $arquivo2; ?>" /></a></div>
               <?php $i++;  } ?>
               <div class="clear"></div>
       </div>

entendeu?

 

você separa informando o rel diferente:

rel="lightbox[roadtrip]"

e

rel="lightbox[roadtrip2]"

 

 

viu ?

[Stevanato 0]

entende eu até tendi,

vo tenta acha aqi no script pra ver como posso mudar

 

obrigado!

[William Bruno 1501]

bastava aplicar o código que sugeri acima.

 

testou o html + php q coloquei ali ?

[Stevanato 0]

é eu vi...

deu certo aqui...

falta de atenção por alguns segundos...

 

obrigadão mesmo cara valeu.

 

Obs. isso não tem como simplificar né assim algo mais simples ?

mas mesmo assim valeu de coração.

[William Bruno 1501]

Depende.. oque você está achando complicado ?

oque você quer simplificar exatamente ?

[Stevanato 0]

boa tarde,

então bruno o que eu tava pensando é o seguinte desse geito ae quanto mais foto for colocando mais div fica "carregada" na pagina isso não sobrecarrega ?

e outra coisa cada pasta adicionado é aquela linha de código isso tbm vai ficar enorme daque a poco.

existe alguma outra forma de fazer, usando banco de dados ou um código "unico" num sei...

ou você acha que não avera problema de sobrecarregar ou não tem outra solução ?

 

desde ja obrigado!

[William Bruno 1501]

não sei a sua necessidade cara.. mas fica pesado apenas no download inicial.

Depois q carrega tudo, será bem rápido.

 

Depende doque você precisa, de qnto de performance você precisa, de qntas fotos pretende trazer...

[Stevanato 0]

william

bom o que "quero" tenho aqui é o seguinte...

é uma pasta chamada "imagens" dentro dessa pasta tem outras tipo "i01", "i02"... e assim vai.

cada pasta contem varias imagens de "obras/casas" de como são feitas do começo ao fim.

tipo cada pasta é um "grupo"...

ae cada div contem 1 imagem de cada "pasta/obra" tipo uma categoria, ae ao clicar na imagem ele abre o "montante" de imagens de tem dentro de cada pasta, atravez do 'lightbox'.

 

ae eu só queria saber se tem um geito mais facil de fazer isso, do que ficar "manualmente" colococando aquele código da pra "div". tipo..

 

<?php $i = 0; foreach (glob("img/01/*.jpg") as $i1) { $class =  $i>=1 ? 'style="display: none;"':''; ?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $i1; ?>" rel="lightbox[roadtrip]"><img src="thumb.php?img=<?php echo $i1; ?>" /></a></div>
	<?php $i++; } ?>
	<?php $i = 0; foreach (glob("img/02/*.jpg") as $i2) { $class =  $i>=1 ? 'style="display: none;"':''; ?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $i2; ?>" rel="lightbox[roadtrip2]"><img src="thumb.php?img=<?php echo $i2; ?>" /></a></div>
	<?php $i++; } ?>
	<?php $i = 0; foreach (glob("img/03/*.jpg") as $i3) { $class =  $i>=1 ? 'style="display: none;"':''; ?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $i3; ?>" rel="lightbox[roadtrip3]"><img src="thumb.php?img=<?php echo $i3; ?>" /></a></div>
	<?php $i++; } ?>
	<?php $i = 0; foreach (glob("img/04/*.jpg") as $i4) { $class =  $i>=1 ? 'style="display: none;"':''; ?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $i4; ?>" rel="lightbox[roadtrip4]"><img src="thumb.php?img=<?php echo $i4; ?>" /></a></div>
	<?php $i++; } ?>
	<?php $i = 0; foreach (glob("img/05/*.jpg") as $i5) { $class =  $i>=1 ? 'style="display: none;"':''; ?>
		<div class="thumb" <?php echo $class; ?>><a href="<?php echo $i5; ?>" rel="lightbox[roadtrip5]"><img src="thumb.php?img=<?php echo $i5; ?>" /></a></div>
	<?php $i++; } ?>

 

bom não sei se deu pra entender.

mas agradecido mais uma vez pela atenção.