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
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘JQuery Lightbox doesn't work’ is closed to new replies.