1

Estou criando um sistema Drag and Drop para montar uma peça. Minha dúvida é a seguinte: inserir a descrição da imagem aqui

Ao clicar nesse botão circulado, preciso que a imagem do ícone referente ao botão apareça ampliada na área amarela. Alguma ideia de como fazer? (Lembrando que não sou experiente na área)

1
  • Poste uma parte do código do botão e do ícone para sabermos como vc está pretende fazer isso.
    – Sam
    Commented 31/08/2017 às 2:51

2 Respostas 2

3

Isso você consegue fazer com jQuery colocando um evento que, ao clicar na imagem, seja criado uma cópia da imagem na área desejada, segue abaixo uma abordagem de como fazer:

$('.open-image').on('click', function () {
  $('#preview').html($(this).find('img').clone());
});
.columns {
  display: flex;
}
.columns ul {
  margin: 0;
  padding: 0;
  width: 25%;
}
.columns li {
  list-style: none;
  margin: 0 15px 15px 15px;
}
.columns img {
  display: block;
  width: 100%;
}
.columns > div {
  width: 50%;
}
#preview {
  background: #efefef;
  min-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
  <ul>
    <li><a class="open-image" href="http://www.stockvault.net/data/2011/03/20/119798/preview16.jpg" title="Imagem 1"><img src="http://www.stockvault.net/data/2011/03/20/119798/preview16.jpg" alt="Imagem 1"></a></li>
    <li><a class="open-image" href="http://images.freeimages.com/images/large-previews/733/motor-parts-3-1316894.jpg" title="Imagem 2"><img src="http://images.freeimages.com/images/large-previews/733/motor-parts-3-1316894.jpg" alt="Imagem 2"></a></li>
  </ul>
  <div>
    <div id="preview"></div>
  </div>
  <ul>
    <li><a class="open-image" href="http://images.freeimages.com/images/large-previews/31a/motor-parts-5-1316882.jpg" title="Imagem 3"><img src="http://images.freeimages.com/images/large-previews/31a/motor-parts-5-1316882.jpg" alt="Imagem 3"></a></li>
    <li><a class="open-image" href="http://images.freeimages.com/images/large-previews/c97/motor-parts-1-1316906.jpg" title="Imagem 4"><img src="http://images.freeimages.com/images/large-previews/c97/motor-parts-1-1316906.jpg" alt="Imagem 4"></a></li>
  </ul>
</div>

0

Aqui está o link do zoom plugin que pode te ajudar a resolver seu problema.

Aqui está a galeria de imagem completa

Os dados possuem muito conteúdo, o melhor a fazer é ler a documentação.

1
  • Esqueci de mencionar na pergunta, não queria um zoom, mas sim o mesmo resultado da resposta do Diego. Desculpe a falta de atenção e obrigado. Commented 31/08/2017 às 14:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .