Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Buthy

[Resolvido] Problema com galeria de fotos

Recommended Posts

Dae galera, beleza?

 

Então, editei totalmente uma galeria de imagens que achei na net, e estou tentando implementar o efeito lightbox

 

O problema é que não sei como chamar as imagens...

 

Esse é o arquivo que exibe as miniaturas:

<?
   include("conexao.php");
   include("cabecalho.php");
?>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<style type="text/css">

.fonte {
   font:Tahoma;
   font-size:12px;
}

.tit {
   font:Tahoma;
   font-size:12px;
   color:#FFF;
}

.data {
   font:Tahoma;
   font-size:18px;
   color:#FFF;
}

.subtit {
   font:Tahoma;
   font-size:10px;
}

a.lnk:link {color:#D80000; text-decoration:none;}
a.lnk:visited {color:#D80000; text-decoration:none;}
a.lnk:hover {color:#D80000; text-decoration:none;}
a:lnk:active {color:#D80000; text-decoration:none;}

.borda {
   border:4px solid #0b3d72;
   -moz-border-radius: 10px; /* Para Firefox */
   -webkit-border-radius: 10px; /*Para Safari e Chrome */
   border-radius: 10px; /* Para Opera 10.5+*/
}

.borda:hover {
   border:4px solid #d80000;
   -moz-border-radius: 10px; /* Para Firefox */
   -webkit-border-radius: 10px; /*Para Safari e Chrome */
   border-radius: 10px; /* Para Opera 10.5+*/
}

</style>

<div class="divScroll">
   <br />
   <h3><? echo "$evento"; ?></h3>
   <br />
   <table width="100%" cellpadding="0" cellspacing="0">
   <tr>
   <td width="25%" height="35" bgcolor="0b3d72" align="center"><span class="data"><strong><? echo "$data"; ?></strong></span></td>
   <td width="75%" height="35" class="tit" bgcolor="d40119">   Local: <? echo "$local"; ?><br />   Unidade de <? echo "$unidade"; ?></td>
   </tr>
   </table>
   <br />

<?
if (strstr($pg,".")== TRUE){
$pg=ceil($pg);
$pg=$pg-1;
}
if (!$pg==0)
{
$cont=$pg * 12;
} else {
$cont=0;
}
?>

<table align="center" width="500">
<tr>
 <td>  
    <?
$handle = opendir($dir);
$ext = "jpg";
$indice = 0;
$ipp = 20;

while (false !== ($file = readdir($handle)))
{
  $pathdata = pathinfo($file);
  if (!is_dir($file) && ($pathdata["extension"] == strtolower($ext)) || ($pathdata["extension"] == strtoupper($ext)))
  {
      $imagens[$indice] = $file;
      $indice++;
  }
}

$pagina = 1;
if ($_GET['pg'])
  $pagina = $_GET['pg'];

$paginas = ceil(count($imagens) / $ipp);
$inicio = $pg * $ipp;
$thumb="eventos_imgdim.php?imagem=";
$var1 = "&evento=$evento&data=$data&local=$local";

for ($i=$inicio; $i<($inicio+$ipp); $i++)
if($imagens[$i] != ""){ ?>
     <? $cont=$cont+1; ?>
    <a rel="lightbox[roadtrip]" href="eventos_zoom.php?dir=<? echo "$dir";?><? echo $var1?>&pg=<? echo "$cont";?>">
    <img class="borda" src="<? echo "$thumb$dir$imagens[$i]"; ?>" vspace="3" hspace="3">
    </a>
    <? }?>
</td></tr>

<tr>
  <TD width="230" align="left" valign="top"> <br />
<table width="230" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td width="90" valign="top"><span class="subtit">Total de fotos:
           <? $total = ceil(count($imagens)); echo $total; ?>
           </span></td>
        <td align="right" valign="top"><span class="subtit">Páginas: |
     <?
for($i=0; $i<$paginas; $i++){
$url = "?dir=$dir&pg=$i";
 if ($i==$pg) {
 echo " <b>".($i+1)."</b> |";
 } else {
 echo " <a class='lnk' href='$url'>".($i+1)."</a> |";
 }
}
?>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br />
</div>

<?
   include("footer.php");
?>

 

E esse é o que amplia a imagem selecionada (que eu não faço idéia de como alterar):

<?
   include("conexao.php");
?>

<? $var1 = "&evento=$evento&data=$data&local=$local&unidade=$unidade"; ?>

<table width="100" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td height="277">
     <?
if(!isset($pg) ){
$pg=1;
}
$handle = opendir($dir);
$ext = "jpg";
$indice = 2;
$ipp = 1;

while (false !== ($file = readdir($handle)))
{
  $pathdata = pathinfo($file);
  if (!is_dir($file) && ($pathdata["extension"] == strtolower($ext)) || ($pathdata["extension"] == strtoupper($ext)))
  {
      $imagens[$indice] = $file;
      $indice++;
  }
}

$pagina = 1;
if ($_GET['pg'])
$pagina = $_GET['pg'];
$paginas = ceil(count($imagens) / $ipp);
$total = ceil(count($imagens));
$inicio = $pg * $ipp;
for ($i = $inicio; $i < ($inicio + $ipp); $i++)
?>
     <table width="88" height="68" border="0" align="center" cellpadding="0" cellspacing="1">
       <?
     $res=getimagesize("$dir$imagens[$i]");
     if ($res[1]>265){
     $height=300;
     $width=($res[0]*$height)/$res[1];
     }  else {
     $height=$res[1];
     $width=$res[0];
     }
     $width=ceil($width);
     $height=ceil($height);
     ?>

       <tr>
         <td align="center" valign="middle" bgcolor="E7E7E7"> <img src="<? echo "$dir$imagens[$i]";?>" border="0"  height="<? print $height?>"></td>
       </tr></table>
   </td>
</tr>
<tr>
   <TD height="42">
     <table border="0" align="center" cellpadding="0" cellspacing="0">
       <tr valign="top">
         <td width="70" align="center"> <font size="<? echo $tfonte?>" face="<? echo $fonte?>">
           <strong>
           <?
if ($pg > 1){
  $pag=$pg - 1;
 echo "<a href=\"?dir=$dir&pg=" . ($pag) . "$var1\"><img src=\"images/icone_anterior.jpg\" border=0></a>";
  } else { echo "<font color=$onmouseover><img src=\"images/icone_anterior.jpg\" border=0></font>";}
   $div=$pg/12;
for ($x=1;$x<99;$x++){
 if ($div==$x){
  $inter=0;
  break;
 }
}
if (isset($inter) AND $div * 12 < $pg){
if ($div==1){
$div=0;
} else {
$div=$div-1;
}
   echo "<script language=JavaScript>
    window.open('eventos_fotos.php?dir=$dir&pg=".($div)."$var1', 'fotos');
     </SCRIPT>";
}

?>
           </strong> </font></td>
         <td width="70" align="center"><a href="java script:popup('imagempop.php?imagem=<? echo "$dir$imagens[$i]";?>');"><img src="images/icone_ampliar.jpg" border=0></a></td>
         <td width="70" align="center"><a href="java script:imprimi('imprimir.php?imagem=<? echo "$dir$imagens[$i]";?><? echo $var1?>');"><img src="images/icone_imprimir.jpg" border=0></a></td>
         <td width="70" align="center"><a href="java script:indica('indicacao.php?dir=<? echo "$dir";?>&imagem=<? echo $imagens[$i]?><? echo $var1?>');"><img src="images/icone_enviar.jpg" border=0></a></td>
         <td width="70" align="center"> <strong><font size="<? echo $tfonte?>" face="<? echo $fonte?>">
           <? if($pg<$total) {
          $pagp=$pg+1;
  echo "<a href=\"?dir=$dir&pg=" . ($pagp) . "$var1\"><img src=\"images/icone_proxima.jpg\" border=0></a>";
} else { echo "<font color=$onmouseover><img src=\"images/icone_proxima.jpg\" border=0></font>";}
?>
           </font></strong></td>
       </tr>
     </table>
<?
$div=$pag/12;
if (!strstr($div,'.'))
{
$inter=0;
}
  if (isset($inter) AND $div * 12 < $pg)
{
   echo "<script language=JavaScript>
        window.open('eventos_fotos.php?dir=$dir&pg=$div$var1', 'fotos');
     </SCRIPT>";
}
?>
</td>
</tr>
</table>

 

Como eu faço pra que as imagens sejam carregadas utilizando o efeito lightbox??

 

Valeuu

Compartilhar este post


Link para o post
Compartilhar em outros sites

Retire esse código que abre janela pop-up. Baixe o Fancybox

 

Descompacte o script e deixe tudo numa pasta chamada fancybox/

 

Coloque o setuinte antes de </head>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

 

Coloque o seguinte antes de </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$("a.lightbox").fancybox();
</script>

 

Pronto, agora todos os links que tiverem a classe "lightbox" ficaram com lightbox. Coloque os links apontanto para a imagem. Como o que segue

<a class="lightbox" href="imagem_grande.jpg"><img src="imagem_miniatura.jpeg" alt="" /></a>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Buthy, o problema é que esse link aí não existe, ele não leva a imagem.

 

Uma das suas urls é essa:

eventos_zoom.php?dir=eventos/30042011StPatrickSJC/&evento=Saint Patricks Day&data=30/04/2011&local=Associação do BESC&unidade=São José do Cedro / SC&pg=1

 

Não me parece um url válida.

 

A url do link (<a>) precisa apontar para uma imagem (a mesma da miniatura mas com tamanho maior).

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso cara, mas acontece que é uma galeria de imagens, dai eu nao sei como fazer com que aponte pra uma certa imagem em certa posicao :S

Compartilhar este post


Link para o post
Compartilhar em outros sites

do lightbox tá funcionando, eu só não sei o que fazer no arquivo eventos_zoom.php, pra fazer com que a imagem seja exibida no lightbox...

 

tem várias fotos na galeria, tem cadastro de galerias, upload de fotos, etc... por isso não da pra fazer o link diretamente pra uma imagem .jpg :S

Compartilhar este post


Link para o post
Compartilhar em outros sites

Alterar o nome da classe do link pra "iframe" não deu resultado?

 

<a class="iframe" href="eventos_zoom.php"><img src="imagem_miniatura.jpeg" alt="" /></a>

Compartilhar este post


Link para o post
Compartilhar em outros sites

consegui cara, o problema era em listar as imagens...

utilizei esse codigo:

 

<?
   header("Content-type: image/jpeg");

$im       = imagecreatefromjpeg($_GET['imagem']);
$largurao = imagesx($im);
$alturao  = imagesy($im);
if ($largurao > 350){
	$alturad  = 450;
   	$largurad = 600;
}else{
	$alturad  = 450;
   	$largurad = 338;
}

$nova     = imagecreatetruecolor($largurad,$alturad);
imagecopyresized($nova,$im,0,0,0,0,$largurad,$alturad,$largurao,$alturao);
   imagejpeg($nova,null,100);
   imagedestroy($nova);
imagedestroy($im);
?>

 

utilizei o COLORBOX, script mto bom :D

 

só estou com um problema no IE com esse colorbox, que somente no IE ele fica com uma barra de rolagem... :S

 

valeu cara, brigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.