smus 1 Posted January 13, 2017 Report Share Posted January 13, 2017 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! Quote Link to post Share on other sites
justsomeguy 1,135 Posted January 13, 2017 Report Share Posted January 13, 2017 It sounds like the best way is to just figure out how it wants the titles and output them like that. Quote Link to post Share on other sites
smus 1 Posted January 16, 2017 Author Report Share Posted January 16, 2017 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 Quote Link to post Share on other sites
smus 1 Posted January 16, 2017 Author Report Share Posted January 16, 2017 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. Quote Link to post Share on other sites
justsomeguy 1,135 Posted January 16, 2017 Report Share Posted January 16, 2017 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? Quote Link to post Share on other sites
smus 1 Posted January 17, 2017 Author Report Share Posted January 17, 2017 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)} Quote Link to post Share on other sites
justsomeguy 1,135 Posted January 17, 2017 Report Share Posted January 17, 2017 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? Quote Link to post Share on other sites
smus 1 Posted January 18, 2017 Author Report Share Posted January 18, 2017 Yes, perfectly! No, I've changed that code. I was actually changing it several times while trying to make it work Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.