Zoom to the selected image thumbnail in the Input file

Navigation
1

Hello, I'm using the zoom elevate plugin to zoom in thumbnails and I'm generating the thumbnails in an input file field to display the images that the client chose to upload.

I would like to take advantage of the code below to apply the zoomed plugin to the generated thumbnail. But the way I tried it does not work.

Can you help me? 

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>

The error in the console is this, 

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

and can not zoom in.

But the thumbnails are shown

If I put an image in body , it zooms in. But these images that are generated by JavaScript to show the input file thumbnails, they do not accept the plugin

Now it's missing just getting the src of the image

    
asked by anonymous 05.04.2016 / 13:59

1 answer

3

Your error is in this command: 

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

jQuery returns jQuery objects and does not have the addEventlistener method, but offers other shortcuts to do this. Among them, the best one for your case would be 

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

You can check the documentation here if you need to make changes to your callback.

    
05.04.2016 / 14:34
Image input does not send the form? Sorting Laravel with Relationship