When you click on the smaller div, open the

Question

When you click on the smaller div, open the

Navigation

#1 by (3 votes)

3

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 smaller square, it has to show in the larger square.

Is there any plugin for this? I need to be manageable.

jquery

asked by anonymous 12.04.2015 / 03:12

1 answer

Compare TXT file with table in database When concatenating String add an ENTER

score 3 · Accepted Answer

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 markup may be different than this, but what matters is the mechanics. The goal is to show the image clicked on the larger div, right? Let's start by creating the function to be rotated by clicking on any of the images:

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

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

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

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

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

Simple, is not it?

Demonstration

CSS is just to enhance the presentation itself.

$(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><divid="big"><img src="" /></div>
<ul>
    <li><img src="http://static.hsw.com.br/gif/gatos-2.jpg"/></li><li><imgsrc="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>