Using Javascript, how to make individual captions for each of my lightbox gallery images?

Question

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 :)

http://jsfiddle.net/5anutL1e/

right after your img.src=imgnumber; try adding this line document.getElementById('fore h2').innerHTML=imgNumber; I am just thinking out loud here. I cannot try it here.. — Sai, Nov 24 '14 at 20:47
@Sai I'm sorry I tried to make a jsfiddle there but I cant get my images to work in it unfortunately, thanks for helping out, didn't work sadly, my thumbnails weren't clickable after I entered that code in — user3594463, Nov 24 '14 at 20:56
Use already hosted images. Check this site with placeholder images. You can use any size you want - http://lorempixel.com/ For example 200x200 images: http://lorempixel.com/200/200/sports/1/ http://lorempixel.com/200/200/sports/2/ Now you can make JSFiddle so I can help you. — Michael Money, Nov 24 '14 at 21:06

score 1 · Answer 1 · answered Nov 24 '14 at 20:56

1

It depends what lightbox plugin you are using You could try with ALT attribute. It's highly recommended for SEO. As Sai asked, you should provide JSFiddle example. Otherwise it would be difficult to help you.

 <img alt="This is you caption" src="daisy.jpg" height="150px" width="150px" class="small"   onClick="lightBox('daisy.jpg');">

answered Nov 24 '14 at 20:56

Michael Money

2,441
1
22
25

Thanks Mike this will work in putting "this is your caption" under all my pictures, but I want to make a different caption for each. I 'm not using a lightbox plugin made it myself using css and javascript, I will try again with the jsfiddle but it wont work with my images unfortunately :/ – user3594463 Nov 24 '14 at 21:01

Michael Money · Accepted Answer · 2014-11-25T15:54:37.743

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>

One last question :) If I was to add an 'x' button to the gallery that closes the image once clicked where do you recomend I place it and what sort of js would I need to do that? — user3594463, Nov 25 '14 at 17:18
Adding close button isn't a problem. It would be pure HTML+CSS. You need to create two three new containers (divs) where you instert your [X]character. After that add CSS to those divs to make them button-style look. That would be all. Check working JSFiddle. I made an example for you and pimp it up a little bit - http://jsfiddle.net/cx20mdzm/1/ — Michael Money, Nov 26 '14 at 18:44

Using Javascript, how to make individual captions for each of my lightbox gallery images?

2 Answers2