0

Na página abaixo:

http://funerariasaopedro.net.br/showroom

Estou usando o plugin jquery.ez-plus.js. que dá zoom às imagens.

Tudo funciona bem.

Mas quando redimensiono o navegador clicando no redimensionador lá em cima ao lado do X para fechar o navegador, percebo que no final da página ou html, ou o body ficam com a altura enorme e quando vou ver são exatamente os códigos criados ao final da página pelo plugin.

Será que tem jeito de corrigir isso? Ou seja, ao redimensionar o navegador não aparecer aquela pate enorme em branco abaixo do html?

Segue abaixo:

<?php require_once "config.php"; ?>
<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title><?php echo $constantes->getTituloSite(); ?></title>
    <?php  require_once("_global/_meta/meta.ini"); ?>
    <link rel="shortcut icon" type="image/x-icon" href="_img/favicon.ico">
    <link type="text/css" rel="stylesheet" href="_global/_css/estilos.css" />
    <link type="text/css" rel="stylesheet" href="_global/_css/estiloSite.css" />
    <link type="text/css" rel="stylesheet" href="_global/_css/menuSite.css" />
    <script type="text/javascript" src="_global/_js/jquery.js"></script>
    <script type="text/javascript" src="_global/_js/jquery.ez-plus.js"></script>
    <script> 

      $(window).on("load resize", function(){

        $('.elevate-image').ezPlus({
        zoomType: 'lens',
        lensShape: 'round',
        lensSize: 200
        });    

      });

    </script>      
    <script type="text/javascript" src="_global/_js/menu.js"></script>
    <script type="text/javascript" src="_global/_js/cabecalho.js"></script>
  </head>

  <body>

    <div class="cabecalho"><?php require_once "_requeridos/cabecalho.php"; ?></div>
    <div class="menu"><?php require_once "_requeridos/menu.php"; ?></div>
    <div class="showRoom"><?php require_once "showroomConteudo.php"; ?></div>
    <div class="base"><?php require_once "_requeridos/base.php"; ?></div>
    <div class="final"><?php require_once "_requeridos/final.php"; ?></div>

  </body>

</html>

showroomConteudo.php

<label class="titulos">Show Room</label>

<div class="fotosPlanos">

  <?php
     $planos = $planosDao->pesquisaPlanos();

     foreach ($planos as $plano) :

        echo $phpUtil->sucesso($plano->getNome());

        $fotos = $fotosDao->pesquisaFotosPlano($plano->getIdPlano());

        if ($fotos == NULL) {

            echo "<h2>Sem fotos</h2>";

        } else {

            foreach ($fotos as $foto) :
               echo "
                   <div class='blocos'>
                      <img class='elevate-image' src='_img/_fotos/".$foto->getFoto()."' data-zoom-image='_img/_fotos/".$foto->getFoto()."'  />
                   </div>
                   ";

            endforeach;
        }

     endforeach;
  ?>

</div>

Observação, já coloquei o trecho abaixo, abaixo até do </html> e dá o mesmo problema.

<script> 

  $(window).on("load resize", function(){

    $('.elevate-image').ezPlus({
    zoomType: 'lens',
    lensShape: 'round',
    lensSize: 200
    });    

  });

</script>      
0

1 Resposta 1

1

O plugin está posicionando as divs do zoom de forma em que elas fiquem com uma posição que ultrapassam o limite da altura do site, criando esse enorme espaço em branco na parte de baixo do site.

Um paliativo seria usar:

$(window).on("resize", function(){
    $(".zoomContainer").css("top","0");
});

Isso irá posicionar todas as divs .zoomContainer no topo sem prejuízo ao funcionamento do plugin, e evitando o espaço branco.

6
  • Era isso mesmo: obrigado! Commented 5/06/2018 às 0:06
  • Tente colocando no CSS: .zoomContainer{ top: 0 !important; }
    – Sam
    Commented 5/06/2018 às 0:08
  • Se funcionar, aí nem precisa do jQuery
    – Sam
    Commented 5/06/2018 às 0:09
  • melhor com css né? Commented 5/06/2018 às 1:22
  • bem melhor sim.... veja se funciona.
    – Sam
    Commented 5/06/2018 às 1:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .