Когда я запускаю код в автономном режиме, используя код 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;
}