Chce uzyskać efekt działania miniatury

[HTML] pobierz, plaintext 
<style>
#box{
border:solid 10px;
width:500px;
height:500px;
}
.img{
width:100px;
height:100px;
}
 
</style>
 
<div id="box">TEST</div>
 
 
<img class="img" src="https://gamehag.com/img/avatar/2898.png" alt="Smiley face" height="42" width="42">
 
 
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
$(function() {  
$('.img').click(function(){
    $('#box').css('background', 'url(https://gamehag.com/img/avatar/2898.png)');
 
  });  
 
});
</script>
[HTML] pobierz, plaintext 

Pytanie: W jaki sposób zrobić z powyższego skryptu coś uniwersalnego? Tak by mogło być kilka obrazków i wszystkie mogły być wstawiana do #box?? Da się to zrobić by linku do każdego obrazka nie było w js?

Domyślam się, że należy edytować ten kawałek, tylko proszę o podpowiedź jak:

[HTML] pobierz, plaintext 
    $('#box').css('background', 'url(https://gamehag.com/img/avatar/2898.png)');
[HTML] pobierz, plaintext 

A nie możesz ustawić background bezpośrednio w CSS, bez użycia JS?

<img class="img" src="https://gamehag.com/img/avatar/2898.png" alt="Smiley face" height="42" width="42">
<img class="img" src="https://gamehag.com/img/avatar/111.png" alt="Smiley face" height="42" width="42">
<img class="img" src="https://gamehag.com/img/avatar/2222.png" alt="Smiley face" height="42" width="42">

Nie, bo gdy będę miał taką sytuację (więcej zdjęć) chciałbym móc wyświetlać te zdjęcia w div #box

To wstaw wszystkie do #box, a wyświetlaj zawsze tylko jeden. Ale nie używaj ich jako background, tylko wciąż jako <img>.

http://jsfiddle.net/Qhdaz/616/

Chciałbym efekt taki jak tu z tym, że dla przełaczania pomiedzy obrazkami duży obrazek ma dostawac klase active, jak to zmodyfikować?

Dodawać taką klasę do dużego obrazka, przy klikaniu na mały obrazek.
Właściwie to sam sobie odpowiedziałeś.

Wiem gdzie przypisać klasę, lecz nie wiem jak ją usuwać z poprzedniego elementu.

[PHP] pobierz, plaintext 
$(".small-images img").click(function (e) {
        var $this = $(this),
            index = $this.index();
        $(".small-images img").removeClass('selected');
        $this.addClass('selected');
        $("#big-image img").eq(index).show().siblings().hide();
		$("#big-image img").eq(index).addClass('active');
    });
[PHP] pobierz, plaintext 

Z wszystkich usuwaj, a jednemu przypisuj.

Masz opis takiej galerii https://prophp.pl/article/25/prosta_galeria...ystaniem_jquery

Teraz ostatnie pytanie, każdy element big ma w momecie jego wyswietlenia class active

[HTML] pobierz, plaintext 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.loupe.min.js"></script>
<script>
	$('.active').loupe();
</script>
[HTML] pobierz, plaintext 

Wiec taki kod chyba powinien zadzialac?

Efekt jak tu:
http://redopop.com/loupe/

Nie, dlatego, że ta lupa podłącza się do elementów z tą klasą, które istnieją zaraz po załadowania strony.
Spróbuj dołączyć ją do wszystkich dużych zdjęć.

Teoretycznie mam element po załadowaniu, domyślne zdjęcie ma odrazu klase active

[PHP] pobierz, plaintext 
$("#big-image img:eq(0)").addClass('active');
[PHP] pobierz, plaintext 

Podłączenie do

[PHP] pobierz, plaintext 
$('#big-image').loupe({
[PHP] pobierz, plaintext 

też nie pomaga

No, ale nie podłączyłeś wcale do obrazka/ów, tylko do div#big-image.