Jump to content

Image gallery: displaying title for each picture


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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...