WordPress.org

Forums

JQuery Lightbox doesn't work (2 posts)

  1. matheushfm
    Member
    Posted 10 months ago #

    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

  2. Andrew L
    Member
    Posted 9 months ago #

    your script looks okay to me. Have you tried seeing if there is a jQuery conflict. Give the Chrome Dev Tools a short to see - https://developer.chrome.com/devtools/index

    You may also want to try and place the script in the Header (so it loads sooner).

Reply

You must log in to post.

About this Topic