FancyBox Pro Captions, Revolution Slider

Your Account / Forums / Easy FancyBox Pro / FancyBox Pro Captions, Revolution Slider

  • Author
    Posts
    • February 17, 2017 at 8:14 pm #7955

      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()});

      });

      });

    • February 17, 2017 at 8:14 pm #7956

      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

    • February 17, 2017 at 8:14 pm #7957

      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.

    • February 17, 2017 at 8:14 pm #7965

      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 🙂

    • February 17, 2017 at 8:14 pm #7969

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

    • February 17, 2017 at 8:14 pm #7970

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

    • February 17, 2017 at 8:14 pm #7973

      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>
      
    • February 17, 2017 at 8:14 pm #7974

      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 !

    • February 17, 2017 at 8:14 pm #7975

      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?

    • February 17, 2017 at 8:14 pm #7976

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

    • February 17, 2017 at 8:14 pm #7977

      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.

    • February 17, 2017 at 8:14 pm #7978

      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 🙂

    • February 17, 2017 at 8:14 pm #7979

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

    • February 17, 2017 at 8:14 pm #7980

      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.

    • February 17, 2017 at 8:14 pm #7982

      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.

    • February 17, 2017 at 8:14 pm #7987

      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?

    • February 17, 2017 at 8:14 pm #7989

      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!

    • February 17, 2017 at 8:14 pm #7994

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

  • You must be logged in to reply to this topic.