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
Already tried to instantiate the plugin after putting these images in html?
– Gabriel Rodrigues
What do you mean/? I’ve put html in the question body now
– Carlos Rocha
But the thumbnail is this? $('[data-img="'+i+'"]')
– Carlos Rocha
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.
– user43656
Hello. Can you make an example in jsfiddle? It’s much easier to help.
– Tiago Gomes
Yes: https://jsfiddle.net/tujemnsL/ . Detail, updated question!
– Carlos Rocha
Thank you. When I was going to reply)
– Tiago Gomes