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();
    });
}); 
  • Are you getting some errors in firebug|console|etc. ? – iEmanuele Aug 20 '13 at 10:23
  • @iEmanuele I do, I get this error TypeError: $ is not a function $(window).load(function(){ – Poisontonomes Aug 20 '13 at 10:32
  • ok, follow the Otto's answer : ) – iEmanuele Aug 20 '13 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. – Chip Bennett Aug 20 '13 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. – ninty9notout Aug 20 '13 at 15:21
9

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);
| improve this answer | |
  • That throws up this error SyntaxError: missing : after property id - var lightBox = { $('#lightbox'), modal....r=3.5.2 (line 2, col 20) – Poisontonomes Aug 20 '13 at 10:38
  • oh something went wrong, edited try now – Anjum Aug 20 '13 at 10:43
  • I get this error now TypeError: $ is not a function $(window).load(function(){ – Poisontonomes Aug 20 '13 at 10:50
  • edited and wrapped into no conflict hope now it will be work – Anjum Aug 20 '13 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 Aug 20 '13 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

| improve this answer | |
  • So would I just need to change $(window).load(function(){ to jQuery(window).load(function(){ ? – Poisontonomes Aug 20 '13 at 10:39
  • This should have been marked as the correct answer. – t31os Aug 20 '13 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 Aug 20 '13 at 13:09
  • 1
    That should be: jQuery(window).load(function($){} (note the passing of the $). – Chip Bennett Aug 20 '13 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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