[JavaScript][HTML][CSS] Wyświetlanie obrazka w drugim div Opcje

[eminiasty]

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 

[trueblue]

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

[eminiasty]

<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

[trueblue]

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

[eminiasty]

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ć?

Ten post edytował eminiasty 27.07.2017, 18:03:13

[trueblue]

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

[eminiasty]

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 

Ten post edytował eminiasty 27.07.2017, 18:24:27

[trueblue]

Z wszystkich usuwaj, a jednemu przypisuj.

[viking]

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

[eminiasty]

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/

Ten post edytował eminiasty 27.07.2017, 18:47:23

[trueblue]

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ęć.

[eminiasty]

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

Ten post edytował eminiasty 27.07.2017, 18:56:31

[trueblue]

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