Replacing IMG source with vannila JS

Question

my goal is to change id="current" image source with source of a clicked image. The current image should display image source of higher resolution image and lower resolution images should be there as an option to choose from. When lower resolution image is clicked current image should display a particular image with higher resolution, remaining images have lower res.

photos/thumbnails/... = lower res images

photos/.... = higher res images.

current is static and displays clicked connect with higher res other in lower res.

Thank you very much I´m hopeless right now. Thank you for your advice and guidance, it´s my first js project.

  <div class="container">
<div class="main-img">
  <img src="photos/thumbnails/01.jpg"  id="current">
</div>
  <div class="imgs">
    <img src="photos/thumbnails/01.jpg"  id="1">
    <img src="photos/thumbnails/02.jpg"  id="2">
    <img src="photos/thumbnails/03.jpg"  id="3">
    <img src="photos/thumbnails/04.jpg"  id="4">
    <img src="photos/thumbnails/05.jpg"  id="5">
    <img src="photos/thumbnails/06.jpg"  id="6">
    <img src="photos/thumbnails/07.jpg"  id="7">
    <img src="photos/thumbnails/08.jpg"  id="8">
    <img src="photos/thumbnails/09.jpg"  id="9">
    <img src="photos/thumbnails/10.jpg"  id="10">
    <img src="photos/thumbnails/11.jpg"  id="11">
    <img src="photos/thumbnails/12.jpg"  id="12">
   </div>
  </div>

    imgs.forEach(img => img.addEventListener("click", imgClick));
  function imgClick(e) { 
    if(current.src .includes("thumbnails/") === true) {
        for(let i = 1; i <= current.src.length; i += 1) { 
          i = [ 
            [document.getElementById("1").src=  "photos/01.jpg"],
            [document.getElementById("2").src = "photos/02.jpg"],
            [document.getElementById("3").src = "photos/03.jpg"],
            [document.getElementById("4").src = "photos/04.jpg"],
            [document.getElementById("5").src = "photos/05.jpg"],
            [document.getElementById("6").src = "photos/06.jpg"],
            [document.getElementById("7").src = "photos/07.jpg"],
            [document.getElementById("8").src = "photos/08.jpg"],
            [document.getElementById("9").src = "photos/09.jpg"],
            [document.getElementById("10").src = "photos/10.jpg"],
            [document.getElementById("11").src = "photos/11.jpg"],
            [document.getElementById("12").src = "photos/12.jpg"]
        ]

}
 }
  //  works
   current.src = e.target.src;   
}

https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html you need to start `id` with letter — Alejandro, Oct 09 '18 at 10:26
@Alex that's only for HTML4 - using a numeric ID works fine in modern browsers. — VLAZ, Oct 09 '18 at 10:29
@OP this `for` loop seems very suspicious. Just by scanning it, I very much doubt it works. You are using `i` in all sorts of different ways - you initialise it as a number, compare it to the length of a string in the condition, then overwrite it with an array inside the loop. I'm not even sure what this is trying to do but I am pretty sure it's not what you want. — VLAZ, Oct 09 '18 at 10:33
Loop is gone. My idea was to use source from an array... But I managed to delete source and it´s working. Thank you again — , Oct 09 '18 at 14:25

Alejandro · Accepted Answer · 2018-10-09T11:26:01.703

0

You can just remove thumbnails/ from target source, i.e.:

function imgClick(e) {
  current.src = e.target.src.replace('thumbnails/', '');   
}

So it replaces thumbnails/ in the original target with empty string, and assign the new source to current.

edited Oct 09 '18 at 11:26

answered Oct 09 '18 at 10:40

Alejandro

5,834
1
19
36

@MasterMind, glad to help! Can you apply the answer if it's ok? – Alejandro Oct 09 '18 at 14:42
How can I do that? – Oct 09 '18 at 14:54
1

Greetings to Belarus from Czecho brother – Oct 09 '18 at 14:55
@MasterMind nice to meet you! :) just [click green check left to the answer](https://stackoverflow.com/tour) – Alejandro Oct 09 '18 at 14:56
My honor. Have you any idea how to proceed to make from the current img slider. I want to have left and right arrow to go to further or previous images. How should I add arrows? I saw some post, where it was added by constructor... Any guidence is welcome. With the best regards – Oct 09 '18 at 15:01
@MasterMind it's complex, I don't think I'll been able to write everything in one comment. Generally - make slider fixed width, and add arrow images outside the container to the very left and right. Attach onClick to [images using scrolling](https://stackoverflow.com/questions/16465454/how-do-i-scroll-to-the-right-on-a-page-that-overflows-horizontally). Something like this. – Alejandro Oct 09 '18 at 15:07
@MasterMind or you can track which part of the `current` image is clicked (using e.target.x), and if's from left - then navigate to left, and vice versa. – Alejandro Oct 09 '18 at 15:12

Replacing IMG source with vannila JS

1 Answers1