Hi There,
When I run the code offline using a HTML code and calling the JQuery Library, it works properly. However, when I try to implement it on my WordPress site, it simply doesn’t work.
1) I added the script code to the footer of my template (a)
2) I called the JQuery library on the header of my template (b) I also tried to test different combinations but I had no success.
3) The CSS classes were added to my template CSS file. (c)
4) I declared the class that start the instructions on the button ( the one I want to start the light box)
Could anyone help me to understand what could be wrong and how to solve it?
(a) Script added to the footer
<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)On the header of the template
<?php wp_enqueue_script ("jquery");?> and <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.1.min.js" type="text/javascript"></script>
(c) CSS
.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;
}
Thanks a lot
