Jump to content

Image gallery: displaying title for each picture


smus

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)}
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...