When you click on the smaller div, open the larger div

Question

I have the following layout.

The larger square shows one of the smaller squares, only in larger size. That is, if I click on the second smallest square, it has to show on the largest square.

Is there a plugin for this? Because I need it to be manageable.

Answer 1

The structure is very simple. We have the following HTML markup:

<div id="big"><img src="" /></div>
<ul>
    <li><img src="exemplo.png" /></li>
    <li><img src="exemplo.png" /></li>
    <li><img src="exemplo.png" /></li>
</ul>

Your marking may be different from this one, but what matters is the mechanics. The goal is to show the image clicked on the larger div, right? Let’s start creating the function to be rotated by clicking on any of the images:

$('ul li img').click(function() {...

First we get the url of the image that was clicked:

var url = $(this).attr('src');

And then we set the new image url of the div #big:

$('#big img').attr('src', url);

Simple, it’s not even?

---

Demonstration

CSS is just to improve the presentation even.

$(function() {
    $('ul li img').click(function() {
        var url = $(this).attr('src');
        $('#big img').attr('src', url);
    });
});

#big {
    border:1px solid #333;
    width:300px;
    height:250px;
    margin:0 auto;
}

ul {
    list-style:none;
    text-align:center;
    padding:0;
}

ul li {
    display:inline-block;
    width:100px;
    height:100px;
}

img {
    width:inherit;
    height:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="big"><img src="" /></div>
<ul>
    <li><img src="http://static.hsw.com.br/gif/gatos-2.jpg" /></li>
    <li><img src="http://www.mensagenscomamor.com/images/interna/new/frases_de_gatos.jpg" /></li>
    <li><img src="https://farm9.staticflickr.com/8608/16526776600_7acef45936_o.jpg" /></li>
</ul>