FancyBox Pro Captions, Revolution Slider

Home Forums Easy FancyBox Pro FancyBox Pro Captions, Revolution Slider

This topic contains 17 replies, has 3 voices, and was last updated by  Joseph Farmer 9 months, 3 weeks ago.

  • Author
    Posts
  • #7955

    Joseph Farmer
    Participant

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

    });

    });

  • #7956

    RavanH
    Keymaster

    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

  • #7957

    Joseph Farmer
    Participant

    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.

  • #7965

    RavanH
    Keymaster

    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 🙂

  • #7969

    Joseph Farmer
    Participant

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

  • #7970

    Joseph Farmer
    Participant

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

  • #7973

    RavanH
    Keymaster

    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>
    
  • #7974

    RavanH
    Keymaster

    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 !

  • #7975

    Joseph Farmer
    Participant

    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?

  • #7976

    Joseph Farmer
    Participant

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

  • #7977

    Joseph Farmer
    Participant

    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.

  • #7978

    RavanH
    Keymaster

    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 🙂

  • #7979

    RavanH
    Keymaster

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

  • #7980

    Joseph Farmer
    Participant

    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.

  • #7982

    RavanH
    Keymaster

    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.

  • #7987

    Joseph Farmer
    Participant

    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?

  • #7989

    Pharéo
    Participant

    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!

  • #7994

    Joseph Farmer
    Participant

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

You must be logged in to reply to this topic.

Site by Pharéo | Hosted on The Permanently Moving Network