Change fancybox close button title/tooltip

Refresh

December 2018

Views

9.6k time

4

Is there a way to translate the tooltips in fancybox, e.g. the tooltip on the close button?

I have done this in the afterShow callback to change the value to Danish and seems to work.. or is there a better way to change it?

<script type="text/javascript">
      $(document).ready(function() {
        $("a.mapoverlay").fancybox({
          width : '90%',
          height : '90%',
          fixed: false,
          autoSize : false,
          autoCenter : true,
          afterLoad  :  function() {
        loadMap();
          },
          afterShow  :  function() {
        $("a.fancybox-close").attr("title", "Luk");
          }
        });
      });
</script>

Edit: This code seems to work fine.

I got a syntax error when writing this.. I think you missed something? SyntaxError: Unexpected token }

I saw this post here: https://github.com/fancyapps/fancyBox/issues/7

<script type="text/javascript">
      $(document).ready(function() {
        $("a.mapoverlay").fancybox({
          width : '90%',
          height : '90%',
          fixed: false,
          autoSize : false,
          autoCenter : true,
          afterLoad  :  function() {
        loadMap();
          },
          tpl: { 
        closeBtn: '<div title="Test" class="fancybox-item fancybox-close"></div>' 
          }
        });
      });
</script>

3 answers

0

Вы можете использовать $.fancybox.close()опцию:

пример: <a onclick="$.fancybox.close();" href="javascript:;">Your text </a>

7

Вы можете использовать .tplопцию:

$(document).ready(function() {
  $("a.mapoverlay").fancybox({
    width : '90%',
    height : '90%',
    fixed: false,
    autoSize : false,
    autoCenter : true,
    afterLoad :  function() {
      loadMap();
    },
    tpl: {
        '<a title="Your title here!" class="fancybox-item fancybox-close" href="javascript:;"></a>'
    }
  });
});

EDIT : правильный формат для tplопции

tpl : {
 closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
}
3

Для постоянного изменения:

Просто замените «Закрыть» в FancyBox / источник / jquery.fancybox.pack.js (и / или jquery.fancybox.js).

Посмотрите , closeBtnа затем изменить егоa title

введите описание изображения здесь


Для временного изменения заголовка:

$(document).ready(function() {
  $(".fancybox").fancybox({
     tpl : {
        closeBtn : '<a title="CUSTOM TITLE HERE" class="fancybox-item fancybox-close" href="javascript:;"></a>'
     }
  });
});