prettyPhoto, заголовок и подсказки

Question

В prettyPhoto, как я могу получить описание фотографии, отличное от "title" (добавленное к тегу <a>, окружающему <img>)?При наведении курсора на изображение на моем веб-сайте отображается ужасный HTML, который я хочу видеть и отображать с помощью prettyPhoto только при его открытии (следовательно, он содержит HTML), но не в качестве всплывающей подсказки.

Одна мысль, которая у меня возникладолжен был подключиться к событию, но уместно только одно - changepicturecallback, и я не могу понять, как получить доступ к текущему элементу фотографии из этого.

Может быть, это что-то в самом jQuery, но я немного растерялсяо том, где его найти.

Любая идея поможет.

Спасибо, Игорь

Answer 1

Надеюсь, еще не поздно ответить на ваш вопрос, но мне пришлось недавно изменить красивый код для фотографий, чтобы сделать именно то, что вы просите.

есть строка, которая устанавливает описание из атрибута 'title' якоря. Вы можете изменить его, чтобы получить описание, где вы хотите. Я решил создать тег

под якорем, который хранит описание.

Чтобы изменить источник описания, вам нужно изменить источник красивых фотографий. найдите строку, которая выглядит следующим образом:

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

должно быть в строке 152, по крайней мере, начиная с версии 3.1.3. Просто используйте инструмент поиска и замены для поиска «pp_description.»

измените это на:

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).find('p').text()) ? $(n).find('p').text() : ""; }) : $.makeArray($(this).find('p').text());

Если изменить "(this) .attr ('title')" на ".find ('p'). Text ()", то в привязке будет найден тег

вместо использования атрибута "title". Возможно, вы захотите скрыть тег

с помощью CSS, чтобы он не отображался на вашем сайте.

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

<a href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <p>This is the Description</p>
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

Answer 2

У меня была похожая проблема.Но в моем случае отображалось только первое слово, так как в разметке HTML отсутствовали двойные кавычки, в этом случае убедитесь, что в вашем HTML есть разметка title = и она заключена в кавычки :

<a title="Your Title Quoted" href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

Надеюсь, это тоже поможет.

Answer 3

Я также столкнулся с этой проблемой и нашел эту статью, которая действительно помогла мне:

Использование форматирования HTML в заголовках PrettyPhoto

Я знаю, что на этот вопрос уже был дан ответ, но я полагаю, что этот метод обеспечивает большую свободу в плане форматирования.

Цитата из статьи:

Откройте файл jquery.prettyPhoto.js на своем сайте и найдите строку который содержит следующий код:

pp_descriptions = IsSet jQuery.map (о, функция (т, п) {если (е (т) .attr (settings.hook) .indexOf (theRel) = -?! 1) возвращение е (т) .attr ( "название") е (т) .attr ( "название"): "?"}): e.makeArray (е (это) .attr ( "название"));

А затем замените его атрибутом 'alt':

pp_descriptions = IsSet jQuery.map (о, функция (т, п) {если (е (т) .attr (settings.hook) .indexOf (theRel) = -?! 1) возвращение е (т) .attr ( "альт") е (т) .attr ( "ALT"): ""}): e.makeArray (е (это) .attr ( "альтернативный")); * +1022 *?

Это прекрасно работает, вы можете использовать теги "h2" и "p" для форматирования заголовка. НО это не позволяет проверять страницу с помощью W3 Validator .

Поэтому вместо использования атрибута 'alt' я просто заменил его атрибутом'aria-label 'и вуаля! Он работает, как и ожидалось, и позволяет проверить страницу.

Пример кода:

<a href="path/to/your/big-image.jpg" rel="prettyPhoto" title="This is the native tooltip" aria-label="<h2> This is a caption.</h2> This caption has formatting and does not interfere with the native tooltips.">
    <img src="path/to/your/small-image.jpg" alt="alt-text" />
</a>

Answer 4

Просто добавьте это

font-size: 0px !important;

Answer 5

Опираясь на то, что сказал Митчелл:

Я использовал .html () вместо .text (), потому что я использовал вложенные стилированные промежутки:

<span class="popup_text_cont">
      <span class="popup_caption_cont">
        <span class="popup_detail">
          <span class="popup_caption">Client</span>
          <span class="popup_basic_info">Playhouse Square Foundation</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Project</span>
          <span class="popup_basic_info">Broadway Buzz eNewsletter</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Skills</span>
          <span class="popup_basic_info">HTML, CSS</span>
        </span>
      </span>
      <span class="popup_description">
        Designed and implemented a templated eNewsletter that was distributed to theatergoers and Playhouse Square sponsors.
      </span>
    </span>

Заменить (что было строкой 155 длямне в несжатом варианте) как то так.

if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('span.popup_text_cont').html()) ? $(n).find('span.popup_text_cont').html() : ""; }) : $.makeArray($(this).find('span.popup_text_cont').html());    

Answer 6

при использовании tipsy.js можно заменить только атрибут «title» на «original-title» в jquery.prettyPhoto.js .

как это:

pp_descriptions=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).attr('original-title'))?$(n).attr('original-title'):"";}):$.makeArray($(this).attr('original-title'))

Answer 7

Спасибо, Кайл !!!!! Это действительно сводило меня с ума, и, наконец, ты показал мне путь. :) Я хотел бы добавить, если вы не хотите, чтобы отображалась какая-либо подсказка, просто добавьте пробел в заголовок img, т.е. Еще раз спасибо!

Answer 8

Это замечательно, однако, если я хочу включить теги разрыва
или заголовки с акцентом в тег, эта информация, по-видимому, не работает, иначе она нарушает функциональность.Я не могу поверить, что из-за красивой фотографии было бы трудно отключить всплывающие подсказки .....

Кто действительно хочет, чтобы их описание было выделено всем этим кодом?: P