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