Jump to content

Chogori

Members
  • Posts

    5
  • Joined

  • Last visited

Profile Information

  • Gender
    Male

Chogori's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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;}
  2. And what is the best solution? Make currentTD global and then wrap whole script in function? Like this? https://jsfiddle.net/4odhrgLL/3/ Sorry for (maybe) stupid questions, I am JS newbie
  3. I am trying to write a script, which: • after the click on any <td> cell makes <div id="pole"> visible • after the click on one of the <li> from <div id="pole> take the content of this li and insert it to <td> cell, which onclick makes <div> visible AND change <div> visibility back to "hidden" Everything works almost fine. Almost... For example: 1) I click on some <td> cell and then choose <li> "strength" - that´s ok, "strength" is written to that cell 2) After that I click on another cell and choose <li> "endurance" - "endurance" is written to that cell, BUT the content of the first cell is changed to "endurance" too Can somebody fix it? And explain me where is the mistake? Whole code is here: https://jsfiddle.net/4odhrgLL/2/ Thanks a lot and sorry for my english... var ParentTable = document.getElementById("mytable");var childTD = ParentTable.getElementsByTagName("td");var pole = document.getElementById("pole");var rest = document.getElementById("rest");var treningType = pole.getElementsByTagName("li");for(i=0;i<childTD.length;i++) { childTD[i].addEventListener("click", clickTD);} function clickTD(e) { var currentTD = e.target; pole.style.visibility = "visible"; for(j=0;j<treningType.length;j++) { treningType[j].addEventListener("click", insertToTD); } function insertToTD(e) { var currentTraining = e.target; currentTD.innerHTML = currentTraining.innerHTML; pole.style.visibility = "hidden"; } }
  4. Ingolme, thanks, you are absolutly right!
  5. Can somebody explain me, why is necessary to write: childTD[i].addEventListener("click", function(){changeColor(this);}); and not just: childTD[i].addEventListener("click", changeColor(this)); Here is the whole code: var ParentTable = document.getElementById("mytable");var childTD = ParentTable.getElementsByTagName("td");for(i=0;i<childTD.length;i++) { childTD[i].addEventListener("click", function(){changeColor(this);});}function changeColor(element) { element.style.backgroundColor="red";} Thanks a lot!
×
×
  • Create New...