Lightbox Ultimate – Issue with jQuery

[mangonyc]

I apologize for not providing more info previously, here is a more complete description of the issue with a link.

I installed the Lightbox plug-in on WordPress 3.3. It didn’t work and after searching through the forums on how to trouble-shoot the issue, I have found it resides with jQuery.

I do have jQuery installed, and I visited the page http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/ which was very helpful. It appears that I do have it installed correctly in that I have <?php wp_enqueue_script(“jquery”); ?> before the <?php wp_head(); ?> tag, then the location of the scripts. I also do have the footer script tag in the footer as well.

I tested it with the jquery script removed from the header.php file and it seems to work fine.

On this page is one post, the first words are “Click here to open the image” that is the link to test the Lightbox

http://www.christophermelvin.com/2010/02/03/lightbox-image-test/

right now the jQuery is in the header.php file and the plug-in is activated

also- on the sidebar of my page I have a miniature iPad that is using a javascript to scroll the content, that is also rendered unusable when the Lightbox plug-in is activated.

I also tried to validate my site, and when the plug-in is activated, I get three errors pertaining to the plug-in, not sure if it is something I should be concerned with.

Any help you could provide would be helpful, I would like to use jQuery and the plug-in if possible

Thanks

Chris Melvin

[wpCommerce]

“It appears that I do have it installed correctly in that I have <?php wp_enqueue_script(“jquery”); ?> before the <?php wp_head(); ?> tag, then the location of the scripts. I also do have the footer script tag in the footer as well.” – I had a look at the page source. I saw that your theme is including it’s own jquery library.

<script src="http://www.christophermelvin.com/wpblogstuff/wp-content/themes/mangonyc/js/jquery.js" type="text/javascript"></script>

Using <?php wp_enqueue_script("jquery"); ?> makes sure that there will be only one jquery library included in that page (no matter how many plugins call it). With the current WP 3.3 it would be something like –

<script type='text/javascript' src='http://www.christophermelvin.com/wpblogstuff/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

I also found too many errors on that page (using Firebug). They are not related to our plugin –

error applying ZIndex : 9 -- TypeError: element.parentElement is undefined

HYPE.js (line 1274)

error applying ZIndex : 10 -- TypeError: element.parentElement is undefined

HYPE.js (line 1274)

error applying ZIndex : 11 -- TypeError: element.parentElement is undefined

HYPE.js (line 1274)

error applying ZIndex : 7 -- TypeError: element.parentElement is undefined

HYPE.js (line 1274)

error applying ZIndex : 8 -- TypeError: element.parentElement is undefined

HYPE.js (line 1274)

$ is not a function

[Break On This Error] $(".scrollable").scrollable({ vertical: true, mousewheel: true });

http://www.christophermelvin.com/2010/02/03/lightbox-image-test/ (line 93)

uncaught exception: Error: Permission denied for <http://www.facebook.com> to get property Proxy.InstallTrigger

uncaught exception: Error: Permission denied for <http://www.facebook.com> to get property Proxy.InstallTrigger

uncaught exception: Error: Permission denied for <http://www.facebook.com> to get property Proxy.InstallTrigger

MM_swapImage is not defined

MM_swapImgRestore is not defined

MM_swapImage is not defined

MM_swapImgRestore is not defined

[mangonyc]

Thanks for looking at this I appreciate the help – a couple of things:

I tried adding the version script the way you had it written out-?ver=1.7.1- the plug-in still didn’t work

I tried adding the jquery library directly from jquery itself- the plug-in still didn’t work

I removed the link to the jquery library entirely- and the plug-in works fine- the page is set that way now so you can see it in action.

I removed the “.$ scrollable” function, I saw that was giving me an error as you mentioned, and I will fix the “MM_swapImage” but it’s obvious to me that the jquery is what’s preventing it from working properly.

I use Firebug as well, but I didn’t see the “HYPE.js” errors, I’m using Firefox 9.0- what browser were you testing with? I had Firebug set to the “console” tag and the “error” tab selected-mI’m wondering if its a browser incompatability

The bottom line is I really want to use this Lightbox plug-in esp since I paid for it, and it seems that it cannot exist with calling a jquery script at the same time- so for me it’s one or the other.

I had used other Lightbox plug-ins prior to this and they didn’t cause such a conflict- if you have any ideas on how to get it to work together I’d appreciate it.

