FancyBox Pro Captions, Revolution Slider

[Joseph Farmer]

I would like to add captions to my Easy FancyBox Pro lightbox. How do I achieve this? I’m working with the following Javascript code in Revolution Slider:

/* change revapi8 to whatever API name is being used for your slider */
var api = revapi8;

/* no need to edit below unless you want to change the default FancyBox settings */
api.on(‘revolution.slide.onloaded’, function() {

jQuery(this).find(‘.fancybox’).each(function() {

var $this = jQuery(this);
if(!$this.is(‘a’)) $this = $this.removeClass(‘fancybox’).find(‘a’);

$this.addClass(‘fancybox’).attr(‘rel’, ‘gallery’).fancybox({

/* begin FancyBox options */
width: ‘auto’,
height: ‘auto’,
autoSize: true,
aspectRatio: true,
fitToView: true,
autoCenter: true,
overlayShow: true,
overlayOpacity: .8,
overlayColor: ‘#000’,
scrolling: ‘no’,
cyclic: true,
onClosed: function() {api.revresume()}

}).on(‘click’, function() {api.revpause()});

});

});

[RavanH]

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

[Joseph Farmer]

Here is the link: http://wordpress.donnallyarchitects.com/project/magnolia-house-remodel/

I updated the code as per your suggestion, but I have lost all formatting.

[RavanH]

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 🙂

[Joseph Farmer]

I cannot delete the comma. I delete it and WordPress puts it back in.

[Joseph Farmer]

Never mind. I was finally able to remove the comma. I’m still stumped as to how to use captions. Is it possible?

[RavanH]

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>

[RavanH]

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 !

[Joseph Farmer]

I’m sorry, Ravan. I’m not sure what you mean by putting the script in a text widget. I mean, I know what a text widget is, but where do I put it? Can I just put the script in my Custom CSS?

[Joseph Farmer]

Sorry, not Custom CSS, but the Custom Code area of my slider.

[Joseph Farmer]

Code has been placed in a text widget in the footer of each page. Will that work? I’m not seeing anything different on the slider. Still no caption.

[RavanH]

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 🙂

[RavanH]

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?)

[Joseph Farmer]

Thanks, Ravan. I have placed the code in the Custom Javascript field in Slider Revolution and purged my caches (I use Total Cache). It’s not working, unfortunately.

[RavanH]

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.

[Joseph Farmer]

You’re right! Thank you! I was looking for the caption to be centered, but it’s left justified and I didn’t see it. How do I style the caption in terms of font-size and justification? Is this something I do with CSS through my theme, or is it code I need to add that is specific to FancyBox?

[Rolf]

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!

[Joseph Farmer]

Worked like a charm. I so appreciate your assistance with this. Thank you.

[Author]

Posts