Selector de imagene

Selecciona la imagen pequeña que sera puesta por la grande

by MiguelR

HTML

<div id=contenedor-imagenes>
    <img id="imagen-principal" src="http://www.teleton.org.ni/images/stories/teleton_logo_generico.png" alt="" />
    <ul>
        <li>
            <img class="imagen-pequena" src="http://www.teleton.org.ni/images/stories/teleton_logo_generico.png" alt="" />
        </li>
        <li>
            <img class="imagen-pequena" src="http://www.teleton.org.ni/images/stories/sidebar_como_donar.jpg" alt="" />
        </li>
        <li>
            <img class="imagen-pequena" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSXPYW0S5tO4ZSH8dcC8chaqZ9cwBXl8cLkCwLGpDmvcq0B11is" alt="" />
        </li>
        <li>
            <img class="imagen-pequena" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQFPy7cXJ3h71D-f5XgoGK7PiQHOSOCq7bCyqkrM0_1FpDr-_Bz" alt="" />
        </li>
    </ul>
</div>

CSS

#contenedor-imagenes {
    height: 300px;
    width: 300px;
}
#imagen-principal {
    height: 150px;
    width: 150px;
    background-image: url("http://www.teleton.org.ni/images/stories/teleton_logo_generico.png");
    margin-left: 55px;
    background-repeat: no-repeat;
}
#contenedor-imagenes ul {
    margin: 15px auto;
    overflow: hidden;
}
#contenedor-imagenes li {
    list-style: none;
    float: left;
}
.imagen-pequena {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

JavaScript

$(".imagen-pequena").click(function () {
    $("#imagen-principal").attr("src", $(this).attr("src"));
})