Problems Creating a Lightbox With Javascript?

RawrRawrRob · February 24, 2013

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 Document}^{window.onload = awesomeness;}^{var count = 0;}^{var thumbs;}^{function awesomeness(){}^{//get all the images}^{thumbs = 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 1}^{for(var i=0; i<thumbs.length;i++){}^thumbs^{.onclick = showIMG;}^{//give the image an id}^thumbs^{.id = i;}^} ^{//add the onclick to the back and next buttons}^{document.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 thumbnail}^{function 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 on}^{var source = this.src;}^{//parseInt, want to make sure it's a number}^{count = parseInt(this.id);}^} ^{//get a piece of the source that we want, between the last slash and underscore}^{//postion of the last slash}^{var slash = source.lastIndexOf("/");}^{//position of the last underscore}^{var under = source.lastIndexOf("_");} ^{var name = source.substring(slash,under);} ^{//make the image display using the name}^{document.getElementById("imgbig_box").innerHTML = '<img src="images' + name + '.jpg" >';}^} ^{//functions that run when you click on the back or nexts buttons}^{function 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 0}^{if(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 array}^if(count<0){^{count = thumbs.length-1;}^}^{showIMG(count);} ^{//create the overlay div}^{var overlay = document.createElement("div");}^{//give the new div an id}^{overlay.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 lightbox}^{var boxer = document.createElement("div");}^{boxer.id = "boxer";}^{//add the container div to the overlay div}^{overlay.appendChild(boxer);} ^{//create the back button, the image, and the next button}^{var prev = document.createElement("div");}^{var img = document.createElement("img");}^{var next = document.createElement("div");} ^{//give ids to the back and next button}^{prev.id = "btnPrev";}^{next.id = "btnNext";} ^{//change the global variable that keeps our position to the id of the current imgaes}^{pos = this.id;} ^{//get the larger image from the smaler iimage}^{var 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 above}^{img.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 buttons}^{prev.onclick = goPrev;}^{next.onclick = goNext;} ^}

justsomeguy · February 25, 2013

What are you trying to add that your code isn't doing? Do you have an example online?

RawrRawrRob · February 27, 2013

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 February 28, 2013 by RawrRawrRob

justsomeguy · February 27, 2013

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.

RawrRawrRob · February 28, 2013

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">';

justsomeguy · March 1, 2013

Just set boxer.innerHTML, at that point you haven't appended the element yet so getElementById won't find it.

Sign In

Problems Creating a Lightbox With Javascript?

Recommended Posts

RawrRawrRob

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

RawrRawrRob

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

RawrRawrRob

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity