I’m not really that much of a jQuery aficionado so I’m not really sure why this little jQuery modal lightbox snippet isn’t working.

Am I missing any kind of WP specific code?

I’m enqueueing the script in the header if that helps

$(window).load(function(){
    var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');
    var positionLightbox = function() {
        var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 148,
        lbContent = $('#lb-content');
        lbContent.css({
            'left' : lbContentMargin,
            'top' : $(window).scrollTop() + 50 + 'px'
        });
    };

    $('.modal-trigger').click(function() {
        lightBox.fadeIn(function() {
        lightBoxContent.show();
    });
    positionLightbox();
    });
    $('#lb-close').click(function() {
        lightBox.hide();
        lightBoxContent.hide();
    });
}); 

2 Answers
2

the problem was in your variable define syntax and also you need to wrap your jQuery script into no conflict wrapper, try this

jQuery(window).load(function($) {
   // your function
});

or

(function($) {
  // your function
})(jQuery);

complete working script

(function($) {
   $(window).load(function() {
     var lightBox = $('#lightbox');
     var lightBoxContent = $('#lb-content');
     var positionLightbox = function() {
         var veiwWidth = $(window).width();
         var lbContentMargin = (veiwWidth / 2) - 148;
         var lbContent = $('#lb-content');
         lbContent.css({
           'left' : lbContentMargin,
           'top' : $(window).scrollTop() + 50 + 'px'
         });
     };

     $('.modal-trigger').click(function() {
         lightBox.fadeIn(function() {
         lightBoxContent.show();
     });
     positionLightbox();
     });
     $('#lb-close').click(function() {
         lightBox.hide();
         lightBoxContent.hide();
     });
   });
})(jQuery);

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *