Display Image Caption on enlarged view

Question

Basically i need to display Image name(caption) when the image in enlarged. So i tried with this sample code.

Sample Code for Image Gallery

Demo of the same is given below

Demo of the same

Now what i want is when the image is enlarged in the left hand side there is a caption Image 1 of 3 . Instead of that i need the Image Caption ie Image1.png similar like this.

When i opened lightbox js file i found this line where it will display Image 1 of 3 line

if (this.imageArray.length > 1){
            this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
        }

I tried to alter the code by replacing (this.activeImage + 1) as (this.activeImage.value) But its showing undefined.

How to display the name of the respective image when the image is enlarged. Any help appreciated.

Answer 1

In the PHP code,

Find

echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';

Replace with

echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']"> title="Whatever Title You Need or get FileName by using php"';