I'm creating a Drag and Drop system to assemble a part. My question is this:
By clicking on this button, I need the image of the button icon to appear enlarged in the yellow area. Any idea how to do it? (Remembering I'm not experienced in the area)
You can do this with jQuery by placing an event that, when clicking on the image, a copy of the image is created in the desired area, here is an approach to how to do it:
$('.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><divclass="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>Here's the zoom plugin link that can help you solve your problem.
Here's the full image gallery
The data has a lot of content, the best thing to do is to read the documentation.