Ссылка на наложение изображения открывает лайтбокс вместо внешней страницы

Я делаю сайт с видеогалереей. Я использую плагин smart grid для видеогалереи. Плагин позволяет вставлять HTML-код в раздел подписи изображения. Итак, используя HTML и CSS, я добавил отличный значок шрифта и внешнюю ссылку, которая появляется при наведении курсора мыши на изображение. Используя CSS, я также разместил ссылку внутри лайтбокса, которая переводит пользователя на ту же внешнюю ссылку, о которой говорилось ранее. Теперь моя проблема в том, что ссылка внутри лайтбокса работает нормально. Но ссылка, которая появляется на оверлее изображения, не работает. Вместо этого, когда я нажимаю на ссылку, открывается лайтбокс.

HTML-код размещен в подписи к первому изображению:

<div class = "show-in-gallery">
    Airbnb <br />
    <i class = "fa fa-play" aria-hidden = "true">
    </i>&nbsp;&nbsp;&nbsp;&nbsp;
    <a class = "GalleryLink" href = "http://cirkus.co.nz/?p=57">
        Read More
    </a>
</div>

<div class = "show-in-lightbox">
    <a class = "GalleryLink" href = "http://cirkus.co.nz/?p=57">
        Read more
    </a>
</div>

CSS:

 .show-in-lightbox {
     display:none;
 }
 .pswp__caption .show-in-lightbox {
     display:block;
 }
 .pswp__caption .show-in-gallery{
     display:none;
 }
button{
    color:black;
}
.GalleryLink{
    color: white;
}

URL сайта: https://robierobz.com/

У вас есть Ошибка JavaScript, откройте консоль F11 и сначала исправьте его, и посмотрите, поможет ли это. Ваша ошибка исходит из jQuery на вашей домашней странице; попробуйте отладить это, и вы это исправите. Искать вокруг: // triggers when user clicks on thumbnail var onThumbnailsClick = function(e) {

WPDev 21.05.2018 23:09

@WPDev Это должно что-то делать с Chrome и их политикой автоматического воспроизведения видео. Это не нарушает работу сайта, и я не получаю эту ошибку в других браузерах. Я застрял на этом уже несколько дней. :(

robie_robz_ 21.05.2018 23:13

смотри другую часть моего комментария. проблема в jQuery.

WPDev 21.05.2018 23:20

Пробовал. Не в этом проблема. Проблема существует потому, что ссылка для открытия лайтбокса перекрывает ссылку для открытия внешней страницы. Пробовал использовать Z-index. Пока не повезло.

robie_robz_ 22.05.2018 02:08
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
4
360
0

Другие вопросы по теме