javascriptjqueryfancyboxfancybox-3

Translate Fancybox-Button



I am trying to change the tooltip of the fancyboy3 close button, but nothing seems to help. I tried
tpl: { closeBtn: '<a title="Test" class="fancybox-item fancybox-close" href="javascript:;"></a>'} as well as

lang : 'de',
i18n : {

    'de' : {
        CLOSE       : 'Test',

    }
}


but both versions did not help. What am I doing wrong?

$('#btn-slider-edit').fancybox({
        fullScreen: false,
        closeBtn: true,
        iframe: {
            css: {
                width: '80%',
                height: '80%'
            }
        },
        tpl: {
            closeBtn: '<a title="Test" class="fancybox-item fancybox-close" href="javascript:;"></a>'
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Solution

  • If you are using fancyBox v3.1, then

    1) Your first snippet works as expected:

    $( '[data-fancybox]' ).fancybox({
      lang : 'de',
      i18n : {
        'de' : {
          CLOSE : 'Test',
        }
      }
    });
    

    https://codepen.io/anon/pen/bReeow

    1) This is how you can change button template:

    $( '[data-fancybox]' ).fancybox({
        btnTpl : {
        close  : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}} - TEST"></button>'
      }
    });
    

    https://codepen.io/anon/pen/BZzzdK