Jump to content

back/previous button: background-image


Chogori
 Share

Recommended Posts

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;}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...