Buthy 0 Denunciar post Postado Abril 12, 2011 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
mangakah 217 Denunciar post Postado Abril 12, 2011 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
Buthy 0 Denunciar post Postado Abril 13, 2011 gostei desse fancybox, mas não consegui fazer funcionar... só que o problema é esse: http://www.fiskfronteira.com.br/eventos_fotos.php?dir=eventos/30042011StPatrickSJC/&id=20&evento=Saint%20Patricks%20Day&data=30/04/2011&local=Associa%E7%E3o%20do%20BESC&unidade=S%E3o%20Jos%E9%20do%20Cedro%20/%20SC&id=20%27%29 quando clica na imagem, ela não carrega Compartilhar este post Link para o post Compartilhar em outros sites
mangakah 217 Denunciar post Postado Abril 13, 2011 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
Buthy 0 Denunciar post Postado Abril 13, 2011 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
mangakah 217 Denunciar post Postado Abril 13, 2011 Tente mudar o nome da classe de "lightbox" para "iframe". Compartilhar este post Link para o post Compartilhar em outros sites
Buthy 0 Denunciar post Postado Abril 13, 2011 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
mangakah 217 Denunciar post Postado Abril 13, 2011 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
Buthy 0 Denunciar post Postado Abril 14, 2011 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