Zoom in to the selected image thumbnail in the Input file

Asked

Viewed 453 times

1

Hello, I’m using the plugin Zoom in to zoom in miniatures and I’m generating the thumbnails in an input file field to display the images the client chose to upload.

I would like to take advantage of the code below to apply to the generated thumbnail, the Elevate zoom plugin. But the way I tried 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 that occurs 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 doesn’t zoom in.

But the thumbnails are shown

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

Now we are only missing to get the image src

javascript jquery

  • Already tried to instantiate the plugin after putting these images in html?

  • What do you mean/? I’ve put html in the question body now

  • But the thumbnail is this? $('[data-img="'+i+'"]')

  • Dude, you can use the console in the sources part and debug it there, so you’ll know what’s coming in each line and validate if the variable i is with the value it really needs to be.

  • Hello. Can you make an example in jsfiddle? It’s much easier to help.

  • Yes: https://jsfiddle.net/tujemnsL/ . Detail, updated question!

  • Thank you. When I was going to reply)

Show 2 more comments

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 so. Among them, the best 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.

  • Yes, but something seems to be missing. I have already updated the question. No error. But the zoom also does not work!

  • You are calling the command before inserting the element on the page. Add this line at the end of the script (it should be executed only once) $('body').on('change', '[data-img]', readImage)

  • I think I’m making a mess here. I don’t need the function readImage(). Because this, already being done is to display the thumbnail. But Zoom asks only the class instantiation and the call to the plugin. As these images are being generated after loading the body this should be disturbing the image zoom because it does not find the <img class="Lift-zomm". > requested by the plugin

  • made it to make it easier to understand my error: https://jsfiddle.net/tujemnsL/

  • 1

    Your problem was that you were calling the plugin before injecting the image src. Also your fiddle seems to have used a different plugin, so I had to change $().elevateZoom() for $().ezPlus(). Check my changes in your role readFileView: https://jsfiddle.net/patetico/tujemnsL/2/

  • Look at that. it worked. was just changing the address of the Plugin Now just one more help: When you zoom, it always stays below the image and in case the image is at the end of the page, your zoom loses part of the sample. Is there a way to set the zoom to exit in the visible area of the browser?

  • Take a look at the plugin documentation. Both elevateZoom and ezPlus have several examples to use as a base to choose the best solution for your case.

Show 2 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.