Adding titles to specific portfolio item when displayed in Lightbox

Hi,
I see that the lightbox, enlarged image, has the bottom bar hidden in your custom css, the class is “.mfp-bottom-bar” I commented out to allow this to show.
But this is not why the title element is empty, I believe it is due to the old header.php in your child theme, many people are having issues with their lightbox because of the header.php in their child themes, different issues than you, but it’s worth a try.
via ftp, please save a copy of your child theme header.php and then update to the new one and see if that helps.
I also see that you are using a custom script in your child theme for the “magnific-popup” which is the other name for the lightbox, I wonder if that is causing a conflict?
Perhaps try removing it and the code calling to it in your child theme functions.php via ftp, if updating the header.php doesn’t help.

Best regards,
Mike

Hi,
I have found the issue, it was this script in your custom-js.js:

$('[title]').mouseover(function () {
      $this = $(this);
      $this.data('title', $this.attr('title'));
      // Using null here wouldn't work in IE, but empty string will work just fine.
      $this.attr('title', '');
  }).mouseout(function () {
      $this = $(this);
      $this.attr('title', $this.data('title'));
  });

I have commented it out so you can see the title now works.

the color of the lightbox title and counter was very light and hard to see once the script was deactivated, so probably why we missed it the first time. I added this code in the General Styling > Quick CSS field for now so you could see it:

.mfp-title,.mfp-counter {color: #000 !important;}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
a. to enable only on this one page I changed the code to:

.mfp-title,.mfp-counter {
display: none;
}
#top.postid-10774 .mfp-title {
display: block !important; 
color: #000 !important;
text-align: center !important; 
}

b. sorry in this case please try changing the caption text to reflect the title text you wish it to show.
c. the numbers are hidden from the solution in part a.
d. the text is centered from the solution in part a.
Please clear your cache and check.

Best regards,
Mike

Hi,
Sorry I forgot to remove “show-mfp-title”, I was testing with it, but didn’t use it in the final solution.

Best regards,
Mike

Hi,
I took a look at the two pages, and the titles look the same to me, perhaps you just need to clear your browser cache, or I mis-understood.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
Oh I see the title under the lightbox (popup) of the image.
Well first please note that in your css above this code is ment to hide the title:

.mfp-title,.mfp-counter {
display: none;
}

Please make sure this is only in your css once for your whole site, because the next section is meant to override the first code by being placed right after it with more value for one page:

#top.postid-12132 .mfp-title {
display: block !important; 
color: #000 !important;
    text-align: center !important; 
}

So you only want to clone this code for your new page, but it has to be after the code that is trying to hide the element, I hope this makes sense.

This is a trick we do when someone wants to hide all of the lightbox titles except for one page. It this still needed for your site?

I recommend looking though all of your css and removing:

.mfp-title,.mfp-counter {
display: none;
}

then check that the titles are showing, then add this code back in only once at the beginning of all of your code, and ensure that it works on the pages you want it to and not on the others. If it didn’t work right more the code to the end of all of your code and try again, one way or the other it should work. Don’t forget to clear your browser cache, and any caching plugin, after each code change to make sure your looking at the live version.

If you still are having trouble after this please include a admin login so we can assist.

Best regards,
Mike

Hi,
Yes that should work, as long as there is not another insistence of the “display: none;” code further down.

Best regards,
Mike

Hi,
Yes you can use a link in the lightbox popup footer, you’ll want add some color to the link, because by default it is white.
Also your element seems to be “display:none” right now.

.single-portfolio .mfp-title a {
    color: #000 !important; 
}
.single-portfolio .mfp-title,.single-portfolio  .mfp-counter {
    display: block !important; 
    color: #000 !important;
}

Best regards,
Mike

Hi,
Your css is for changing the text black, to change the link black you need to add “a” after the class, to make it work for both add another sector, like this:

#top.postid-12132 .mfp-title,#top.postid-12132 .mfp-title a {
display: block !important; 
color: #000 !important;
    text-align: center !important; 
}

In my test, there is no need to change the link to make it show, just try the css above.
If this doesn’t help, please include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
In the css above, please change “display: block !important;” to:
“display: inline-block !important;”

Best regards,
Mike