I have been asked this question time and time again, how come the LightBox effect isn't working on my site?
First off before you try anything else, switch to the TwentyTen theme and disable all other plugins except CataBlog. If the LightBox now works you know there is an error either in your theme or with a conflicting plugin. You may now enable all your plugins one at a time, checking as you enable each one to make sure the LightBox still works. If a plugin stops the LightBox from working it will not work with CataBlog.
If no plugins are conflicting then it is most likely your theme code. Switch to your theme and check if the LightBox breaks, if so you now know your problem. You need to check your theme's header and footer code. This code can be placed in any of the theme's PHP files but most likely will be placed in the header.php and footer.php files in your theme directory. Make sure that both <?php wp_head(); ?> and <?php wp_footer(); ?> are being called.
<?php wp_head(); ?> should be placed the line before the end head tag, </head>.
<?php wp_footer(); ?> should be placed the line before the end body tag, </body>.
Make sure both PHP function calls are in the appropriate place of your theme code and reload the page, the LightBox effect should now work.
Hi Zach —
I have one question, or rather a feature request I guess.
Would it be possible to make it so that it’s possible to attach the link to the product image – so that when someone clicks on it it takes them to the individual product page that you’ve set on the back end? Would be nice to have that option.
I’ve been monkeying around with this for the better part of a day and I’ve got a few other things too that might make for good future features. As it is this is a great plugin. Nicely done!
-Jack
Hi Jack,
What you want is actually quite easy to do with the current version of CataBlog. A fairly undocumented feature is the template tab in the options panel. This tab lets you set the HTML code that will be rendered by CataBlog. Certain “tokens” can be set in the HTML code where you want a specific value to be placed. For instance, you want to have the thumbnail image be clickable, then what you should do is wrap the second line of code:
<img class='catablog-image %LIGHTBOX%' src="%IMAGE%" height="%IMAGE-SIZE%" width="%IMAGE-SIZE%" />with an<a href="%LINK%">tag. Literarly leave the token,%LINK%, as is, it will be replaced with the catalog item’s link. Notice the other tokens in the code and you can see how extendable CataBlog really is. Also keep in mind you can always wrap your shortcodes in a<div id="my-special-catalog" />tag with an id or class, allowing you to override the default CSS with anything you want. Good luck and let me know how it turns out.– Zach
Hi Zach,
I recently discovered that I’m having an image issue with Lightbox. When I click on a thumbnail the larger image doesn’t load. Sometimes it just loads the thumbnail size and sometimes it loads the larger Lightbox container but the images is still the thumbnail size. Head to:
http://www.modernmotive.ca to check out what I mean. Just flip through the catalog items.
Hi Roy,
I’m really sorry that you are in crisis mode for a client, I myself am in similar situations and don’t really have a lot of time to help you troubleshoot this issue. I went to the link you sent me and clicked on dresses. Then I clicked a dress thumbnail and it loaded the LightBox and bigger version perfectly. I even checked the image source and they are coming from the right directories. Perhaps you want to enlarge the LightBox image size, since he LightBox image is also rendered from the original and is not the actual original. Also if you are still having problems loading images can you tell me which browser and operating system you are using. I believe I tested LightBox in IE 6 – 8, Safari, Firefox 3 and Chrome but maybe I missed something. Thanks,
– Zachary Segal
Hi, Zach. We’re having the same trouble on my end. My client run IE 8 and the Lightbox is not functioning. Works fine with Safari and FF. I’m going to check the header/footer tags, but I wanted to see if there had been any developments on this front.
Hi Mercer,
If you have an example page that I could look at that would help a lot, let me tell you the majority of times the LightBox doesn’t work is because the theme doesn’t include
wp_footer(). Also can you try disabling other plugins which might cause JavaScript conflicts. Another thing you could try is to clear the cache for IE 8 and then hold the shift button while refreshing the page to force IE to go to the server and download all resources again. Thanks and let me know what happens.– Zach
UPDATE:
and are both where they should be.
Still not functioning in IE 8. I for one would appreciate the whole world shucking IE, but I guess that’s just not going to happen. 😉
Hey, Zach! That was so fast. Wow.
Here’s the same page.
http://marfastuff.com/?page_id=29
Going to attempt clearing her cash next.
Mercer,
I noticed that the JavaScript code run on that page is using the console object to display debug messages. The console does not exist in IE 8, therefor any console.log calls will break the page’s JavaScript execution. Please remove the message and try again, notice that the LightBox works great in IE 8 on this site. If you do not know how to remove the console.log() call, try deactivating certain plugins or changing themes. Here is the message I found in the Safari console.
[cycle] terminating; zero elements found by selectorIT’S FIXED! It was a bug in the custom CSS. An error was creating a string (like 100,000) of backslashes. I was wondering why the page were loading so slow. Thanks so much! So awesome that there are developers like you offering freeware AND amazing support. Going to give the plug-in 5 stars.
Just curious but what was the bug in custom CSS? Is that a template file you made yourself or a plugin you installed? Or is it part of CataBlog and something I should be aware of and look to fix in the future. Thanks for the rating, glad you are enjoying it 🙂
– Zach
I have created a few categories and each contain a few pictures. Is there a way to list just the category name and on clicking that name the thumbnails for that category appear?
I have checked the ‘Enable lightbox feature’, but clicking a thumbnail just opens the larger image into a new browser window and not lightbox. I have checked that the wp_head() and wp_footer() are in the right places. Any ideas?
For your first question I am not sure what you mean, currently there is no way to edit multiple items at once. Editing multiple items will be in a future version, you can use the CSV export and import to open all your catalog data into Excel.
It is hard to diagnose JavaScript problems without an example URL. I would suggest first disabling all your other plugins and seeing if that fixes it. Also try switching over to the twentyten theme and see if that fixes your JavaScript. My honest guess is that some other JavaScript code is breaking and stopping execution of all JavaScript on your pages. Can you verify for me that the jquery and catablog javascript libraries are successfully loading?
Let me know what you find out and I will try and help you more,
Cheers
– Zach
Wow, what a helpful set of exchanges. No one is spewing complaints (as you often see on the internet) and Zach is so helpful. Thanks all!
Thank you very much for your compliments Greg.
Hi, i’m trying to use CatBlog with the “Lightbox” feature, but unfortunately, i’m getting the javascript error “Object doesn’t support this property or method”, in IE8. In both Firefox and IE I cannot access the image in a lightbox.. Nothing happen (Firefox), when I click on the thumbnail.
Richard
Hi Richard,
I am curious if you have tried removing all other WordPress plugins and possibly also switching the theme back to twenty-ten. If both of those don’t work can you verify for me that the jQuery and CataBlog LightBox JavaScript libraries are loading, and a url to the broken page always helps too.
– Zach
Hi, I just started using CataBlog and I simply love it because it’s exactly what I’m looking for (the grid layout). However, the lightbox feature doesn’t seem to work for me either and I did check the header and footer code and they are there.
The product catalog can be found here : http://timee.lk/wordpress/?page_id=11
I would appreciate any direction.
Thanks in advance.
Maya
Hi Maya,
After looking at the link you sent me above I can tell you there could be multiple JavaScript errors outside of CataBlog. In particular this one concerns me because I believe it is stopping script execution and breaking the LightBox.
TypeError: Result of expression ‘jQuery(‘ul.sf-menu’).superfish’ [undefined] is not a function.
Perhaps disabling a plugin or modifying your theme code will fix the problem. If you do not know how to troubleshoot and view a JavaScript Console you should learn more about Firebug. Good luck and let me know if you figure out a solution.
– Zach
Zach,
I am also having some difficulties that I can’t trace. The page is http://www.love-the-day.com/lovetheday/wordpress/?page_id=1218. The problem is that the lightbox comes up but wont load any image at all. Any thoughts?
Thank you,
Ryan
Hi Ryan,
Can you try to regenerate all the images or change the size of the LightBox image in the CataBlog Options Admin Panel. It seems you do not have a full size version of the image and that is why LightBox doesn’t load.
Hi Zack,
I’m having the same problems here with a custom theme I made. I checked the header and footer and the code and all seems fine. It’s not a plugin conflict as it works fine on the twentyten theme.
Any suggestions?
http://109.204.112.1:8888/wpveeregrenney/press/
Well I noticed a few huge errors in your HTML code. If you fix these perhaps the JavaScript will work. For instance, you have the opening head tag
<head>directly after your doctype declaration, this is incorrect. All HTML should be contained within the<html>tag and no content should be between the head and body tags. Here is a simple example of a properly nested html document. You may add any extra attributes to the tags you want, but you document must follow at least this very simple hierarchy.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <!-- put your head markup in here --> </head> <body> <!-- put your body markup in here --> </body> </html>Hi, great plugin!
One question, on this page:
http://galaxiemodern.com/wordpress/?page_id=8
The text is showing up as white so its unreadable on the lightbox popup.
Thoughts?
Jeff
Hi Zach,
I posted this on the worpress plugin forum. It would be awesome if you could help me overcoming this issue. Thanks a lot in advance!
Marcelo
Is there a way to enable lightbox for some selected categories but not others?
I have a few fixed posts in my home page and for those I created separate catablog categories. For these categories in the fixed posts and I would like NOT to have lightbox and have the click direct the visitor to the catablog item link.
For internal posts (all non-fixed) I would like the click to open lightbox for thoses images.
I was trying to manually delete the following line on my home page but couldn’t do it from the admin editor.
jQuery(document).ready(function(){ jQuery(‘.catablog-image’).catablogLightbox(); });
Any other way to do it?
Thank you in advance!
Marcelo
HI Marcelo,
I am so sorry for the super long delayed response. I appreciate your patience and hope that one of the solutions below work for you.
Right now there is no built in way to turn off or disable the LightBox javascript code, except to turn the LightBox feature itself off. You may turn the LightBox on and off in the CataBlog Options panel under the LightBox tab. If you wanted to toggle the LightBox feature before and after making new catalog items, then you would effectively be removing the code at the bottom of the page. This works by turning on LightBox before adding any new items to your catalog, then turning LightBox off afterwards, which will stop the script from being rendered at the bottom of your page. You are now free to create your own JavaScript call to
catablogLightbox()The other option would involve hacking the plugin, I will document it here but do not suggest anyone hack the plugin directly. On line 111 of the CataBlog.class.php file in the lib directory is a line of code that should be removed or commented out. Simple add two forward slashes at the beginning of the line of code and the script will no longer be rendered at the footer.
111 // add_action('wp_print_footer_scripts', array(&$this, 'frontend_footer'));I will have to add a way to let people edit this script in the LightBox options, perhaps in the upcoming release.
Hi Zach,
No problem at all for the delay and thanks a lot for the help.
Regarding the first alternative, how exactly do a use this catablogLightbox()? Do I insert something containing this function in the single-post.php page?
Now, regarding the second alternative, won’t this disable the lightbox feature for ALL the pages? My intention is to leave Lightbox enabled for some posts but not all of them.
Some posts will be like “product category” fixed posts on my home page. If you click on a thumbnail in these posts, you will be send to a specific “product” post. Then if you click on an image on the “product” post, Lightbox will open.
Do you think this is doable?
Thanks a lot.
Marcelo
Thanks for the great plugin. I modified the the gallery template so it would suite my needs and now when the lightbox opens it doesn’t bring in the title of the image. It shows “null”. Is there anyway to fix this?
Thanks in advance!
Here’s what I did:
%TITLE-TEXT%
You can skip this post. I fixed it through the css sheet.
Zach —
I love the Catablog plugin. It’s been great for my client. You can see results at http://overthefencesequim.com
I’m having a little problem with the Lightbox, however. It worked perfectly through the first month and a half of development. But sometime recently, the X button (close-lightbox.png) that closes the lightbox disappeared. I can’t find any reference to the JPG in the page code (quite odd). I’m also not getting any errors when I check the page in the Firefox Error console. The same error is happening in multiple browsers. I haven’t installed any plugins recently, though I have upgraded a few. I’m hesitant to uninstall my plugins, as it is a working site. Is that really my best option for testing? Has this happened to anyone else?
Best,
Greg
Hi Greg,
It would appear that you have modified the CSS classes for the LightBox and pointed the background image url for both the close box and the loading animated icon to non existent urls. My guess was that you copied the entire catablog.css file and pasted it into your theme’s folder to make modifications. Now I can see that both files look exactly the same, if you remove the catablog.css file in your template directory everything should be fine. If that causes unwanted changes put it back and you should remove all code from the catablog.css in the template directory that is present in the plugin directory’s catablog.css file. You should only have the CSS properties you want to change in the template directory’s catablog.css file. Here is the path your theme catablog.css file is attempting to load and what it should be loading.
http://www.overthefencesequim.com/wp-content/themes/images/close-lightbox.png
http://www.overthefencesequim.com/wp-content/plugins/catablog/images/close-lightbox.png
As you can see the image is not in your theme but in the plugin folder. Simply remove the background-image property from lines 114 and 211 to have the graphics reappear, or remove the entire catablog.css file from the theme folder. Keep in mind that upgrading CataBlog will remove any custom changes or images you replaced inside the plugin directory. You may set the background image url to load graphics from the theme folder, so when you upgrade CataBlog your modifications are deleted. Please rate and confirm CataBlog works with your current version of WordPress at http://wordpress.org/extend/plugins/catablog/
Sorry if anything is a little unclear, please let me know and I will try and be more verbose.
Thanks so much Zak. This was exactly the problem. I changed the image location in the CSS and it works perfectly now.
I added it to a catablog.css file in my theme directory so that future updates won’t wipe it out. And now I know to add to that just the CSS elements that I want to override the default CSS elements.
Thanks so much!
Greg
Hey Zach… great plugin, thanks for making it available. I’m using the gallery template & having trouble making a CSS change: I’d like the images (%MAIN-IMAGE% & %SUB-IMAGES%) to layout below the description, like this:
Description
image one *space* image two *space* image three
image four *space* image five *space* image six
Here’s a link (using Google’s URL shortener to avoid search engines): http://goo.gl/fsK0n
Any help is much appreciated!
Deam
Hi Dean,
Before any CSS changes I would make sure the the HTML markup itself is in the correct order. Did you change the default template? If so posting your version here could help me diagnose your specific issue. Below I will attempt to give you the CSS and template code you will need.
Template Code:
<div class='catablog-row'> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> <div class="catablog-images-column"> %MAIN-IMAGE% %SUB-IMAGES% </div> </div>CSS Classes:
.catablog-row .catablog-images-column { float: none !important; } .catablog-row .catablog-image { display: inline !important; float: none !important; } .catablog-row .catablog-image.catablog-subimage { margin: 0 0 0 10px !important; }Thanks Zach… that worked to a degree, but it was throwing the second line of images below the page. I modified a bit and here’s what’s working for me (though having the IE 8 lightbox issue):
%DESCRIPTION%
%MAIN-IMAGE% %SUB-IMAGES%
.catablog-row .catablog-image {
margin: 5px 5px 5px 5px !important;
clear: none !important;
float: left !important;
}
.catablog-row .catablog-images-column {
float: none !important;
}
.catablog-row .catablog-image.catablog-subimage {
float: left !important;
margin: 2px 0 0 0;
}
I’ve tried the suggestions about IE8 and it’s still not working — unless I do a hard refresh of the page, then it works. I could have screwed up when trying the suggestions above, I realize. Any suggestions? http://goo.gl/fsK0n
And, thanks for your great support!
Dean
Dean, you have floated your images over the bottom because you most likely need to clear all your floats after the catalog. This is inherent with your solution, which requires that each image be floated to the left. My solution offered instead to turn images into inline elements so they would go side by side and wrap like text. Especially effective when all images are the same size.
What IE8 problems are you encountering? I have not had any problems with my blog’s LightBox and IE8 on the demo page.
Okay, here’s the full template code:
So I assume you mean you template code looks like this now?
Template Code:
<div class='catablog-row'> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> <div class="catablog-images-column"> %MAIN-IMAGE% %SUB-IMAGES% </div> </div>BTW: if you escape the greater then (>) and less then (<) symbols you may post html in comments.
it should not matter if the image tokens are on the same line.
Well… I’m making a mistake somehow withe template code. Just know that I moved the two image calls onto the same line, with a space between them. Without that the main image was offset from the others. Thanks again.
I’m curious, are you making these css modifications directly to the plugin’s files? Because you don’t have to, you may either make your own catablog.css file in your theme for CataBlog specific css code or simply append this code to the end of your theme’s styles.css file. Either one of those is a better option then directly editing the plugins stylesheets because as soon as you upgrade the plugin all your changes will be lost.
Just a little FYI.
Hi Zach,
Great plug in!
I’ve got a problem with my catablog products and lightbox not working with IE8.
I have tried my site with TwentyTen and the problem goes away, so it must be the theme I’m using, which is Platform. I’ve checked that both and are in the right place and they are.
I don’t know what to do next. Any suggestions?
http://www.saobancrafts.com/?page_id=45
Thank you.
Hi Sara,
So I looked at the linked page in Safari and IE8, and found some pretty strange behavior. Everything seems to work splendid in Safari but once I check out the page in IE8 the photo grid is not visible. Strangely if I turn IE8 into compatibility mode I see the top row of the photo grid and it works fine but I don’t see the complete grid.
Are you experiencing the same problem or is just the LightBox not opening for you in IE8?
Also Safari reported no JavaScript errors, so I don’t think that is the problem. Perhaps a CSS bug?
Thanks Zach,
Yes that’s the same problem I have been having – no grid in IE8. The light box works well (sorry for not explaining well). I get the first row in IE7 only but I can live with that.
I had a quick look at the CSS in the validator and there are so many problems! It might be slow going to narrow it down.
thank you.
Sara, I would look for broken html tags, in particular your DOM hierarchy. Perhaps, adding
position:relativeto a few of your wrapping elements in the CSS will help IE. Also an old hack I remember for things like this was adding azoom:1;property to each.catablog-itemclass.Sara, have you tried explicitly setting the width and height in pixels for the <a /> tag that wraps around the thumbnail? I recently ran into this issue myself and setting the thumbnail size in the CSS fixed the page on Internet Exploder…
Let me know if that works or you have any more questions.
Sara, have you also tried adding this to your CSS, thus removing the float:left from the CataBlog images. I believe that is the problem in IE. Add this code snippet to your theme’s styles.css file.
.catablog-gallery.catablog-row .catablog-image { float: none !important; }Two issues:
Is it working on PCs now? ( is the IE8 issue still a problem ). I tried viewing the http://www.saobancrafts.com/?page_id=45 page on a PC and the images / grid aren’t visible.
How do I show the catablog as a grid? or display images along a row rather than a column.
The IE8 issue is more the exception then the rule. If your theme is written well and follows html standards then catablog will not add or break your page itself. Understand that a lot of code, including WordPress, other plugins and the theme all contribute to browser compatibility. Please try catablog in the Twenty Ten theme without other plugins and try IE8, you should see no problems whatsoever.
Hi Zach,
Is there a way to make Lightbox distinguish between a picture link and a regular path (page) link.
Whenever the link in the Catablog item is to a picture I would like it to trigger the Lightbox viewer. If the link is to a page/website (no .jpg extension), I would like it just to redirect to that page.
Thank you.
Hi Marcelo,
You are very correct in wanting the LightBox to behave as you describe. Your only way around this limitation currently is to hack the plugin and modify the LightBox jQuery selector, which works with every HTML element that has a class of
.catablog-image. You could wrap your catalogs that should work with the LightBox in a div with a special class and then change the LightBox selector to,.special-class .catablog-image. Still this has the problem of only working with one catalog at a time and is not automatic. Look for this in a future version of CataBlog and thanks for the clear description of what you needed.BTW, I assume I would need to check if the hyper link goes to an acceptable image file, meaning a file with .jpg, .jpeg, .gif or .png as its extension.
Hi Zack,
Thanks for the quick reply. Please see my comments below:
>> You could wrap your catalogs that should work with the LightBox in a div with a special class and then change the LightBox selector to, .special-class .catablog-image.
Could you shed some light on how to do this? I have no idea which file or files I have to edit in order to make this hack.
>> BTW, I assume I would need to check if the hyper link goes to an acceptable image file, meaning a file with .jpg, .jpeg, .gif or .png as its extension.
Sure, that’s what I meant.
It would be awesome to have that in a future version of Catablog.
Thanks!
Hi Marcelo,
I just released a new version of CataBlog which addresses both the issues you have raised here.
1. The LightBox was changed to work primarily with <a /> tags, and if a catalog item’s link is empty or to an internet image file (jpg, gif or png), that graphic is loaded into the LightBox, otherwise the link will go to the web address you specify.
2. You may also override the jQuery selector in the LightBox Tab in the CataBlog Options Admin Panel. This should allow you to set the selector to something like
.special-class .catablog-image, which will make the LightBox only work on catalogs that are wrapped in an element with special-class.Hope that helps and let me know if you have any more questions about it on the new post Version 1.2.5 Released Today.
Zach —
Sorry to bother you, but I’m having a very strange problem with my brand new Catablog site. Sometimes when you click an item the lightbox opens properly. For other items on the same page, it simply opens the full size JPG for that item. For other items, lightbox tries to open by hangs before displaying anything (just the spinning wheel). What’s really strange is that when you refresh the page, some of the products that wouldn’t load in lightbox DO load, while others that did load do not. Here’s the URL of a page which is having this trouble: http://www.overthefencesequim.com/furniture/indoor/
Note that I’ve tried changing the theme to twentyten — same problems. I also disabled any plugins that I’ve upgraded in the past few months. No luck.
Do you have any insights?
Thanks so much,
Greg
I forgot to mention that some of the JPGs display sideways as well (when it loads the JPG instead of the lightbox). I mention it in case it’s helpful.
last note: everything worked well for two months before this recent problem, so it’s not something essential with the theme.
Sorry to keep adding to this. I’ve found that even on the SAME page load, sometimes when you click on a product the lightbox displays properly, while when you close it, on the next click it might display the sideways JPG. It seems to switch back and forth randomly.
If a JPG is displaying sideways then most likely the original uploaded image is being displayed instead of the full size generated image. This was a new feature in 1.2.5 because some people didn’t want to have 3 copies of the image on their server, instead having CataBlog use the original uploaded image. If CataBlog can not find the full size image, then it will use the original instead. Just some info I thought you might find interesting…
Greg, have you tried reloading the gallery template in the options panel? Look at this post for some other helpful tips and things to try.
http://catablog.illproductions.com/2011/04/version-125-released-today/
Sorry Zach. I’ll try this before I do anything else. Thanks for the heads up.
I followed the suggestions on that page (reloaded the gallery template, etc) — nothing. So I then regenerated the images via Catablog:Options:Systems and it works perfectly now! Thanks so much! I’m donating more money to you for creating such a powerful system and for supporting it so well.
Hi, Zach,
I’m hoping I can get catablog to work, it seems to be exactly what I’m looking for. However I am having 2 issues:
1. Lightbox isn’t working. I am using the Headway Theme.
Thus far, I’ve activated TwentyTen instead and disabled all plugins except catablog and still it didn’t work. I’ve looked at the source code of the loaded page and the script is called, but when I click on the thumbnail, it just loads in a blank window, instead of as a light box.
I’ve also looked at the source code and found class=”catablog-image” on the “a” tag.
I’ve looked at footer.php and found the following:
<?php
headway_footer();
wp_footer(); //Included for plugins
headway_html_close(); //Close and
I’ve regenerated the images, and “changed” the template from gallery.htm to default (which just changes back) and saved.
None of this has changed anything. Any ideas?
2. In Headway, but not Twenty Ten, several gray bars appear, that seem to be associated with a code tag.
Help?
Hi Karelle,
First off, can you tell me what browser you are using to test the LightBox?
I would also like to know what version of CataBlog you are running? 1.2.6?
Also, can you please check two things for me? both are in the options section of CataBlog. In the LightBox tab can you make sure that “Enable LightBox” is checked. The other thing is the template tab, could you make sure you are using either of the built in templates, either default or gallery.
Lastly, could you try disabling all other plugins and then try the LightBox, if it work, try enabling each plugin one at a time until one breaks the LightBox.
Thanks again for your interest in CataBlog,
never mind all that crap I told you before, now that I have looked at your page it is painfully obvious. Please go to the admin catablog options and go to the LightBox tab. Set the LightBox jQuery Selector to
.catablog-imageand it should work.I arrived at this conclusion by looking at the page source in my web browser, at the bottom is the CataBlog script code. I noticed that you do not have a jQuery selector set because the code looks like this:
jQuery(document).ready(function(){ jQuery(<em style="background-color:yellow;">''</em>).catablogLightbox(); });The empty yellow string is where the selector should be, please follow my instructions above to make sure you set the jQuery selector in the catablog options panel to
.catablog-image.Cheers 🙂
Hi, Zach,
I’m hoping I can get catablog to work, it seems to be exactly what I’m looking for. However I am having 2 issues:
1. Lightbox isn’t working. I am using the Headway Theme v 2.0.10.
Thus far, I’ve activated TwentyTen instead and disabled all plugins except catablog and still it didn’t work. I’ve looked at the source code of the loaded page and the script is called, but when I click on the thumbnail, it just loads in a blank window, instead of as a light box.
I’ve also looked at the source code and found class=”catablog-image” on the “a” tag.
I’ve looked at footer.php and found the following:
I reloaded the gallery template and regenerated the images: no change.
Firebug is not noting any problems in the console.
2. There are gray bars that correspond to instances of the
tag. I can remove these with css, but I was wondering why you use that tag to enclose the div structure.Thanks in advance for your help.
BTW, I thought I posted this last night, but I'm not sure, as I was really tired. If this is the second post, my apologies.
Oops, giving spaces to the code tag did not stop it from being a tag. Who knew?
Who would have known…ha ha. I suspected the code tag was not related to CataBlog what so ever, and thanks for confirming that here. 🙂
It is so often that someone points to the plugin as being broken when these kind of things happen, and not the the theme or post content. Just so you know, CataBlog is meant to be inserted at the root content level, meaning sibling to the paragraph tags that are created by the wpautop filter.
You did, please check my responses.
http://catablog.illproductions.com/2010/11/help-lightbox-is-not-working/#comment-2121
Many thanks!
My problem was related with the wp_footer().
Humberto
Hi! i tried use your Catablog 1.2.9.8, but LightBox doesn’t work 🙁
Configuration
Opera 11.51
IE 9
WordPress 3.2.1. -with russian languge pack
jQuery JavaScript Library v1.6.1
activated plugins
Exec-PHP
WP Show IDs
WordPress theme – my own
These options checked
wp_head – setup properly
wp_footer – setup properly
switch on and of plugins – without result
options .catablog-image – setup properly
options use LightBox – on setup properly
Can you check to see if you are loading two different versions of jQuery? It is possible to load two different versions and cause JavaScript conflicts this way. Also a link to an example page would be extremely helpful if you want me to help you solve this problem.
Hi!
I tried use your Catablog 1.2.9.8, LightBox work but not NEXT and PREV buttons…
My code is HTML 5. Is it a problem ?
The HTML version of your theme should not matter, it could easily be another plugin or your theme’s code.
Have you tried disabling all other plugins and the default twenty-ten or twenty-eleven themes?
yes but it doesn’t work…
My guess is a CSS or JavaScript conflict, but I cannot be sure with an example page to diagnose. If you send me a link to an example page which exhibits your problem that would be really helpful. Cheers.
Wonderful plugin! Thank you! It’s exactly what I’m looking for. You saved the day! Re: Lightbox, is it possible to disable the previous/next buttons? Not sure if this is a setting or if I’d need to comment out a function in the js. Apologies if this has been previously covered elsewhere.
Thanks for your interest in CataBlog, glad to hear it was exactly what you were looking for 🙂
There currently is no option to turn of navigation in the LightBox, you could modify the JavaScript file yourself or hide the buttons with CSS. Only problem with hiding them with CSS, I think the keyboard controls will still allow navigation in the LightBox, not sure though. Look at the calculate_meta() function in the CataBlog LightBox JavaScript file for disabling with JS.
I commented out lines 426-433 in catablog.lightbox.js and it works just as I need it to. Thank you again!
cool, glad that worked for you. be careful with updates, as they will overwrite your changes.
i just need this, dissable keyboards controls, but not the next previous buttons, can you help me? please!
Great plugin, first off! It is awesome. However, I am having a problem.
On our galleries we have a combination of images in portrait and landscape orientation. When viewing any image that was shot in landscape, they show great in the LightBox. However, when the image is portrait, it is small.
I have verified that the images uploaded weren’t resized images and also tried changing the max pixel height/length in the options but that didn’t seem to help.
Link: http://yourvantagephoto.com/wedding-gallery
(Pardon the dust on the site. We are rebuilding it at the moment).
What you are experiencing is actually part of the LightBox, it will fit the large image into your window, sometimes shrinking the image if it is really tall. If you use a larger monitor you will see what I mean, the image will be shown at full-size. Currently, short of hacking the plugin you are stuck with this behavior.
I am viewing the images on a very large monitor (24″) and the vertical images are still very small. It also does the same thing on smaller monitors.
Is your HTML document height shorter than the full size portrait images?
Hi Zach,
Was having problems with light box so followed instructions and went to twenty ten theme, and great it started working, alas only in explorer it will not work in chrome. Any ideas.
Cheers
Steve
You might also want to try disabling other plugins. If you have a Javascript error that is properly caught at runtime, then all Javascript will go down. I am unsure if you are referring to the site you linked to in the form, but http://twitterworld.co.uk seems to work fine in Chrome and Safari for me.
I was facing same problem, lightbox is not working in my custom wordpress theme,
wp_footer(); function is missing in footer.php file, so I have add this and now its LIGHTBOX is working fine.
I am having an issue with lightbox. When you click on a photo lightbox opens up but when you use the next button does not spot at the end of the photos for the specific product. It keeps scrolling through all photo for all products. Is there an easy fix for this?
If you use multiple CataBlog shortcodes, one for each product and double check your LightBox preferences are set correctly you should not experience your problem.
Hi Zac
Testing a clients site on IE 9 and the lightbox images are not enlarging. Site works in FF and Safari. Deactivated all plugins and changed out theme to Twenty 11. Can you help?
Hello,
when i add a subimage to an entry it will not show in Lightbox.
Can you please help me out with this. I dont know anything about code.
Thanks in advance!
Kind regards,
Peter Van Deyk
Can I prevent lightbox to navigate between the products of the page?
For example if page lists product A, product B, product C, product D and I click on product A image, lightbox zoom on it and NEXT/PREV button are disabled.
Hi,
Love this plugin – have only one rather large issue…would love your help! 🙂
When I place a gallery on a page with sidebars it
1. removes the sidebars from page.
2. they appear in the light-box when you click an item
Could you please explain how this might be happening/how i could fix it?
example here: http://shopluxe.com.au/directory/members-gift-store/
Your help is very much appreciated!
Kind Regards,
Hannah
add to that.
When using the widget in any sidebar the entire page errors out however this could be in relation to another plugin. Can this be worked around?
I am running:
Latest versions of WordPress and Catablog
Plugins
OTW sidebars – this plugin in-particular could be the cause of issues.
plugin website: http://otwthemes.com/product/sidebar-widget-manager-for-wordpress/
Hi Hannah,
Can you please try disabling all other plugins and using an Automattic theme such as twenty-fourteen. The CataBlog gallery sidebar widget worked fine for my blog running WordPress 3.9.1.
Hope that helps 🙂