добавить ссылку и добавить классы CSS, используя jquery - PullRequest
Новая
       11

добавить ссылку и добавить классы CSS, используя jquery

0 голосов
/ 15 января 2019

Я использую WordPress тему Enfold. У меня есть запрос от клиента, который хочет, чтобы элемент портфеля открывался в лайтбоксе, а затем внутри этой ссылки на другой лайтбокс для другого содержимого элемента портфеля. Я могу жестко связать ссылку в элементе портфолио с «www.examplepage? Iframe = true», и она откроется в лайтбоксе с главной страницы, но затем внутренние ссылки откроются во втором лайтбоксе поверх первой.

Мое решение состоит в добавлении? Iframe = true к ссылке на главной странице через jquery. Затем я проверяю, чтобы ссылка содержала необходимые классы «mfp-iframe» и «lightbox-Added». Однако, хотя в инспекторе все выглядит правильно, лайтбокс отказывается открываться с помощью этого метода. Я добавил это с помощью плагина для добавления скриптов в верхний и нижний колонтитулы. 

<script>
jQuery(function($) {

$( document ).ready(function() {
  $('.lightbox a.grid-image').addClass('mfp-iframe lightbox-added');
$(".lightbox a.grid-image").attr('href', function(i) { return 
$(this).attr('href') + '?iframe=true'; }) 
});

});
</script>

На странице отображаются правильные результаты в инспекторе: 

<a href="/Winery/Giesen-Wines?iframe=true/" title="" data-rel="grid-1" 
class="grid-image avia-hover-fx mfp-iframe lightbox-added" style="height: 
auto; opacity: 1;">IMAGE INSIDE LINK</a>

Но это все равно открывает ссылку на новой странице, а не в лайтбоксе.

Это код из рабочей ссылки, сгенерированной темой: 

<a href="/Winery/constellation-brands?iframe=true/" title="" 
data-rel="grid-1" class="grid-image avia-hover-fx mfp-iframe lightbox- 
added" style="height: auto; opacity: 1;">IMAGE INSIDE LINK</a>

Они одинаковы.

EDIT: Сайт находится в стадии разработки, поэтому реальный сайт не может быть доступен широкой публике, но вот тестовый сайт с точно такой же настройкой.

https://lionfishdesignstudios.com/skinsense/about/

На этой странице есть 2 разных сетки портфеля. К первому добавлен класс 'lightbox', и поэтому, если вы проверите его, ссылка под лайтбоксом будет иметь соответствующие добавленные классы, и ссылка будет myurl? Iframe = true. Вторая сетка портфелей не имеет класса «лайтбокс», и там нет ни одного добавленного материала.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Хорошо, я думаю, что у меня есть. Мне нужно было добавить .magnificPopup к сценарию. Это связано с темой Enfold и типом лайтбокса, который они используют. 

<script>
jQuery(function($) {

$(window).load(function() {
jQuery('.lightbox a.grid-image').magnificPopup({
  type:'inline',
  midClick: true
});

  $('.lightbox a.grid-image').addClass('mfp-iframe lightbox-added open-popup-link');
$('.lightbox a.grid-image').attr('rel', 'lightbox')
$(".lightbox a.grid-image").attr('href', function(i) { return $(this).attr('href') + 
'?iframe=true/'; }) 

});

});
</script>

Ссылки теперь открываются в лайтбоксе без жесткого кодирования? Iframe = true до конца ссылки в портфолио.

0 голосов
/ 15 января 2019

У вас есть ссылка на сайт, чтобы мы могли проверить его?

Надеюсь, я правильно понимаю проблему.

Проблема в том, что ссылка внутри лайтбокса не открывает другой лайтбокс?

возможно, что ссылка на 1-й лайтбокс не получает событие click, потому что оно сгенерировано с помощью javascript и, следовательно, не затронуто документом .ready?

возможно, попробуйте добавить .click () к вашей ссылке в лайтбоксе, чтобы она работала с сгенерированными элементами

например: 

$(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });
...