I understand this is probably extremely simple but I can't get my head around it. As it stands, I have my lightbox gallery fully working, images popping up when thumbnail selected and then when clicked off returning to main page.
What javascripting code am I missing to make my individual images have individual captions?
Here is part of my html body:
<h1> My Photo Gallery </h1>
<div id="back" onClick="Box();">
</div>
<div id="fore">
<img src="daisyl.jpg" id="changeImg">
<h2>Caption One</h2>
</div>
<div id="thumbnails">
<img src="daisy.jpg" height="150px" width="150px" class="small" onClick="lightBox('daisy.jpg');">
<img src="zigl.jpg" height="150px" width="150px" class="small" onClick="lightBox('zigl.jpg');">
<img src="cork.jpg" height="150px" width="150px" class="small" onClick="lightBox('cork.jpg');"> <img src="tri.jpg" height="150px" width="150px" class="small" onClick="lightBox('tri.jpg');">
</div>
I have four images. At the moment under my 'fore' DIV they all have the same caption "Caption One". For the purpose of yer examples I will call the four captions, "Caption One", "Caption Two.. and so fort :)
My javascript:
<script type="text/javascript">
function lightBox(imgNumber){
var img = document.getElementById('changeImg');
img.src = imgNumber;
document.getElementById('back').style.display = "block";
document.getElementById('fore').style.display = "block";
}
function Box(){
document.getElementById('back').style.display = "none";
document.getElementById('fore').style.display = "none";
}
</script>
If you can help me out it would be greatly appreciated!! I think I gave enough code for ye to work with but if not please let me know :)
Here's my fiddle, the lightbox didnt work on it for me but might for ye, it works for me outside of jsfiddle :)
Working example below. I've added caption, so now your lightbox gets description from ALT tag It's not pretty code but I tried to make it simple for you. In the future I recommend using jQuery for those type of features :)
JSFiddle - http://jsfiddle.net/cx20mdzm/
<html>
<head>
<title>Gallery</title>
<style>
body{
background-color: white;
margin: 0;
padding: 0;
}
h1{
margin-left: 40px;
margin-top: 40px;
font-size: 40px;
font-family: 'Pacifico', cursive;
}
p {
margin-left: 40px;
margin-right: 100px;
}
#thumbnails{
margin-left: 40px;
margin-top: 40px;
margin-bottom: 40px;
}
.small{
padding-right: 10px;
}
#fore{
display: none;
border: 1px solid white;
background-color: white;
height: 550px;
width: 500px;
margin-left: -280px;
margin-top: -290px;
left: 50%;
top: 50%;
position: fixed;
padding: 10px;
}
#back {
width: 100%;
height: 3000px;
background-color: black;
position: fixed;
opacity: 0.8;
-moz-opacity:0.8;
-webkit-opacity:0.8;
display: none;
cursor: pointer;
margin-top: -200px;
}
h2{
font-family: 'Pacifico', cursive;
margin-top: -5px;
}
</style>
</head>
<body>
<h1> My Photo Gallery </h1>
<div id="back">
</div>
<div id="fore" style="display:none;">
<img src="http://lorempixel.com/output/people-q-c-500-500-4.jpg" id="changeImg">
<h2 id="caption">Caption One</h2>
</div>
<div id="thumbnails">
<img id="thumb1" alt="description 1" src="http://lorempixel.com/output/people-q-c-500-500-4.jpg" height="150px" width="150px" class="small">
<img id="thumb2" alt="description 2" src="http://lorempixel.com/output/abstract-q-c-500-500-5.jpg" height="150px" width="150px" class="small">
<img id="thumb3" alt="description 3" src="http://lorempixel.com/output/fashion-q-c-500-500-6.jpg" height="150px" width="150px" class="small">
<img id="thumb4" alt="description 4"src="http://lorempixel.com/output/nature-q-c-500-500-5.jpg" height="150px" width="150px" class="small">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac est rutrum, eleifend tortor consectetur, pulvinar risus. Nunc auctor mattis turpis, vitae tempus leo gravida eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam nec augue mi. Sed eu vehicula libero. In at dictum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus vitae commodo eros, quis fermentum elit. Cras id egestas diam, eu commodo augue.
</p>
<p>
Donec magna metus, dictum vitae dapibus eu, interdum id libero. Phasellus ut velit vehicula, faucibus ipsum eu, iaculis nunc. Nam venenatis vel ipsum vitae posuere. Curabitur pellentesque erat est, fringilla sollicitudin felis volutpat id. Vestibulum condimentum ex vitae blandit lacinia. Donec non nunc auctor, luctus mi ac, pretium nisl. In eu arcu a enim facilisis varius. Nulla ullamcorper, lorem nec cursus porta, ligula arcu fermentum nunc, et sollicitudin tellus magna ac mi. Fusce faucibus fermentum nibh id pulvinar. In ornare venenatis placerat. Curabitur varius rhoncus neque. Duis lobortis, quam ac iaculis gravida, lectus dui tristique dui, sed commodo nunc nibh in ex.
</p>
<script>
var thumb1 = document.getElementById("thumb1");
var thumb2 = document.getElementById("thumb2");
var thumb3 = document.getElementById("thumb3");
var thumb4 = document.getElementById("thumb4");
var back = document.getElementById("back");
var fore = document.getElementById("fore");
var btn = document.getElementById("btn");
var what = document.getElementById("what");
thumb1.addEventListener("click", function() {
lightBox(thumb1.src,thumb1.getAttribute('alt'));
}, false);
thumb2.addEventListener("click", function() {
lightBox(thumb2.src,thumb2.getAttribute('alt'));
}, false);
thumb3.addEventListener("click", function() {
lightBox(thumb3.src,thumb3.getAttribute('alt'));
}, false);
thumb4.addEventListener("click", function() {
lightBox(thumb4.src,thumb4.getAttribute('alt'));
}, false);
back.addEventListener("click", Box, false);
function lightBox(imgSource,imgCaption){
var preview = document.getElementById('changeImg');
var caption = document.getElementById('caption');
caption.innerHTML = imgCaption;
preview.src = imgSource;
back.style.display = "block";
fore.style.display = "block";
};
function Box(){
back.style.display = "none";
fore.style.display = "none";
}
</script>
</body>
</html>