1

Olá, estou usando o plugin elevate zoom para dar zoom em miniaturas e estou gerando as miniaturas em um campo input file para exibir as imagens que o cliente escolheu para fazer upload.

Gostaria de aproveitar o código abaixo para aplicar à miniatura gerada, o plugin elevate zoom. Mas da forma que tentei não dá certo.

Podem me ajudar?

var arquivos = new Array();

$(function(){
    $('#fotos').on('change',function() {
        var id = $(this).attr('id');
        var totalFiles = $(this).get(0).files.length;

        if(totalFiles == 0) {
          $('#message').text('Selecionar Fotos' );
        }
        if ( totalFiles > 1) {
            $('#message').text( totalFiles+' arquivos selecionados' );
        } else {
            $('#message').text( totalFiles+' arquivo selecionado' );
        }

        var htm='<ol>';

        for (var i=0; i < totalFiles; i++) {
             var c = (i % 2 == 0) ? 'item_white' : 'item_grey';
             var arquivo = $(this).get(0).files[i];
             var fileV = new readFileView(arquivo, i);

             arquivos.push(arquivo);                         

             htm += '<li class="'+c+'">';
             htm += '  <div class="box-images">';
             htm += '     <img  ';
             htm += '        class="item elevate-image" ';
             htm += '        data-img="'+i+'" ';
             htm += '        data-id="'+id+'" ';
             htm += '        border="0"'; 
             htm += '        data-zoom-image="'+arquivo.name+'">';
             htm += '  </div>';
             htm += '  <span>'+arquivo.name+'</span>';
             htm += '   <a href="javascript:removeFile('+i+',\''+id+'\')" class="remove">x</a>';
             htm += '</li>'+"\n";

         }


        htm += '</ol>';
           $('#lista').html(htm);
           $('#arquivos').val(arrayParaString(arquivos));
           $('.elevate-image').elevateZoom();
    });

});

html

    <!DOCTYPE html>
    <html>
    <head>
     <title><?php echo $constantes->getTituloSiteAdmin(); ?></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/admin.css" />
     <link type="text/css" rel="stylesheet" href="_global/_css/upload.css" />
     <link type="text/css" rel="stylesheet" href="_global/_css/menu.css" />
     <link type="text/css" rel="stylesheet" href="_global/_css/jHtmlArea.css" />

     <script type="text/javascript" src="_global/_funcoes/_js/jquery-2.1.4.min.js"></script>
     <script type="text/javascript" src="_global/_funcoes/_js/jquery.elevateZoom-3.0.8.min.js"></script> 
     <script type="text/javascript" src="_global/_funcoes/_js/readImage.js"></script>
     <script type="text/javascript" src="_global/_funcoes/_js/upload.js"></script>
</head>
    <body>
       <div id="topo"><h1><?php echo $constantes->getCabecalhoAdmin(); ?></h1></div>
       <div id="menu">
          <div class="sessoes"><?php require_once($menu.".php"); ?></div>
       </div>
       <div id="cont">
          <div class="sessoes"><?php require_once("imoveisCadastrarConteudo.php"); ?></div>
       </div>
       <div id="base">
          <div class="sessoes"><?php require_once($base.".php"); ?></div>
       </div>
       <div id="final">
          <div class="sessoes"><?php require_once("final.php"); ?></div>
       </div>
    </body> 
    </html>

O erro que dá no console é esse,

http://localhost/php/dinamicaimoveis.com.br/admin/undefined Failed to load resource: the server responded with a status of 404 (Not Found)

e não dá zoom.

Mas as miniaturas são mostradas

Se eu colocar uma imagem no body, ela dá zoom. Mas essas imagens que são geradas pelo JavaScript para mostrar as miniaturas do input file, estas não aceitam o plugin

Agora esta faltando apenas conseguir pegar o src da imagem

7
  • Ja tentou instanciar o plugin depois de colocar estas imagens no html? Commented 5/04/2016 às 12:03
  • Como assim/? Eu coloquei o html no corpo da pergunta agora Commented 5/04/2016 às 12:09
  • Mas a miniatura é essa mesmo? $('[data-img="'+i+'"]') Commented 5/04/2016 às 12:10
  • Cara, você pode usar o console na parte de sources e debugar por lá, assim você vai saber o que está chegando em cada linha e validar se a variável i está com o valor que realmente precisa estar.
    – user43656
    Commented 5/04/2016 às 12:27
  • Olá. Consegue fazer um exemplo no jsfiddle? Fica muito mais facil ajudar. Commented 5/04/2016 às 13:49

1 Resposta 1

3

Seu erro está neste comando:

$('[data-img="'+i+'"]').addEventListener("change", readImage, false);

O jQuery retorna objetos jQuery e não possui o método addEventlistener, mas oferece outros atalhos pra fazer isso. Dentre eles, a melhor para o seu caso seria

$('[data-img="'+i+'"]').change(readImage);

Você pode conferir a documentação aqui caso precise fazer alterações na sua callback.

7
  • Sim, mas parece que falta algo. Já atualizei na pergunta. Não dá erro. Mas o zoom também não funciona! Commented 5/04/2016 às 13:00
  • Você está chamando o comando antes de inserir o elemento na página. Adicione esta linha no final do script (deve ser executada só uma vez mesmo) $('body').on('change', '[data-img]', readImage)
    – patetico
    Commented 5/04/2016 às 13:11
  • Acho que estou fazendo confusão aqui. Não preciso da função readImage(). Pois isso, já esta sendo feito que é exibir a miniatura. Mas o elevate zoom pede só a instanciação da classe e a chamada ao plugin. Como essas imagens estão sendo geradas após o carregamento do body isso deve estar atrapalhando o zoom da imagem pois não encontra o <img class="elevate-zomm"..> pedida pelo plugin Commented 5/04/2016 às 13:34
  • fiz para ver se facilita a compreensão do meu erro: jsfiddle.net/tujemnsL Commented 5/04/2016 às 15:39
  • 1
    Seu problema era que você estava chamando o plugin antes de injetar o src da imagem. Além disso seu fiddle parece ter usado um plugin diferente, então eu tive que mudar $().elevateZoom() para $().ezPlus(). Confira minhas alterações na sua função readFileView: jsfiddle.net/patetico/tujemnsL/2
    – patetico
    Commented 5/04/2016 às 16:43

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 .