Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore F.A.Q/Instructions › WP eStore and Lightbox Workaround
Tagged: eStore lightbox, grid, grid layout, light box, lightbox
- This topic has 15 replies, 6 voices, and was last updated 12 years, 6 months ago by Techimproved.
-
AuthorPosts
-
September 14, 2010 at 6:20 am #1836amin007Participant
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:
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.November 10, 2010 at 12:34 am #24270MacDoodleMemberamin 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!
May 13, 2011 at 10:16 pm #24271olivernatMemberHello, 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!
May 14, 2011 at 12:54 am #24272amin007ParticipantYour theme seems to be the culprit (it is adding JQuery to the page in a wrong way). This is explained here:
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>
July 27, 2011 at 1:51 pm #24273IlluminatorLadyMemberI 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
July 28, 2011 at 12:02 am #24274amin007ParticipantI 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.
July 28, 2011 at 1:32 am #24275IlluminatorLadyMemberThank 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!
July 28, 2011 at 2:04 am #24276amin007ParticipantPlease 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.
July 28, 2011 at 3:03 pm #24277IlluminatorLadyMemberDid 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.
July 29, 2011 at 12:59 am #24278amin007ParticipantYou 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):
Find out the culprit that is adding jquery like that and remove it please (the lightbox should work after that).
July 29, 2011 at 1:36 am #24279IlluminatorLadyMemberOkay, 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?
July 29, 2011 at 8:26 am #24280amin007ParticipantYou 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>
July 29, 2011 at 12:07 pm #24281IlluminatorLadyMemberThat 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>
<script type=”text/javascript” src=”http://heart-of-fire-illuminators.us1.list-manage.com/js/jquery.form.js”></script>
<script type=”text/javascript” src=”http://heart-of-fire-illuminators.us1.list-manage.com/subscribe/xs-js?u=a3dee3e6e3f7a14babeba55ff&id=ff453f9caf”></script>
Thank you so much for your time Amin!
Lisa
March 20, 2012 at 8:07 pm #24282TechimprovedMemberre: [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?
March 21, 2012 at 6:50 am #24283adminKeymasterThe 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:
-
AuthorPosts
- You must be logged in to reply to this topic.