While não exibe botões com imagens
Olá!
Criei um loop para exibir diversas imagens em uma div flutuante para favoritos de imóveis, porém a tag <button> é exibida diversas vezes em cima da mesma! Como solucionar?
bloco_favoritos
<?php include ('../../../../app.php');
?>
<div style="display:none;" class="tips"><?=__FILE__?></div>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
<style>
.esconde {
overflow-y: auto;
margin-top: 100px;
width: 205px;
height: 450px;
background-color: #f9f6f7;
display: block;
position: fixed;
right: -180px;
border: 1px solid #dcd8cd;
box-shadow: 0 0 12px rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
top: 160px;
z-index: 1000;
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
}
.mostra {
overflow-y: auto;
margin-top: 100px;
width: 205px;
height: 475px;
background-color: #f9f6f7;
display: block;
position: fixed;
right: 0px;
border: 1px solid #dcd8cd;
box-shadow: 0 0 12px rgba(0,0,0,0.25);
border-radius: 5px 0 0 5px;
top: 160px;
z-index: 1000;
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
}
.btn_favorite{
position: absolute;
width: 28px;
top: 32px;
left: 0;
}
.try_indicator{
width: 28px;
height: 103px;
margin-top: 125px;
background-color: #007aa5;
position: fixed;
cursor: pointer;
}
.try_indicator:after{
content: '';
width: 0;
height: 0;
border-right: 9px solid #fff;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
position: absolute;
top: 41px;
left: 8px;
}
.try_indicator_open:after{
content: '';
width: 0;
height: 0;
border-right: 9px solid #fff;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
position: absolute;
top: 41px;
left: 8px;
transform: rotateY(180deg);
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
}
.title_content{
text-transform: uppercase;
font-size: 1em;
display: inline-block;
margin-left: 45px;
position: fixed;
}
.title_rot_90{
height: auto !important;
overflow: visible !important;
padding-top: 12px;
padding-bottom: 10px;
font-weight: 600;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
white-space: nowrap;
margin-left: -26px;
}
.content{
margin: 10px;
padding-top: 10px;
float: right;
}
.content img{
width: 130px;
height: 120px;
}
#ver_todos{
display: inline-block;
position: fixed;
top: 718px;
right: 5px;
width: 180px;
height: 20px;
text-align: center;
background-color: #f9f6f7;
transition: linear 1.5s;
-webkit-transition: linear 1.5s;
-moz-transition: linear 1.5s;
-o-transition: linear 1.5s;
}
#fav_vazio{
background-color: #0794c9;
color: #fff;
border: 3px double #fff;
width: 130px;
height: 120px;
padding: 10px;
font-size: 0.85em;
text-align: center;
margin: auto -10px auto 23px;
}
</style>
<script>
$(document).ready(function(){
$(".try_indicator").click(function(){
$("#caixa").removeClass("esconde");
$("#caixa").addClass("mostra");
$("#heart_cheio").css("display", "block");
$("#heart_vazio").css("display", "none");
$("#fav_vert").css("color", "transparent");
$("#fav_hor").css("display", "block");
$("#heart").css("display", "block");
$("#ver_todos").css("display", "block");
$(".try_indicator").addClass("try_indicator_open");
});
$("#caixa").mouseleave(function(){
$("#caixa").removeClass("mostra");
$("#caixa").addClass("esconde");
$("#heart_cheio").css("display", "none");
$("#heart_vazio").css("display", "block");
$("#fav_vert").css("color", "black");
$("#fav_hor").css("display", "none");
$("#ver_todos").css("display", "none");
$(".try_indicator").removeClass("try_indicator_open");
});
});
</script>
<div id="caixa" class="esconde">
<div class="content">
<?php
$_POST["anuncio"] = 2;
/* Caso o usuário tenha utilizado o formulário de busca. */
if(isset($_POST["anuncio"]) and !(empty($_POST["anuncio"]))) {
/* Linhas retornadas de uma query. */
$row = 0;
/* Número de anúncios encontrados. */
$i = 0;
/* Validações dos parâmetros enviados. */
$anuncio = (int) strip_tags($_POST["anuncio"]);
if(!(empty($_SESSION["IdAnuncio"]))) {
$row = 1;
}
/* Caso tenha retornado algum resultado da consulta utilizando os filtros. */
if($row >= 1) {
/* Caso o $anuncio seja igual a 2, então se trata dos anúncios nos favoritos. */
foreach($_SESSION["IdAnuncio"] as $IdAnuncio => $idOffer) {
$sql = "select * from team where id = " . $idOffer;
$busca = mysql_query($sql);
/* Imprime os anúncios, de acordo com o que se encontra armazenado na sessão. */
while($anuncios = mysql_fetch_assoc($busca)) {
$i ++;
/* Tratamento da imagem do imóvel. */
if(empty($anuncios['image'])) {
$imagem = $PATHSKIN . "/images/produto-sem-foto.jpg";
}
else {
$imagem = $ROOTPATH . "/media/" . $anuncios['image'];
}
$UrlAnuncio = UrlAnuncio($anuncios['id']);
?>
<a href="<?php echo $UrlAnuncio;?>">
//BUTTON QUE EU RELATO NESTE TÓPICO. E OUTRA, JÁ COLOQUEI FORA DO <a href=""></a>
<button data-id="<?php echo $anuncio["id"]; ?>" class="btn btn-favorito" style="position: absolute; background: transparent; border: none; box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; margin-left: 131px; top: 33px;">
<img src="<?php echo $PATHSKIN . "/images/heart_full.png";?>" style="width: 20px; height: auto;">
</button>
<img style="margin-left: 30px; border: solid 7px #fff; box-shadow: 0px 1px 1px rgba(0,0,0, 0.3); margin-top: 10px; box-sizing: content-box;" src="<?php echo $imagem; ?>">
</a>
<?php } } } else {?>
</div>
<div id="fav_vazio">
<?php echo "Clique no " . $PATHSKIN . "/images/heart_empty.png";?><?php echo utf8_decode(" correspondente ao imóvel do seu interesse para adicioná-lo à favoritos.");?>
</div>
<?php } } ?>
<?php
if (!(empty($row))){
$heart = "heart_full.png";
} else{
$heart = "heart_empty.png";
}
?>
<div class="btn_favorite">
<img id="heart_fav_vert" src="<?php echo $PATHSKIN . "/images/" . $heart;?>" style="width: 20px; height: auto; padding: 3px; margin-top: -32px; position: fixed;"/>
<div id="fav_vert" class="title_rot_90" style="display: block; position: fixed; transition: 0s ease-out;-webkit-transition: 0s ease-out;-moz-transition: 0s ease-out;-o-transition: 0s ease-out; margin-top: 15px;">FAVORITOS</div>
<div class="try_indicator">
</div>
</div>
<div id="fav_hor" class="title_content" style="display: inline-block; width: 190px; background-color: #f9f6f7; transition: 0.5s ease-out;-webkit-transition: 0s ease-out;-moz-transition: 0s ease-out;-o-transition: 0s ease-out; top: 265px; padding-top: 4px; margin-top: -4px; margin-left: -7px; position: fixed;">
<img id="heart_fav_hor" src="<?php echo $PATHSKIN . "/images/" . $heart;?>" style="width: 20px; height: auto; padding: 3px; margin-top: -3px; margin-right: 30px;"/>FAVORITOS (<?php echo $i;?>)
</div>
<div id="ver_todos" class="title_content"><a href="#" style="color: #f26122 !important;">VER TODOS</a></div>
</div>Discussão (0)
Carregando comentários...