Hi, can somebody help me with the following task?
I am trying to make a gallery with small "preview" pictures, which are in form of background-images. After the click on one of these small pictures, i want to display a "window" (<div> actually) with full-sized picture.
Everything works fine. But afterthat, i want to insert "<" and ">" symbols for switching on previous/next picture to my <div> "window". I tried different ways, but without success. I have no idea how to get index of active "smallImages", tj. img, whose url is now src of "largeImg". (btw. I have to convert "smallImages" Node List to array probably and then use IndexOf and nextElementSibling, but i am not sure how to do it)
Code example: https://jsfiddle.net/t3yLjsoe/2/ (in reality, i have cca 20 different galleries (with differenr url path), 40 pictures in each of them.
Thanks a lot and sorry for my poor English.
HTML:
<div id="spaceForLargeImg"> <!-- space for large pictures --> <span id="previousImg"><</span> <img id="largeImg" src="" /> <span id="nextImg">></span></div><div class="pictures"> <div class="thumb" style="background-image: url('images/mohelno/img1.jpg');" title=""></div> <div class="thumb" style="background-image: url('images/mohelno/img2.jpg');" title=""></div> <div class="thumb" style="background-image: url('images/mohelno/img3.jpg');" title=""></div></div>
JS:
function imgChange(){ var smallImages = document.getElementsByClassName("thumb"); var spaceForLargeImg = document.getElementById("spaceForLargeImg"); var largeImg = document.getElementById("largeImg"); function displayImg(e){ var activeImg = e.target; var url = activeImg.style.backgroundImage; var urlNew = url.slice(4, -1).replace(/"/g, ""); largeImg.src = urlNew; spaceForLargeImg.style.display = "block"; } for (i=0;i<smallImages.length;i++){ smallImages[i].addEventListener("click", displayImg); }}imgChange();
CSS:
#spaceForLargeImg{ display: none;}.pictures{ overflow: scroll; overflow-y: hidden; white-space:nowrap;}