Super Basic Photo Gallery w/ thumbs!

HTML

<div class="large-container">
            <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-6.jpg"  class="active"/>
            <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-5.jpg" />
            <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-4.jpg" />
            <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-5.jpg" />
            <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-2.jpg" />
            <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-1.jpg" />
</div>
        
<ul class="gallery">
   <li class="active">
                    <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-6.jpg"/>
                </li>
                <li >
                    <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-5.jpg"/>
                </li>
                <li >
                    <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-4.jpg"/>
                </li>
                <li >
                    <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-3.jpg"/>
                </li>
                <li >
                    <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-2.jpg"/>
                </li>
                <li>
                    <img src="http://shop.flexcon-germany.de/wp-content/uploads/2013/04/Produktbild-1.jpg"/>
                </li>
</ul>

CSS

.large-container {
    position: relative;
    height: 300px;
    width: 300px;
}

.large-container img {
    position: absolute;
    top: 0;
    height: 300px;
    width: 300px;
}

.large-container img.active {
    z-index: 1;
}

ul.gallery {
    padding: 0;
    margin: 10px 0 0 0;
}
.gallery li {
    list-style: none;
    float: left;
    margin-right: 15px;
}
.gallery li img{
    width:37px;
    height:37px;
    
}
.gallery li:hover, 
.gallery li:active , 
.gallery li:focus  {
    opacity: .5;
}
.gallery li.active {
    opacity: .5;
}

JavaScript

var $largeContainer = $(".large-container");
var $largeContainerItems = $largeContainer.find("img");

function changeSlide(slideNumber){
    $largeContainerItems.removeClass("active");
    $largeContainerItems.eq(slideNumber).addClass("active");
}

$("ul").find("li").on("click", function(e){
    changeSlide( $(this).index() );
    $(this).parent().find('.active').removeClass('active');
    $(this).addClass('active');
});