WordPress.org

Forums

JQuery Lightbox doesn't work (2 posts)

  1. matheushfm
    Member
    Posted 1 year 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 1 year 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).

Topic Closed

This topic has been closed to new replies.

About this Topic