• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyświetlenie zdjęcia w divie po naciśnięciu zdjęcia w osobnym divie.

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
599 wizyt
pytanie zadane 23 marca 2022 w JavaScript przez Rafał Zduński Nowicjusz (200 p.)

Witam, tak jak w tytule, nie wiem jak powinien wyglądać kod, żeby po naciśnięciu małego zdjęcia w jednym divie, pojawiło się ono w divie poniżej w większym rozmiarze. Zdjęcia mam przygotowane, w HTML i CSS też wszystko jest jak należy. Brakuje mi jedynie kodu który pomoże mi to jakoś połączyć. Szukałem odpowiedzi przez długie godziny, jednak bezskutecznie.

HTML + CSS 

 

Z góry dzięki za pomoc ;)

 

2 odpowiedzi

+2 głosów
odpowiedź 23 marca 2022 przez VBService Ekspert (255,840 p.)
wybrane 24 marca 2022 przez ScriptyChris
 
Najlepsza

Możesz posłużyć się: document.querySelector() do pobrania elementu html, który zawiera w sobie elementy img (zdjęcia) i skorzystać z Event Delegation do przypisania zdarzenia click ... "naciśnięciu małego zdjęcia w jednym divie, pojawiło się ono w divie poniżej w większym rozmiarze"

 

przykład  [ on-line ]

window.addEventListener('load', load);

function load() {
  const image_container = document.querySelector('.postcardmulti1'),
        image_zdj = document.querySelector('#zdj');
  image_container.addEventListener('click', showBiggerImage);

  function showBiggerImage(e) {
    if (e.target.nodeName == 'IMG' && image_zdj.src != e.target.src) {
      image_zdj.src = e.target.src;
    }		
  }
}

 

komentarz 24 marca 2022 przez VBService Ekspert (255,840 p.)

P.S  wink

[ on-line ]

dodaj do css

#multi5 img {
  opacity: 1;
  transition: opacity 0.25s linear;
}
window.addEventListener('load', load);

function load() {
  const image_container = document.querySelector('.postcardmulti1'),
        image_zdj = document.querySelector('#zdj');
  image_container.addEventListener('click', showBiggerImage);

  function showBiggerImage(e) {
    if (e.target.nodeName == 'IMG') {
      if (image_zdj.src != e.target.src) {
        image_zdj.style.opacity = "0";      
        setTimeout(_=> {
          image_zdj.src = e.target.src;
          image_zdj.style.opacity = "1"; }, 300);
      }		
    }
  }
}

 

komentarz 24 marca 2022 przez VBService Ekspert (255,840 p.)
edycja 24 marca 2022 przez VBService

Jakby potraktować "dosłownie" treść Twojego pytania. wink

Wyświetlenie zdjęcia w div-ie po naciśnięciu zdjęcia w osobnym div-ie

 

<div class="image-container">
  <div class="image-selection">
    <div style="background-image: url(https://picsum.photos/500/500/?random=1)">
      <a href="#"></a>        
    </div>
    <div style="background-image: url(https://picsum.photos/500/500/?random=2)">
      <a href="#"></a>        
    </div>
    <div style="background-image: url(https://picsum.photos/500/500/?random=3)">
      <a href="#"></a>        
    </div>
    <div style="background-image: url(https://picsum.photos/500/500/?random=4)">
      <a href="#"></a>        
    </div>
  </div>
  <div class="image-viewer" style="background-image: url(https://picsum.photos/500/500/?random=1)"></div>
</div>
* {
  box-sizing: border-box;
}
:root {
  --image-selection-main-size: 3em;
  --image-selection-main-margin-size: 0.5em;
}
.image-container {
  margin: 1em;
  width: 500px;
  height: 500px;
}
.image-container .image-selection {
  display: flex;
}
.image-container .image-selection div {
  display: table;
  width: var(--image-selection-main-size);
  height: var(--image-selection-main-size);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: var(--image-selection-main-margin-size);
}
.image-container .image-selection div a {
  display: table-cell;
}
.image-container .image-viewer {
  margin: 0;
  border: 2px solid rgba(0,0,0,0.1);
  width: 100%;
  height: calc(100% - (var(--image-selection-main-size) + var(--image-selection-main-margin-size) + 2px));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
window.onload = load;

function load() {
  const image_selection = document.querySelector('.image-selection'),
           image_viewer = document.querySelector('.image-viewer');

  image_selection.addEventListener('click', imageView);

  function imageView(e) {
    if (e.target.nodeName == 'A') {
      //console.log(e.target.parentElement.style.backgroundImage);
      const image = e.target.parentElement;
      if (image_viewer.style.backgroundImage != image.style.backgroundImage) {
        image_viewer.style.backgroundImage = image.style.backgroundImage;
      }
    }
  }
}

 

0 głosów
odpowiedź 24 marca 2022 przez Rafał Zduński Nowicjusz (200 p.)
Dzięki wielkie za pomoc :)

Podobne pytania

0 głosów
1 odpowiedź 891 wizyt
+1 głos
1 odpowiedź 156 wizyt
pytanie zadane 2 lipca 2016 w HTML i CSS przez parimple Początkujący (260 p.)
0 głosów
3 odpowiedzi 2,080 wizyt

93,097 zapytań

142,060 odpowiedzi

321,514 komentarzy

62,441 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...