HTML / JavaScript всплывающие подсказки для кнопок в лайтбоксе Colorbox - PullRequest
Новая
       26

HTML / JavaScript всплывающие подсказки для кнопок в лайтбоксе Colorbox

0 голосов
/ 27 июня 2018

Какой самый простой способ прикрепить подсказки HTML / JavaScript к кнопкам cboxPrevious и cboxNext в лайтбоксе Colorbox ?

Чтобы показать, что я пробовал до сих пор, вот упрощенная демонстрация colorbox, взятая с домашней страницы Colorbox: 

<html>
    <head>
    <title>Colorbox Example</title>
        <base href="http://www.jacklmoore.com/colorbox/example1/">
    <link rel="stylesheet" href="colorbox.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../jquery.colorbox.js"></script>
    <script>
     $(document).ready(function(){
         //Examples of how to assign the Colorbox event to elements
         $(".group1").colorbox({rel:'group1', current: 'hallo'.link("http://google.com") });             
     });

    </script>
    </head>
    <body>
    <h1>Colorbox Demonstration</h1>
    <p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
    <p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
    <p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
    </body>
</html>

Когда вы откроете эту страницу в браузере и нажмете на первую ссылку, вы получите Colorbox со стрелками для предыдущего и следующего изображения. К этим кнопкам я хочу прикрепить всплывающие подсказки.

Я знаю, как прикрепить всплывающую подсказку в HTML. Просто добавьте атрибут заголовка: 

<span title="Tooltip text">Some text</span>

Итак, я попробовал это аналогично в JavaScript, сначала для текста cbxCurrent: я изменил строку 

$(".group1").colorbox(...

так, чтобы он читал: 

$(".group1").colorbox({rel:'group1', current: '<span title="Tooltip text">Some text</span>' });

Это работает! Но когда я пытаюсь сделать это для кнопки previous, она ничего не делает: 

$(".group1").colorbox({rel:'group1', previous: '<span title="Tooltip text">Some text</span>' });

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

1 Ответ

0 голосов
/ 27 июня 2018 

$('MY_ID').colorBox({
    onOpen: function() {
        $("#tt").tooltip("disable");
    },
    onClosed: function() {
        $("#tt").tooltip("enable");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...