1

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();
    });
}); 
5
  • Are you getting some errors in firebug|console|etc. ?
    – iEmanuele
    Commented Aug 20, 2013 at 10:23
  • @iEmanuele I do, I get this error TypeError: $ is not a function $(window).load(function(){ Commented Aug 20, 2013 at 10:32
  • ok, follow the Otto's answer : )
    – iEmanuele
    Commented Aug 20, 2013 at 10:37
  • In the future, please try searching for related issues before posting new questions. This one has been asked and answered, several times. Commented Aug 20, 2013 at 11:57
  • As a rule of thumb when working with jQuery, always wrap your code in (function($) { [...] })(jQuery) to stop its use of the $ conflicting with other libraries that do the same. Commented Aug 20, 2013 at 15:21

2 Answers 2

10

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);
8
  • That throws up this error SyntaxError: missing : after property id - var lightBox = { $('#lightbox'), modal....r=3.5.2 (line 2, col 20) Commented Aug 20, 2013 at 10:38
  • oh something went wrong, edited try now
    – Anjum
    Commented Aug 20, 2013 at 10:43
  • I get this error now TypeError: $ is not a function $(window).load(function(){ Commented Aug 20, 2013 at 10:50
  • edited and wrapped into no conflict hope now it will be work
    – Anjum
    Commented Aug 20, 2013 at 11:07
  • 1
    This answer would be better if it explained what the user was doing wrong, and why this solves the problem.
    – t31os
    Commented Aug 20, 2013 at 11:41
7

Most likely, it's because you're using the dollar sign shortcut without putting it inside a no-conflict wrapper.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

4
  • So would I just need to change $(window).load(function(){ to jQuery(window).load(function(){ ? Commented Aug 20, 2013 at 10:39
  • This should have been marked as the correct answer.
    – t31os
    Commented Aug 20, 2013 at 11:41
  • @Poisontonomes I don't know if there are some other errors in your jQuery. But even if so, the only wordpress-related error, and so the only reason for your question stay in this site, is the one pointed out by Otto. This is why I +1 this answer.
    – gmazzap
    Commented Aug 20, 2013 at 13:09
  • 1
    That should be: jQuery(window).load(function($){} (note the passing of the $). Commented Aug 20, 2013 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.