Thanks

[mangonyc]

Hello,

I have more questions:

Hello,

I was curious about the problems with jquery and I have a test blog set up to work on things to make sure they work before making live- this blog uses the base WP theme, “TwentyEleven”, it has no plug-ins installed except “Hello Dolly” and “Askimet” and neither are activated.

this is the test site

http://testblog.christophermelvin.com/

I went into this blog and installed the WP Lightbox Ultimate plug-in, and it worked.

I then went and added the jquery script, this is what is added

<?php wp_enqueue_script(“jquery”); ?> before the enqueue head tag and

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;

after the enqueue head tag

and then the Lightbox plug-in did NOT work, just like my site, as soon as jquery was introduced, it breaks the plug-in.

also – when I looked on Firebug I got an error pertaining to the plug-in- the error is below

$(“a[rel^=’wp_lightbox_prettyPhoto’]”).prettyPhoto is not a function

[Break On This Error] social_tools: false

any ideas on this? is it the version of WP? this is 3.3, my site was 3.1, both seem to be broken

is there anyway that this plug-in can exist with jquery?

I think this test blog illustrates a problem that is basic to the plug-in vs. jquery.

As I mentioned I’d love to get both working if possible, any help you can provide would be greatly appreciated.

Thanks

[wpCommerce]

I think we have a little misunderstanding here. Can you please explain why you are trying to include two Javascript files?

<?php wp_enqueue_script("jquery"); ?>

and

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

I already explained that if you use the function <?php wp_enqueue_script(“jquery”); ?> the following things happen –

1. When the page loads it checks if any other plugin/theme has called the same function.

a)YES – It doesn’t bother including the jquery library because another plugin/theme is including it using the same wordpress api.

b)No – It includes the jquery library. For example –

<script type='text/javascript' src='http://www.christophermelvin.com/wpblogstuff/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

Have you noticed how this process makes sure that there is only one main jquery library in the whole page?

Now lets have a look at whats happening in your case.

your theme is calling the <?php wp_enqueue_script(“jquery”); ?>. Now it turns out that our lightbox ultimate is including jquery using the same function. So your theme is not going to bother about including it (It will let the lightbox ultimate plugin to include the main jquery library). Now what we have in that page is –

<script type='text/javascript' src='http://www.christophermelvin.com/wpblogstuff/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

So far so good. The problem starts when you add the following code –

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

This code is also including the main jquery library (minified version but does the same). But this jquery library wasn’t added using the WordPress api. So the theme is just going to include it in the header. Now what do we have in that page?

<script type='text/javascript' src='http://www.christophermelvin.com/wpblogstuff/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Two versions of the same jquery library. You can clearly see why the problem is happening.

Twenty eleven is a clean and properly coded WordPress theme. So obviously it’s going to work with Lightbox Ultimate Plugin.

[mangonyc]

OK- I apologize- I do seem a bit confused.

I appreciate you explaining the process.

Are you telling me that just putting in the script <?php wp_enqueue_script(“jquery”); ?> adds the jquery library and that there is no need to point to a specific file after that, that one line of code will include jquery within wordpress?

If that is the case, it is obviosuly my mistake- on the page

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

it explained that after adding the enqueue script, you can call your own jquery files after the <?php wp_head(); ?> function.

So if you can just confirm, I only need to have <?php wp_enqueue_script(“jquery”); ?> and that will add jquery to my theme, I think I’m good to go.

Sorry for the confusion, and thanks for taking the time to explain- the plug-in is amazing and it’s been really helpful, so I’m glad I’ll be able to use it.

Thanks

[wpCommerce]

“Are you telling me that just putting in the script <?php wp_enqueue_script(“jquery”); ?> adds the jquery library and that there is no need to point to a specific file after that, that one line of code will include jquery within wordpress?” – Yes, it will include Jquery (JavaScript library) in WordPress.

“it explained that after adding the enqueue script, you can call your own jquery files after the <?php wp_head(); ?> function.” – Yes, you can call your custom JavaScript files (example – test.js) but you don’t want to add the main JavaScript library. For example – http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js (this is going to conflict with another library which has been included using “enqueue” function).

[mangonyc]

Perfect- everything is understood and I’m a bit wiser concerning jquery and wordpress.

I apologize for the runaround with my confusion.

Thanks again for the support.

[wpCommerce]

You’re welcome

[Author]

Posts