Nano Hash - криптовалюты, майнинг, программирование

Пользовательский лайтбокс JQuery не работает на сайте Wordpress

Когда я запускаю код в автономном режиме, используя код HTML и вызывая библиотеку JQuery, он работает правильно. Однако, когда я пытаюсь реализовать это на своем сайте WordPress, это просто не работает.

1) Я добавил код скрипта в нижний колонтитул своего шаблона (a)

2) Я вызвал библиотеку JQuery в заголовке своего шаблона (b) Я также пытался протестировать различные комбинации, но безуспешно.

3) Классы CSS были добавлены в файл CSS моего шаблона. (с)

4) Я объявил класс, который запускает инструкции на кнопке (тот, который я хочу запустить лайтбокс)

Может ли кто-нибудь помочь мне понять, что может быть не так и как это решить?

Большое спасибо!


(a) Сценарий добавлен в нижний колонтитул

<script>

    $(document).ready(function() {
        $('.lightbox').click(function() {
            $('.background-map-lightbox, .map-lightbox').animate({'opacity':'.60'}, 500, 'linear');
            $('.map-lightbox').animate({'opacity':'1'}, 500, 'linear');
            $('.background-map-lightbox, .map-lightbox').css('display','block');

        });

        $('.close-map-lightbox').click(function() {

            $('.map-lightbox, .background-map-lightbox').animate({'opacity':'.0'}, 500, 'linear', function() {
                $('.map-lightbox, .background-map-lightbox').css('display','none');

                });

        });

        $('.background-map-lightbox').click(function() {

            $('.map-lightbox, .background-map-lightbox').animate({'opacity':'.0'}, 500, 'linear', function() {
                $('.map-lightbox, .background-map-lightbox').css('display','none');

                });

        });

    });

</script>

(b) В заголовке шаблона

//test 1
<?php wp_enqueue_script ("jquery");?>

//test 2
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.1.min.js" type="text/javascript"></script>

(с) КСС

.lightbox {
    color:green;

}

.background-map-lightbox{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#000000;
    opacity:.0;
    -moz-opacity:.0;
    filter:alpha (opacity=0);
    z-index:100;
    display:none;

}

.map-lightbox {
  background-color: #ffffff;
  border-left: 13px solid #eba096;
  border-radius: 22px;
  box-shadow: 2px 2px 2px #333333;
  color: black;
  display: none;
  height: 303px;
  left: 30%;
  padding: 20px;
  position: absolute;
  top: 20%;
  width: 540px;
  z-index: 101;
}

.close-map-lightbox {
    float:right;
    cursor:pointer;
    background-color:#a6d5b3;
    border:solid 1px #e6e6e6;
    width:25px;
    height:25px;
    border-radius:40px;
    color:#fff;
    font-family:"Open Sans";
    top:-27px;
    right:-27px;
    position:relative;
    text-align:center;

}

#map-ebook-title h1 {
  color: #8a8198;
  font-family: "Open Sans";
  font-size: 62px;
  font-style: italic;
  font-weight: bold;
  line-height: 43px;
  margin: 15px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

#map-ebook-title h2 {
  color: #4d4d4d;
  font-family: "Open Sans Semibold";
  font-size: 23px;
  font-style: italic;
  font-weight: bold;
  line-height: 43px;
  margin: 30px 15px;
}

  • Какие ошибки вы получаете в консоли? 09.07.2014
  • ... цитата @msbodetti - у вас есть какая-то ошибка? Правильно ли загружена библиотека jquery? пытается использовать console.log() или некоторые точки останова в вашем javascript, чтобы узнать, был ли запущен скрипт. 09.07.2014

Ответы:


1

Wordpress jQuery использует неконфликтность. Метод, который я использую, заключается в том, чтобы поменять местами «$» на слово jQuery.

Используя Chrome, если вы нажмете f12 на любом элементе на экране, появится возможность проверить элемент, нажмите на него, а затем консоль на новом всплывающем экране. Он покажет вам ошибки JS.

09.07.2014
Новые материалы

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

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

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

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..