WP eStore and Lightbox Workaround

[amin007]

WP eStore comes with a lightweight lightbox solution. Most of our customers prefer the lightweight solution as it means better page load performance.

If the default lightbox option that comes with eStore doesn’t work on your site then it usually means that you have some JavaScript error on your site (coming from another theme or plugin). The following resources will help you identify the source of the issue so you can fix it:

Debugging JavaScript Errors on Your Site

Wrong Way of adding JQuery library to WordPress – Source of Javascript Conflicts

Alternatively, You can try the following:

1. Uncheck the “Enable Lightbox effect on Images” option from the settings menu of the eStore plugin. This will turn off the lightbox effect that comes with eStore.

2. Install and activate another “Lightbox” plugin and try that.

More advanced tweaks if you are a developer

Alternatively, you can install another plugin or a custom script that can show the images from your page using a different lightbox effect that you like. WP eStore adds the following “rel” attribute to all the thumbnail images that it outputs:

rel="lightbox[product name]"

So any custom plugin or script that can work based on rel="lightbox" should work.

[MacDoodle]

amin thank you for posting this! I’ve been pulling my hair out trying to figure out how to fix my theme to work with the lightbox included with the eStore!!

You are are life saver!

[olivernat]

Hello, I tried this method as the first one was not working. Except it messes up the spacing on my main navigation?

Also, it makes the thumbnail image open in lightbox, but the other images do not appear?

The page in question is here

[http://livingkitchenwellness.com/shop/]

Many thanks!

[amin007]

Your theme seems to be the culprit (it is adding JQuery to the page in a wrong way). This is explained here:

https://support.tipsandtricks-hq.com/forums/topic/wrong-way-of-adding-jquery-library-to-wordpress-source-of-javascript-conflicts

I am referring to the following line of code in your theme’s header:

<script type=”text/javascript” src=”http://livingkitchenwellness.com/wp-content/themes/qwertypress/js/jquery-1.3.2.min.js”></script&gt;

[IlluminatorLady]

I just updated my eStore plugin and now the lightbox feature doesn’t work. I’ve installed and activated the lightbox 2 plugin as described above and still no go.

Prior to this eStore upgrade only the first image in a page could be displayed with a lightbox (I was gonna get to that…). Now no images are displayed.

Any ideas? Should I just get your Lightbox Ultimate product to fix this?

Thanks again!

Lisa

[amin007]

I don’t see anything from the lightbox-2 plugin on your products page:

[http://www.heart-of-fire-illuminators.com/wp1/products/]

Are you sure you have the lightbox 2 plugin activated?

Also, it looks like you didn’t uncheck the “Enable Lightbox effect on Images” checkbox in eStore?

Please read the first post in this thread and apply the changes as instructed.

[IlluminatorLady]

Thank you but yes, I did try unchecking the “Enable Lightbox effect on Images” and activating the Lightbox 2 plugin, following the directions above, and it didn’t work.

I just didn’t leave it in that state because I was trying a lot of other things after that.

I have it set up like that now, have emptied all the caches and reloaded the product page and still no go.

Any suggestions to try?

Thank you!

[amin007]

Please open the “wp_eStore1.php” file and search for the following line of code:

wp_enqueue_script('jquery.lightbox',WP_ESTORE_LIB_URL.'/jquery.lightbox-0.5.pack.js');

Once you find it please delete that line then refresh everything and let me know if you see any difference.

[IlluminatorLady]

Did what you suggested and there was no difference.

I noticed there was some logic about being the admin or not so I logged out of WP and tried again and still no difference.

We seem to be in different time zones, I’ll try to remember to check in with this tonight.

Thank you again.

[amin007]

You have a plugin or your own custom code that is including a very very old version of JQuery on top of the latest version that is already included on that page by WordPress. View the HTML source of your site and look for the following line:

<script type="text/javascript" src="http://heart-of-fire-illuminators.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>

This post will explain why the above code is bad and dangerous (its creating a jquery conflict):

https://support.tipsandtricks-hq.com/forums/topic/wrong-way-of-adding-jquery-library-to-wordpress-source-of-javascript-conflicts

Find out the culprit that is adding jquery like that and remove it please (the lightbox should work after that).

[IlluminatorLady]

Okay, I get what you’re saying and I went ahead and deactivated almost all my plugins, one at a time, and nothing made a difference.

Right now, the only active plugins are WP eStore and Lightbox 2. I have the box unchecked in eStore settings for enabling lightbox effects.

I also went through the iteration of trying to use the eStore lightbox again, but that didn’t work either.

When I look at the page source, I do not currently see the jquery library you mentioned above, only 1.6.1.

Any other ideas?

[amin007]

You must have hardcoded it in your theme’s template file somewhere. Its really simple to track…

1) Go to the following page:

[http://www.heart-of-fire-illuminators.com/wp1/products/]

2) Click on the “View HTML source” of your browser to see the HTML code of the above page (I am guessing you know how to view the HTML source code of a web page? If you don’t please Google it and there are plenty of tutorials on this)

3) Once you can see the HTML code of that page search for the following line of code there (that’s the culprit line):

<script type="text/javascript" src="http://heart-of-fire-illuminators.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>

If you search for the following line then you will find it on that page too (this is the proper JQuery library included by WordPress (the other one you hardcoded is just wrong and causing problems)

<script type='text/javascript' src='http://www.heart-of-fire-illuminators.com/wp1/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

[IlluminatorLady]

That did it, yes, it was hardcoded in a widget, some code that MailChimp generated for a subscription form.

Are any of these other script lines unnecessary?

<script type=”text/javascript” src=”http://heart-of-fire-illuminators.us1.list-manage.com/js/jquery.validate.js”></script&gt;

<script type=”text/javascript” src=”http://heart-of-fire-illuminators.us1.list-manage.com/js/jquery.form.js”></script&gt;

<script type=”text/javascript” src=”http://heart-of-fire-illuminators.us1.list-manage.com/subscribe/xs-js?u=a3dee3e6e3f7a14babeba55ff&id=ff453f9caf”></script&gt;

Thank you so much for your time Amin!

Lisa

[Techimproved]

re: [http://nasukifightgear.net/?page_id=2]

The lightbox is working but it appears partially covered by the header image. I installed the lightbox plug-in and it does the same thing. Any ideas?

[admin]

The z-index of that header image is greater than the lightbox one so the lightbox image is going behind it. I have increased the z-index value of the lightbox’s CSS in eStore which should take care of it. Please download a new build of eStore from here and check it out:

https://support.tipsandtricks-hq.com/update-request

[Author]

Posts