How to rollover text on images dynamically using javascript/jquery

Question

I am new to web development but highly fascinated by it. So, basically I am creating a light-box where thumbnails of images will be appear on screen and they will appear bigger in size when user clicks over them. Now, I want when user hovers over the gallery images/thumbnails then some text should appear over the current image with may be some animation or basically mouser-hover should cause some event to happen but I am unable to do it. Text should be added dynamically or may be previously stored in an array or something of that sort. Please have a look at my code and tell me how to modify it in order to achieve such effect and if you know a better and easier way to do so then feel free to share. Thank you so much!!

HTML:

<div class="gallery">
    <ul id="images"></ul>
    <div class="lightbox">
        <div class='limage'>
        </div>
        <div class='left'>
        </div>
        <div class='right'>
        </div>
        <div class='close'>
            x
        </div>
    </div>
</div>

JAVASCRIPT:

var gallery_slider = new Array();
gallery_slider[0] = "im1.jpg";
gallery_slider[1] = "im2.jpg";
gallery_slider[2] = "im3.jpg";


function displayAllImages() {
    var i = 0,
        len = gallery_slider.length;
    for (; i < gallery_slider.length; i++) {

        var img = new Image();
        img.src = gallery_slider[i];
        img.style.width = '200px';
        img.style.height = '120px';
        img.style.margin = '3px';
        img.style.cursor = 'pointer';

        document.getElementById('images').appendChild(img);
    }
};


$(function() {
    displayAllImages();
});



$(function() {

    $('img').click(function() {
        var hell = (this).src;
        display(hell);
    });
});

function display(hello) {
    $('header').css('display', 'none'); /*for some other purposes*/
    $('.limage').html("<img src=" + hello + " >");
    $('.lightbox').css("display", "block");
    $('.lightbox').fadeIn();

    $('.right').click(function() {
        var im = new Array();
        var x;
        var p;
        for (x = 0; x < gallery_slider.length; x++) {
            im[x] = gallery_slider[x];
        }
        for (p = 0; p < im.length; p++) {
            if (im[p] == hello) {
                break;
            } else {
                continue;
            }
        }
        if (p >= (im.length - 1)) {
            p = -1;
        }

        $('.limage').fadeOut(0);
        $('.limage').html("<img src= " + im[p + 1] + ">");
        $('.limage').fadeIn(500);
        hello = im[p + 1];
    });
    $('.left').click(function() {
        var im = new Array();
        var x;
        var p;
        for (x = 0; x < gallery_slider.length; x++) {
            im[x] = gallery_slider[x];
        }
        for (p = 0; p < im.length; p++) {
            if (im[p] == hello) {
                break;
            } else {
                continue;
            }
        }
        if (p == 0) {
            p = (im.length);
        }

        $('.limage').fadeOut(0);
        $('.limage').html("<img src= " + im[p - 1] + ">");
        $('.limage').fadeIn(500);
        hello = im[p - 1];
    });
    $('.close').click(function() {
        $('.lightbox').fadeOut();
        $('header').css('display', 'block'); /*for some other purposes*/
    });
};

CSS:

.gallery {
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: auto;
}
.gallery ul {
    list-style: none;
}
.lightbox {
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 106;
}
.close {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 100px;
    background-color: #000;
    position: absolute;
    top: 10px;
    right: 20px;
    padding: 10px;
    font-family: firstfont;
    font-size: 30px;
    z-index: 101;
    cursor: pointer;
}
.close:hover {
    background-color: #ebebeb;
    color: #000;
}
.left {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
.limage {
    position: relative;
    margin: auto;
    top: 17%;
    left: 15%;
    max-width: 90%;
    max-height: 90%;
}

There might be some bugs in coding. Watch out. This code is working for displaying images as thumbnails as a matrix and as slider in lightbox when clicked upon them. I am not able to figure out how to add hover functionality to initial thumbnails.

Jsfiddle : http://jsfiddle.net/psd6cbd7/1/

Answer 1

I'd suggest putting a div inside the image div containing the text and then using CSS to hide/show it.

HTML:

    <div class="gallery">
        <ul id="images"></ul>
        <div class="lightbox">
            <div class='limage'>
                <div class=".caption">Caption here</div>
            </div>
            <div class='left'>
            </div>
            <div class='right'>
            </div>
            <div class='close'>
                x
            </div>
        </div>
    </div>

CSS:

.limage { position: relative; }
.caption { display: none; }
.limage:hover .caption { display: block; position: absolute;}

Answer 2

Why you using array to store the images? Anyways, assume that you still using array, below is some example code that you want try:

HTML:

<ul id="images">
</ul>
<!-- assume this is the place that you want to display the caption -->
<div id="caption"></div>

Javascript:

var images = new Array();
images[0] = "p1.png";
images[1] = "p2.png";
images[2] = "p3.png";
images[3] = "p4.png";

var captions = new Array();
captions[0] = "Picture 1";
captions[1] = "Picture 2";
captions[2] = "Picture 3";
captions[3] = "Picture 4";

var x = $("#images");
var y = $("#caption");
const prefix = "image-";

if you are using HTML5:

for (var i = 0; i < images.length; i++) {
    x.append("<img class='roll' src='" + images[i] + "' data-caption='" + captions[i] + "'>");
}

$(".roll").mouseover(function(){
    //do whatever effect here when mouse over
    y.html($(this).attr("data-caption"));
});

If you want to backward compatible:

for (var i = 0; i < images.length; i++) {
    x.append("<img id='" + prefix + i + "' class='roll' src='" + images[i] + "'>");
}

$(".roll").mouseover(function(){
    //do whatever effect here when mouse over
    var index = $(this).attr("id").substring(prefix.length);
    y.html(captions[index]);
});

Hope that this will help.