Как скрыть подсказку при наведении курсора от тега заголовка при использовании FancyBox 2.0?

Question

Я использую новую версию FancyBox 2.0.Вот демонстрационная версия сайта разработки: http://ab.basikgroup.com/exhibition_works/61

Следуя этой документации, я передаю информацию заголовка для своего лайтбокса через атрибут Title в теге ссылки.Информация о моих заголовках довольно длинная и содержит немного HTML.Поэтому я хочу скрыть всплывающую подсказку по умолчанию от ее показа, когда пользователь переворачивает изображение.

Я нашел несколько замечательных примеров того, как это сделать.Например: Удалить всплывающую подсказку с тегом заголовка

Моя проблема в том, что когда я использую этот метод (который удаляет атрибут заголовка при наведении, а затем заменяет его, когда вы не наводите курсор на ссылку), но если вы нажмете на изображение, чтобы загрузить лайтбокс, заголовок не будет передан в FancyBox.Я попытался написать функцию JQuery, которая проверяла зависание и щелчок, но не могла заставить его работать.

Любой совет или помощь будет принята с благодарностью.

Answer 1

Обновление [04 марта 2016 г.]

Это старый пост, и принятый ответ был действительным для версии на тот момент.В текущей версии (v2.1.5) более чистое решение без необходимости в дополнительном контейнере HTML, ни использование обратных вызовов не будет использовать специальный data-fancybox-title в вашем якоре, например:

<a data-fancybox-title="This title doesn't show on hover" class="fancybox" href="path/img01.jpg">open image in fancybox</a>

А затем используйтепростая инициализация fancybox, для этого эффекта не требуется никаких обратных вызовов, например:

$(".fancybox").fancybox();

См. JSFIDDLE

Вы можете даже использовать теги HTML внутри атрибутакак:

<a rel="gallery" data-fancybox-title="This is <span style='color:#ff0000'>title</span> No. 1" class="fancybox" href="path/img01.jpg">open image</a>

См. обновленный JSFIDDLE

---

Оригинальный ответ:

Элегантный способ сделать этохранить title для использования в fancybox где-то еще, а не атрибут title ... в скрытом div, например, сразу после якоря, например:

<a class="fancybox" href="images/01.jpg" title="only show this on hover"><img src="images/01t.jpg"  /></a>
<div class="newTitle" style="display: none;"><p>hello, visite my site <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p></div>

В этомКстати, вы можете иметь (или не иметь вовсе) tooltip, отличный от fancybox title.Также вы забудете о дополнительном JavaScript, добавляющем или удаляющем взад и вперед значение атрибута title (вместо этого вы бы только добавляли нагрузку на процессор).

Это также полезно для длинных или сложных заголовков, которые включаютссылки, как в примере выше.

Тогда ваш скрипт fancybox должен выглядеть следующим образом:

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterLoad: function(){
   this.title = $(this.element).next('.newTitle').html();
  },
  helpers: {
   title : {
    type : 'inside'
   }
  }
 }); // fancybox
}); // ready

NOTE : единственное условие - div с title должен следовать за каждой привязкой, иначе метод .next() завершится неудачей.Вы можете настроить скрипт, чтобы получить заголовок из другого места в вашем коде, независимо от того, идет ли он сразу после привязки, например, идентификатор заголовка, например:

this.title = $('#myCaption').html();

ОБНОВЛЕНИЕ (15 июня 2012 г.) : при использовании v2.0.6 + следует использовать beforeShow вместо afterLoad опции обратного вызова.

Answer 2

Я использовал хук в файле functions.php вместо javascript для установки атрибута заголовка <a> при получении каждого изображения галереи:

function add_title_attachment_link($link, $id = null) {
    $id = intval( $id );
    $_post = get_post( $id );
    $post_title = esc_attr( $_post->post_excerpt );
    return str_replace('<a href', '<a title="'. $post_title .'" href', $link);
}
add_filter('wp_get_attachment_link', 'add_title_attachment_link', 10, 2);

Это вернет заголовок извложение и добавьте его в тег <a> в качестве заголовка для большинства плагинов лайтбокса JQuery.

Например, в Fancybox:

$(".fancybox").fancybox({
    helpers : {
        title : {
            type : 'over'
        }
    }
});

Подпись теперь появится в лайтбоксе.