STUDDIO
-
Total de itens
5 -
Registro em
-
Última visita
Sobre STUDDIO
STUDDIO's Achievements
0
Reputação
-
Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja uma imagem por vez, ele não carrega o restante das imagens, apenas a primeira, vou por o código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso preciso que funcione dessa maneira pois meu sistema carrega uma imagem por vez <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>
-
Ok vou mandar um email
-
. Infelizmente não estou conseguindo chamar o SLICK creio que não estou fazendo corretamente o scrpit na head pois o thumb abre a imagem em uma nova aba ☹️ . .
-
Ola tudo bem ! Muito obrigado pela dica vou tentar implementar a funcionalidade pois o sistema já está 100% queria mesmo era dar essa implementada para o pessoal que visualizar as fotos não precise sempre clicar na miniatura para trocar a foto maior. Muito agradecido pela dica agora vamos la ver se consigo ✔️ A ideia seria essa abaixo na imagem poder trocar a imagem grande clicando nas setas por exemplo.
-
Ola gostaria de poder implementar um código com o que já esta funcionando mas o < Foto Anterior II Próxima Foto > não estou conseguindo acho que já queimei os neurônios kkkk Bom Funcionamento ... tenho uma pagina que recebe de um GET o id do produto, esse gera as miniaturas das fotos cadastradas e uma foto ampliada no centro ao clicar nas miniaturas a foto aparece ampliada no centro.... esse cetro eu fiz dentro de um iframe pois não consegui fazer diretamente ... vou postar o cod do iframe que chama a pagina onde essa pega o GET ID e amplia a imagem tudo funcionando até aqui mas não consegui fazer dentro dessa imagem ampliada ela ter a opção de anterior e próxima ... consegui somente clicando nas miniaturas iframe <iframe src="zoom.php?id=<?print $codigo_v;?>" name="frame" width="640" marginwidth="0" height="480" marginheight="0" scrolling="no" frameborder="0" hspace="0" vspace="0" id="frame" allowtransparency="true" > </iframe> Pagina que exibe a foto ampliada dentro do iframe <?php include("con.php"); $vid=$_GET["id"]; $vconsulta=mysql_query("SELECT * FROM tb_produtoss WHERE id like '$vid'"); $vdados= mysql_fetch_array ($vconsulta); if(empty($imagem)) { $imagem=$vdados["imagem"]; list ($imagem,$foto1,$foto2,$foto3,$foto4,$foto5,$foto6) = split('[;]',$imagem); } if($imagem == "produtoss/") { $imagem="images/noimage.jpg"; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } --> </style> </head> <body oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> <div align="center"> <img src="thumb.php?imagem=<? print $imagem;?>&x=640' border=" border="0"/> </div> </body> </html> Minha ideia era conseguir passar as fotos sem precisar clicar nas miniaturas ☹️ Se alguém puder ajudar agradeço muito pois eu zerei os neurônios até agora