Image gallery: displaying title for each picture

[smus 1]

I have gallery that generates dynamically from CMS (ModX). There is a 'title' property for each picture. And there is also a lightbox plugin (Magnific Popup) for the gallery that is written in JS which works normally, but I cannot display those titles as captions for each popup image. ('titlesrc' property of the plugin does not take captions from titles of images)

 

Here's what I've added to the plugin file, but it works only after an image is increased (just once), but does not work when I click on the arrow buttons to slide through the images:

document.onclick = myClickHandler;
  
function myClickHandler (e)  
{
        document.getElementsByClassName("mfp-title")[0].innerHTML = e.target.parentElement.getAttribute('title');
}  

So I need either to add an event listener for arrow buttons inside the lightbox to change the particular title each time a picture is changed or initially to make the 'titleSrc' property work normally so to display a caption from the 'title' of an image.

 

Would be very glad if someone could help me with the task!

[justsomeguy 1,135]

It sounds like the best way is to just figure out how it wants the titles and output them like that.

[smus 1]

I just can add the string statically or onclick applying to a parent element. I've found the place to insert a code (an event) when navigating between pictures inside the lightbox, but don't know how to take a title from there, from the next or previous image. The right and left arrow buttons are outside that block of code containing the images, so they are not their ancestors or predecessors.

 

Here's how the page looks like: page

[smus 1]

Almost done! I've added this function to the navigation events (previous and next) and it works normally:

function arrowclick (i)  
{
currentthumb = "thumb_" + i + "";        
document.getElementsByClassName("mfp-title")[0].innerHTML = document.getElementById(currentthumb).getAttribute('title')//+currentthumbid;  
}

But now the first function (that is triggered after popup is initialized) refused to work:

 

document.onclick = myClickHandler;

  
function myClickHandler (e)  
{
        document.getElementsByClassName("mfp-title")[0].innerHTML = e.target.parentElement.getAttribute('title');
}

So they are working well separately, but don't work when I uses them both. I wonder why this contradiction happens?

 

I also tried: document.getElementsByClassName("overlay")[0].onclick = myClickHandler;

 

instead of: document.onclick = myClickHandler;

 

but it's also not working at all.

[justsomeguy 1,135]

Where's the rest of your code? Are you trying to assign both of them to the same thing, like document.onclick, and having them overwrite each other?

[smus 1]

I've already done it! Here is what I've added to the plug-in js-file:

$(document).click(function(event) {
    $(".mfp-title").append(event.target.parentElement.getAttribute("title"));
}); 

This is jQuery code for enabling a title each time a popup image is loaded. And there's also a function on JS for generating titles when user clicks on right or left arrows (navigate between images):

 
function arrowclick (i)  
{
    
   currentthumb = "thumb_" + i + "";    
    
 document.getElementsByClassName("mfp-title")[0].innerHTML = document.getElementById(currentthumb).getAttribute('title');  
}

The function is called, in this case, on prev and next events of the Magnific Popup plug-in:

prev: function {arrowclick(b.index+1)}

next: function {arrowclick(b.index+1)}

[justsomeguy 1,135]

OK, you said this previously:

 

I also tried: document.getElementsByClassName("overlay")[0].onclick = myClickHandler;

 

instead of: document.onclick = myClickHandler;

I'm wondering where that code is which assigns the click handlers. Is everything working now?

[smus 1]

Yes, perfectly! No, I've changed that code. I was actually changing it several times while trying to make it work