Jump to content

Problems Creating a Lightbox With Javascript?


Recommended Posts

Hello, in my HTML file I have 3 rows with 5 pictures in each, and when you click on them a larger version of it appears under. How could I use Javascript so when you click on the smaller version, the larger version appears but in a lightbox? This is what I have so far in my attempts to get this working. Any help will be greatly appreciated! Here is my HTML code: <!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title><link href="css/css.css" rel="stylesheet"/><script src="java.js"></script></head><body id="body"><div id="container"> <div id="row_one"> <div class="arrow" id="back_one"></div> <div class="thumb"> <img src="images/picone_th.jpg" alt="img1" /> </div> <div class="thumb"> <img src="images/pictwo_th.jpg" alt="img2" /> </div> <div class="thumb"> <img src="images/picthree_th.jpg" alt="img3" /> </div> <div class="thumb"> <img src="images/picfour_th.jpg" alt="img4" /> </div> <div class="thumb"> <img src="images/picfive_th.jpg" alt="img5" /> </div> <div class="arrow" id="next_one"></div> </div> <div id="row_two"> <div class="arrow" id="back_two"></div> <div class="thumb"> <img src="images/picsix_th.jpg" alt="img6" /> </div> <div class="thumb"> <img src="images/picseven_th.jpg" alt="img7" /> </div> <div class="thumb"> <img src="images/piceight_th.jpg" alt="img8" /> </div> <div class="thumb"> <img src="images/picnine_th.jpg" alt="img9" /> </div> <div class="thumb"> <img src="images/picten_th.jpg" alt="img10" /> </div> <div class="arrow" id="next_two"></div> </div> <div id="row_three"> <div class="arrow" id="back_three"></div> <div class="thumb"> <img src="images/piceleven_th.jpg" alt="img11" /> </div> <div class="thumb"> <img src="images/pictwelve_th.jpg" alt="img12" /> </div> <div class="thumb"> <img src="images/picthirteen_th.jpg" alt="img13" /> </div> <div class="thumb"> <img src="images/picfourteen_th.jpg" alt="img14" /> </div> <div class="thumb"> <img src="images/picfifteen_th.jpg" alt="img15" /> </div> <div class="arrow" id="next_three"></div> </div> <div id="imgbig_box"></div> </div> </body></html>Here is my CSS code: @charset "UTF-8";/* CSS Document */#body{background-color:#B8ECFF;}/* CONTAINER */#container{width:1200px;height:1500px;border: 2px solid;margin:0 auto;}/*ROW ONE */#row_one{width:1195px;height:150px;border:2px solid;margin: 0 auto;}/*ROW TWO */#row_two{width:1195px;height:150px;border:2px solid;margin: 0 auto;}/*ROW THREE*/#row_three{width:1195px;height:150px;border:2px solid;margin: 0 auto;}/* THUMB IMAGE */.thumb{float:left;padding:5px;}/* IMG BIG BOX */#imgbig_box{width:1050px;height:1000px; text-align:center;margin: 0 auto;border:2px solid;}/* ARROWS */.arrow{margin-top:15px;float:left;content:' '; border:20px solid;width:0;height:0;}#back_one{border-color:transparent #FFFFFF transparent transparent; }#next_one{border-color:transparent transparent transparent #FFFFFF; }#back_two{border-color:transparent #FFFFFF transparent transparent; }#next_two{border-color:transparent transparent transparent #FFFFFF; }#back_three{border-color:transparent #FFFFFF transparent transparent; }#next_three{border-color:transparent transparent transparent #FFFFFF; }And here is my Javascript code so far: // JavaScript Documentwindow.onload = awesomeness;var count = 0; var thumbs;function awesomeness(){//get all the imagesthumbs = document.querySelectorAll(".thumb img");//loop through the array, adding onclick to each of the images inside of it//start at 0 (first postion in the array) keep going so long as less than the number of objects in the array, count by 1for(var i=0; i<thumbs.length;i++){thumbs.onclick = showIMG;//give the image an idthumbs.id = i;} //add the onclick to the back and next buttonsdocument.querySelector("#back_one").onclick = goBack;document.querySelector("#next_one").onclick = goNext;document.querySelector("#back_two").onclick = goBack;document.querySelector("#next_two").onclick = goNext;document.querySelector("#back_three").onclick = goBack;document.querySelector("#next_three").onclick = goNext;} //shows the larger image when you click on the thumbnailfunction showIMG(pos){if(pos>-1){ //get the source of the image just clicked//get the image from a position inside of the thumbs array (pos is represting that position)var source = thumbs[pos].src;}else{//if pos is not a number, use the object clicked onvar source = this.src; //parseInt, want to make sure it's a numbercount = parseInt(this.id);} //get a piece of the source that we want, between the last slash and underscore//postion of the last slashvar slash = source.lastIndexOf("/");//position of the last underscorevar under = source.lastIndexOf("_"); var name = source.substring(slash,under); //make the image display using the namedocument.getElementById("imgbig_box").innerHTML = '<img src="images' + name + '.jpg" >';} //functions that run when you click on the back or nexts buttonsfunction goNext(){//increment the counter by 1 (get to the next position)count++; //if the count is greater than or equal to the number of iamges in the array, reset the count to 0if(count >= thumbs.length){count=0;} //call the function to display the larger image//give it the global variable so it will use that number showIMG(count);} function goBack(){count--; //if we are less than 0, reset to the last position in the arrayif(count<0){count = thumbs.length-1;}showIMG(count); //create the overlay divvar overlay = document.createElement("div");//give the new div an idoverlay.id = "overlay";//add the div to the page (inside of the parent, the body tag)document.querySelector("body").appendChild(overlay); //create the container for the lightboxvar boxer = document.createElement("div");boxer.id = "boxer";//add the container div to the overlay divoverlay.appendChild(boxer); //create the back button, the image, and the next buttonvar prev = document.createElement("div");var img = document.createElement("img");var next = document.createElement("div"); //give ids to the back and next buttonprev.id = "btnPrev";next.id = "btnNext"; //change the global variable that keeps our position to the id of the current imgaespos = this.id; //get the larger image from the smaler iimagevar imgsrc = this.src;var slash = imgsrc.lastIndexOf("/");var end = imgsrc.length;var name = imgsrc.substring(slash,end);//add the new source to the created image using the name from aboveimg.src = "images/" + name; //add the image and buttons to the lightbox (in order)boxer.appendChild(prev);boxer.appendChild(img);boxer.appendChild(next); //functions for the back and next buttonsprev.onclick = goPrev;next.onclick = goNext; }

Link to post
Share on other sites
What are you trying to add that your code isn't doing? Do you have an example online?
Hello, thank you for replying! I've uploaded what I have so far, as you can see, when you click on an image thumb, the larger image shows up, but behind the Lightbox in a div. Why is this? Thank you! Edited by RawrRawrRob
Link to post
Share on other sites

In your showIMG function you're setting the innerHTML of the element on the page to show the image. Instead, set the innerHTML of the boxer element to show the image or use document.createElement to create and append an img element as a child of boxer.

Link to post
Share on other sites
In your showIMG function you're setting the innerHTML of the element on the page to show the image. Instead, set the innerHTML of the boxer element to show the image or use document.createElement to create and append an img element as a child of boxer.
I'm still having some troubles... inside of the showIMG function this is what I have before I got stuck:var overlay = document.createElement("div");//give the new div an idoverlay.id = "overlay";//add the div to the page (inside of the parent, the body tag)document.querySelector("body").appendChild(overlay); //create the container for the lightboxvar boxer = document.createElement("div");boxer.id = "boxer"; document.getElementById("boxer").innerHTML = '<img src="images' + name + '.jpg">';
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...