Есть ли способ добавить HTML-код в атрибут 'alt', используя fancybox?

0

Я пытаюсь увидеть, можно ли добавить HTML-код внутри тега "alt" изображения либо через html, либо с помощью какого-либо javascript. Я использую fancybox как свою галерею изображений. Я пытаюсь использовать fancybox как форму для отображения изображения и описания изображения, добавления информации со стилем (например, точек маркера и перерывов), а также добавить кнопку, которая приведет вас к другой странице. В настоящее время у меня есть кнопка, но эта кнопка находится в javascript, поэтому каждое изображение fancybox имеет эту кнопку и тот же url. И я хочу иметь разные ссылки на каждую кнопку на каждом изображении.

Вот javascript, который у меня есть, который в настоящее время отображает текст alt под изображением в fancybox.

$(".fancybox").fancybox({               
                padding : 0,
                beforeShow: function () {
                    this.title = $(this.element).attr('title');
                    this.title = '<h4>' + this.title + '</h4>' + '<div style="width:100%; height: 150px; overflow: auto;">' + $(this.element).parent().find('img').attr('alt') + '<a class="button button-small" href="http://www.google.com"> Sign Up </a>' + '</div>';
                },
                helpers : {
                    title : { type: 'inside' },
                }
            });

Html в index.html для этого fancybox:

<li class="item-thumbs span3 design">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                            </li>
Теги:
image
fancybox
alt

1 ответ

3
Лучший ответ

Атрибут alt (не тег) по определению является простым текстом, поэтому все, что вы вставляете, будет восприниматься браузерами как обычный текст (не разметка). Если вы возитесь с кодом, который вставляет строки, которые выглядят как теги HTML, в значение атрибута alt а затем анализирует и обрабатывает их как разметку, это ничем не отличается от аналогичной игры с другими атрибутами.

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

Аналогичные соображения применимы к атрибуту title.

Для использования данных, которые будут обрабатываться как HTML, гораздо лучше использовать пользовательский атрибут, в частности атрибут data-*, например data-desc, или все, что вы предпочитаете. У них нет обработки по умолчанию в браузерах или поисковых системах, поэтому они безопасны для использования в личных целях.

  • 0
    благодарю вас. Я буду играть с этим.
  • 0
    @marcopolo: если вы хотите использовать (html5) атрибуты data-* , здесь есть несколько примеров stackoverflow.com/a/12357445/1055987, однако они могут не подходить для включения тегов html, поэтому для лучшего понимания смотрите мой комментарий к вашему вопросу. вариант.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню