WordPress › Support » [Plugin: jQuery Colorbox] Looks Like a great Lightbox, But

klogan2
Member
Posted 1 year ago #

Looks like a great lightbox plugin, but I just can't get it to work. Using WP 3.3.1, Twenty Eleven & deactivated all other plugins. Fairly fresh install.
Here's the problem: images in post/pages, when click on thumbnail, it goes to full size image in new page, NOT the lightbox. The lightbox works fine when I click on the full size image (BIG image), but what's the point of that? :)
Links seem to work fine, when placed in post. However I can't get links in custom menu to work, when putting in the proper class.
Any advice/ideas? Happy to hear. But I need to get this resolved or use a different solution.
Cheers everyone,
Kevin

http://wordpress.org/extend/plugins/jquery-colorbox/
klogan2
Member
Posted 1 year ago #

So I decided I like this lightbox so much, and since this is a brand new site, I am empirically starting from scratch: deleted WP (3.3.1)+ its Database.
Reinstalled WP, fresh new DB. So far, all I have installed or done (via settings) & using Twenty Eleven.
1. askimet
2. jQuery ColorBox
3. Set Permalinks to POST.
Results, so far Jquery Colorbox is working AOK.

Here's my guess as to what the problem was. I had been using a different lightbox, and I have been testing today other lightboxes. Somehow, somehwere, some conflict occurred.
But now I am going to reinstall all the other plugins that I need for this site, and see how it goes.
andrejcremoznik
Member
Posted 1 year ago #

This plugin by default won't act on links that don't point directly to the image which was the problem in your case.

When you insert an image make sure the Link URL field points to the file - click the File URL button.
klogan2
Member
Posted 1 year ago #

Don't think that was/is the problem, unless I am missing your point. All my thumbnail links are in this format: http://domain.com/wp-content/uploads/2012/04/filename.jpg
andrejcremoznik
Member
Posted 1 year ago #

Sorry, I misread. The selector triggers on filenames ending with an image format extension. If that wasn't the problem, I can only guess.
klogan2
Member
Posted 1 year ago #

So I decided I like this lightbox so much, and since this is a brand new site, I am empirically starting from scratch: deleted WP (3.3.1)+ its Database.
Reinstalled WP, fresh new DB. So far, all I have installed or done (via settings) & using Twenty Eleven.
1. askimet
2. jQuery ColorBox
3. Set Permalinks to POST.
Results, so far Jquery Colorbox is working AOK.
Here's my guess as to what the problem was. I had been using a different lightbox, and I have been testing today other lightboxes. Somehow, somehwere, some conflict occurred.
But now I am going to reinstall all the other plugins that I need for this site, and see how it goes.

So, to followup, I have successfully reinstalled all the plugins that I had on my previous WP, AND Jquery Colorbox is STILL working,,, YEA.
It really is a very nice lightbox, with iFrame support, which is why I was looking at it in the beginning.
To reiterate, my theory is that one, or several, or all of the several lightboxes I tried (and deleted, as fully as I could), left something behind, or altered something in the WP core (that even a re-install of WP over the existing install didn't resolve) caused the problem I experienced with this lightbox not working. I'd say, if it's possible, the devleoper might try further tests, and amend his plugin to check for the offending files, and do something about it. I realize this is very complicated stuff, but from my reading there are quite a few people having trouble installing this lightbox.
As best I can remember, the lightboxes I tried were: LightBox 3, Lightbox-Plus 2.4.6, Easy FancyBox 1.3.4.9 & lastly, JQuery Colorbox 4.3. An ignorant first bet (on my part) offender would be FancyBox, but I'm just gut-guessing with no evidence to offer at all.
On my fresh istall of WP 3.3.1, I installed JQuery Colorbox 4.3 and ONLY JQuery Colorbox 4.3, and all is well.
Laslty, one feature request: if the lightbox could remain centered, if the background page mistakingly (or intentially) gets scrolled, that would be terrific. I do find that some people (site viewers) get confused with the multiple scroll bars, and/or if they scroll the background and then the lightbox goes up, possibly even off the page.
All in all, great work with this plugin. I am going to enjoy using it :)
techotronic
Member
Plugin Author
Posted 1 year ago #

Hi,
glad you could solve your problems and are still using my plugin.

@your feature request:
I guess that this would technically be possible, but if your images are bigger than the screen and you don't let Colorbox scale them down, users would not be able to scroll around on the site in order to see the whole picture.

Maybe I could implement this as an optional feature sometime in the future.

Cheers,
Arne
klogan2
Member
Posted 1 year ago #

@techotronic,,, the man himself. Well done on the plugin.
The idea of the image or iFrame remaining centered shouldn't dismiss the idea of scaling,, I think? I get what you mean, that the image/iFrame should fit within the browser window, but it's also possible to scroll the underlying page. With your lightbox, currently then the image/iFrame scrolls with the underlying page. I THINK that I saw one lightbox (probably FancyBox) where even if the underlying page scrolled, the image/iFrame would remain centered (and scaled) in the browser window.
Get what I mean? In any event, delighted with your lightbox.
Cheers,
Kevin
klogan2
Member
Posted 1 year ago #

Plugin still working great, but I still haven't figured a way of getting the colorbox-link to work with WP Custom menus. Even using the "Class" field in custom menu setup doesn't do the trick, becuase WP puts the class in the li tag
<li id="menu-item-155" class="colorbox-link menu-item menu-item-type-custom menu-item-object-custom menu-item-155"><a href="http://facebook.com/TheMidwayBB">The Midway On Facebook</a></li>
The above link works fine, but not with colorbox. The link below works perfectly, but note the class is within the <a> tags:
<a class="colorbox-link" href="http://themidwaybb.com/wp-content/cal_double.php">Check<br />Availability</a>
Any ideas? A way to fake out WP? (I actually tried typing in the class in the URL field, but WP strips out most, if not all of it.
Still thinking :)
Cheers,
Kevin
vlad_manuel
Member
Posted 1 year ago #

Hello. I would be very grateful if you can help me too. I installed the plugin on this website http://blog.lunchbox.ro/ . An example of an img element from the website: <img class="alignleft size-medium wp-image-873 colorbox-870" width="300" height="200" alt="" src="http://blog.lunchbox.ro/wp-content/uploads/2012/04/IMG_5998-300x200.jpg" title="IMG_5998"> . As you can see the colorbox class appears but it doesn't work. Do you have any ideea? What should I do to make it work?
Thanks,
Vlad
klogan2
Member
Posted 1 year ago #
RE my last post, getting Colorbox to work on links in the Custom Menu, I came across another person who wanted the same for Fancybox, SO, thanks to HahahaComedy & his/her code (added in functions.php):
```
function add_menuclass($ulclass) {
return preg_replace('/<a rel="fancybox"/', '<a rel="fancybox" class="fancybox"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');
```
I did:
```
function add_menuclass($ulclass) {
return preg_replace('/<a rel="colorbox-link"/', '<a class="colorbox-link cboxElement"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');
```
After editing the functions, in Dashboard/Appearance/Menus, in the screen options tab up top, make sure the Link Relationship XFN is ticked. In Custom Menu involved, in the Link Relationship XFN field I added colorbox-link

This becomes class="colorbox-link" WITHIN the anchor <a /a>, where it'needed, not with the li tags.

It WORKS fine, just not sure it's perfectly written/executed. Also, if I add a Title in the title field in Menu Setup, it stops working, so for now, I live without having the title in the ColorBox.
Anyone confirm this is good code? Fix it perfectly? Make it so the title field doesn't break the link?
Anyway, for now, I'm happy to have it working at all.
Cheers,
Kevin

Original post RE FancyBox:
klogan2
Member
Posted 1 year ago #

http://wordpress.org/support/topic/add-class-to-link-in-custom-menu
jgr
Member
Posted 1 year ago #

I also cannot get this plugin to work correctly.
After I red this thread I hoped that a re-installation of wordpress could help me, too, because I also tried out several lightbox plugins before installing jquery colorbox.
So I re-installed wordpress. On the fresh installation I only installed another plugin (antispam bee) and then jquery colorbox. Result: It will trigger on single pictures but not on gallerys.

Can anyone help?

(WP: 3.3.2)
techotronic
Member
Plugin Author
Posted 1 year ago #

Hi,
if you post your URL here, I can take a look.
Cheers,
Arne
jgr
Member
Posted 10 months ago #

Seems like I cannot send you private msgs here, so I used the form mailer on your homepage to send you the blog's url.

[edit] oh, forgot about the form mailer. it doesn't work for me. I used the mail adress provided on the imprint of your homepage.

[edit2] btw it just doesn't work on the blog I provided within the mail. On my private blog it doesn't work, too. :/

[edit3] and yes, wp and plugin are up to date. the admin has a username which is different from the default name. could that be a reason? Ive deleted antispambee. still not working. I even deleted htaccess password protection but that changed nothing.
iperez_genius
Member
Posted 8 months ago #

i used this code too.
to add in the title you need to adjust what is being matched. Not entirely sure why this should break to fix the title issue
i removed refrence to the href ie.

preg_replace('/rel="colorbox-link"/', 'class="colorbox-link cboxElement"

That should resolve the title issue.

Personally i am having an issue that if i have two links with the same rel only the first to load works. the rest break...

I have no idea why.

My only solution to this is to create duplicate functions that match different rel strings...

very annoying if you ask me ...
iperez_genius
Member
Posted 8 months ago #

for those that can't get the preg_replace to be applied to every menu option in a custom menu you need to set a preg_replace parameter called "Limit"
This is the fourth(last) parameter. Setting it to 1 will only try and replace the string rel="colorbox-link" once. setting it to 2 will replace the first two instances. and so forth

Setting it to -1 will replace all instances...
klogan2
Member
Posted 6 months ago #
Lastly, one feature request: if the lightbox could remain centered, if the background page mistakingly (or intentially) gets scrolled, that would be terrific. I do find that some people (site viewers) get confused with the multiple scroll bars, and/or if they scroll the background and then the lightbox goes up, possibly even off the page.

Updating this, quite some time later, but I did find at least a decent solution to this. Perhaps I wasn't explaining myself well, but in any event, if you all want to try this, go ahead. It's simple enough. Add to your theme's stylesheet:
```
#colorbox, #cboxOverlay  {
	position:fixed !important;
	}
```
Even though the background page (under the lightbox) will scroll if the lightbox is scrolled (assuming you're loading a page in the lightbox tall enough to HAVE scrollbars) to its top or bottom & THEN some, the lightbox remains in position.
klogan2
Member
Posted 6 months ago #

Update of my last post. I HAVE found a problem with my fix above, using:

#colorbox, #cboxOverlay {
position:fixed !important;
}

If you have more than 1 link-lightbox (for html sites) on a page, there are problems. It's a start, though, maybe I will work more on it. If anyone has any ideas, would love to here them :)