matheushfm on "JQuery Lightbox doesn't work"

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