Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 438

Problema com Estilo em Página de Imagens

19-04-2016 14:22

OW efeito que gostaria que todas imagens estivesse é desse link ai

http://tympanus.net/Tutorials/3DHoverEffects/

Porém mesmo Seguindo o exemplo do modelo acima de como funciona, só funciona na primeira imagem vinda do banco de dados.
da segunda imagem para frente o exemplo some

<? include "dbconfig.php"; ?> <html> <head> <title><?=@mysql_result(mysql_query("SELECT escritorio FROM configuracao"),0,escritorio)?></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="admin/css/demo2.css" /> <link rel="stylesheet" type="text/css" href="admin/css/style_common.css" /> <link rel="stylesheet" type="text/css" href="admin/css/style1.css" /> <link rel="stylesheet" type="text/css" href="admin/css/fallback.css" /> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css' /> <script type="text/javascript" src="admin/js/modernizr.custom.69142.js"></script> <script type="text/javascript" src="admin/js/jquery.hoverfold.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script> <script type="text/javascript"> Modernizr.load({ test: Modernizr.csstransforms3d && Modernizr.csstransitions, yep : ['admin/js/jquery.hoverfold.js'], nope: 'admin/css/fallback.css', callback : function( url, result, key ) { if( url === 'admin/js/jquery.hoverfold.js' ) { $( '#grid' ).hoverfold(); } } }); </script> </head> <body class="bg-cyan"> <?php function anti_injection($sql){ $sql = preg_replace("/( from |select|insert|delete|where|drop table|show tables|#|\*|--|\\\\)/", "" ,$sql); $sql = trim($sql); $sql = strip_tags($sql); $sql = (get_magic_quotes_gpc()) ? $sql : addslashes($sql); return $sql; } ?> <? include ("topo.php"); ?> <div style="clear:both;"></div> <div align="center"> <span style="font-weight:400; color:#FF0004;">Selecione a Categoria</span> <select name="categoria" id="categoria" onchange="this.value!='' ? location.href='imagens.php?valor='+this.value.replace(/ /g, '-') : ''"> <option value="*" <?php isset($_GET["valor"])=="*" ? print("selected=selected") : ""; ?> >Todas</option> <? $sqlcat= @mysql_query("SELECT id,categoria FROM imagens "); while ($colunacat = mysql_fetch_array($sqlcat)) { ?> <?php if($colunacat[categoria]==$_GET['valor']) { ?> <option value="<?=$colunacat[categoria]?>" selected="selected"><?=$colunacat[categoria]?></option> <?php } else { ?> <option value="<?=$colunacat[categoria]?>"><?=$colunacat[categoria]?></option> <?php } ?> <?php } ?> </select> </div> <? if(isset($_GET['valor'])) { if($_GET['valor']=="*") { $sql= mysql_query("SELECT * FROM imagens") or die(mysql_error()); } else { $sql= mysql_query("SELECT * FROM imagens where categoria='".anti_injection($_GET['valor'])."'") or die(mysql_error()); } while ($coluna = mysql_fetch_array($sql)) { ?> <div class="container"> <div id="grid"> <div class="view"> <div class="view-back"> <span data-icon="A">566</span> <span data-icon="B">124</span> <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">&rarr;</a> </div> <img src="<?php echo 'admin/'.$coluna[imagem];?>" alt="oioi" > </div> </div> </div> <?php }?> <?php }?> <div style="clear:both;"></div> <? include ("admin/rodape_site.php"); ?> </body> </html>

Obrigado
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17670
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Problema com Estilo em Página de Imagens

19-04-2016 15:28

Provavelmente é erro no bloco. Veja o seguinte no seu código:

while ($coluna = mysql_fetch_array($sql)) { ?> <div class="container"> <div id="grid"> <div class="view">

Se você observar ai vai ver que a div container vai se repetir o número de vezes que tiver de resultados, quando no script original só repete as divs view
3dthumbnail.png
Ou seja, você deve abrir a div main antes do while, dentro do while vai só a div view. E depois de fechar o while você fecha a div main.
0
Você não está autorizado a ver ou baixar esse anexo.
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 438

Re: Problema com Estilo em Página de Imagens  #resolvido

19-04-2016 15:39

100% deu certo o código ficou assim :

<div class="container"> <div id="grid"> <? if(isset($_GET['valor'])) { if($_GET['valor']=="*") { $sql= mysql_query("SELECT * FROM imagens") or die(mysql_error()); } else { $sql= mysql_query("SELECT * FROM imagens where categoria='".anti_injection($_GET['valor'])."'") or die(mysql_error()); } while ($coluna = mysql_fetch_array($sql)) { ?> <div class="view"> <div class="view-back"> <span data-icon="A">566</span> <span data-icon="B">124</span> <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">&rarr;</a> </div> <img src="<?php echo 'admin/'.$coluna[imagem];?>" alt="oioi" > </div> <?php }?> <?php }?> </div> </div>

Muito Obrigado
1
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 438

Re: Problema com Estilo em Página de Imagens

19-04-2016 19:31

mais uma dúvida como aumentar a área cinza hora que eu passo o mouse em cima da imagem ?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17670
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Problema com Estilo em Página de Imagens

20-04-2016 09:55

Vai no arquivo style1.css e troca essa classe

.view:hover .s2{ -webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); -moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); -o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); -ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); }

Por essa

.view:hover .s2{ -webkit-transform: translate3d(10px,0,0) rotate3d(0,1,0,-45deg); -moz-transform: translate3d(10px,0,0) rotate3d(0,1,0,-45deg); -o-transform: translate3d(10px,0,0) rotate3d(0,1,0,-45deg); -ms-transform: translate3d(10px,0,0) rotate3d(0,1,0,-45deg); transform: translate3d(10px,0,0) rotate3d(0,1,0,-45deg); }

Ou seja, você vai trocar na classe o valor de 59px por 10px, fazendo com que a foto fique mais espremida.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado