FancyBox Pro Captions, Revolution Slider

Hi Joseph, welcome on these forums!

First I’d like to ask you to try the Revolution Slider code provided here https://premium.status301.net/support/topic/slider-revolution-revslider-integration/ instead of the code you are using now. It will make things a lot simpler because the code suggested by the RevSlider people disables all FancyBox settings on your Settings >> Media page.

Next, could you share a link to the page with your slider? I’d like to see how these captions appear in the source code: as title or alt attributes or otherwise? FancyBox can take alt or title attributes but something else will need some customisation.

Rolf

Hi Joseph, the site is showing a blocking error in console:

Uncaught Error: Syntax error, unrecognized expression: div.rev_slider

It is caused by the comma that follows div_revslider in the Section(s) field on Settings > Media. Remove that comma unless you want to have another section identifier (like “div.gallery”) there.

I’ll update the instructions so they are clearer about when to uses commas 🙂

OK, it looks like it is working fine now. Let’s proceed to the more difficult step of making the Revolution Slider caption known to FancyBox so it can be used as a title.

This will be more difficult to figure out so please allow for a few (failing) attempts 🙂

Try adding this script snippet in a text widget:

<script type="text/javascript">
jQuery('div.slidelink a').each( function() {
  var altText = jQuery(this).closest('li').find('div.Photography-Textblock').text();
  jQuery(this).attr('alt', altText);
});
</script>

Or maybe this version is a little bit faster:

<script type="text/javascript">
jQuery('ul.tp-revslider-mainul li').each( function() {
  var altText = jQuery(this).find('div.Photography-Textblock').text();
  jQuery(this).find('div.slidelink a').attr('alt', altText);
});
</script>

In any case, let me know when you put this in place (even if it’s not working) so I can see the result live. Thanks !

OK, I’ll have to test/finetune the script and maybe find a way to make it work in the Custom Script field instead… I’ll come back to you here as soon as I have a more workable solution. Thank you for you patience 🙂

Please try this:

1. remove the text widget again.

2. go to the slider Custom Code field and 3 new lines of code to the current code so that it looks like:

api.on('revolution.slide.onloaded', function() {
    jQuery(document).trigger('post-load');
    jQuery(this).on('click', function() {api.revpause()});
    jQuery(this).find('li').each( function() {
	var title = jQuery(this).find('div.Photography-Textblock').text();
	jQuery(this).find('div.slidelink a').attr('title', title);
    });
});

(copy/paste the 3 new lines to add)

3. purge the cache (which caching system is that anyway?)

From my end it seems to be working. There is a title showing under the images in FancyBox. It’s just not very visible with a black font on dark background.

Try settings the default Title color in the Window section on Settings > Media to #fff or choose another Title Position in the Images section.

Hi Joseph,

First, go to Setting > Media and clear the field “Title color”. It is currently set to #000000 which forces the text to black. If you don’t need it, best to leave it empty.

Then, for further styling you’ll need to set some style rules. These can be added either to the child theme stylesheet, or (if you’re not using a child theme) to a Custom CSS option in the theme settings or provided by a plugin like the Jetpack Custom CSS module.

Here is an example of CSS to make the text centered and larger:

#fancybox-title {
  text-align: center;
  font-size: 18px;
}

Let us know how it works out!