// Give all images an opacity of 50%
$('.images-thumbs img').css('opacity', 'none');

// Give the first loaded image an active class
$('.images-thumbs img:first-child').addClass('active');

// When someone clicks an image thumbnail
$('.images-thumbs img').on('click', function(){

    if($(this).hasClass('active')){
        // Do nothing
    }

    else{
        // Remove the active class from the current loaded image
        $('.images-thumbs').find('.active').removeClass('active');

        // Get the image url
        var imageUrl = $(this).attr('data-url');

        swapImage(imageUrl);

        $(this).addClass('active');

        // Function replaces the src attribute data with new image url
        function swapImage(url){
            var mainImage = $('.image-main img');
            mainImage.attr('src', url);
        }
    }

});