Announcing Schmancy Box, a jQuery based LightBox plugin for WordPress
Based on the jQuery plugin FancyBox.
I fell in love with the original FancyBox plugin when it first came out. It’s a refreshing, more stylish lightbox than many of the other variants. I do a lot of WordPress work for clients and thought it would be nice to have a One-Click install. Hence SchmancyBox.
This plugin was co-created with Jeremy Desvaux, an awesome, uber talented PHP / Zend developer. I’m more design lead and don’t have the tech skills to get the tech PHP, so a big thanks to him.
The current iteration does not offer control over every fancy box element, only over the controls I considered to be key (please feel free to scream and shout), the current feature set is
- Screenshot of the menu
- Div (id or class) for lightboxing e.g. gallery
- Default iFrame dimensions
- Overlay Show/Hide (background darkening)
- Overlay Opacity
- Hide Gallery on click
Download the entire plugin, including how-to (zip)
Update – 20th Feb 09: Now fully working with WordPress 2.7 and below.
Update – 25th Feb 09: Now on the official WordPress.org PlugIn Database
January 23rd, 2009
7:51 pm
This is just what i’ve been looking for. Does it not work with WP 2.7?
I’m getting an SQL table not found error.
January 23rd, 2009
8:34 pm
Hi Johno,
Not sure about 2.7 – Haven’t tested it lately and by the sounds of your error there is a problem.
I will have a look at it over the weekend and try & sort it out.
February 3rd, 2009
7:04 am
I too am getting the SQL table not found error. I’ve integrated the fancybox script manually, but would of course like to have it as a plugin. This is the error:
SQL Error!
SELECT * FROM wp_fancybox WHERE FB_ID=1
Table 'sayshea_wrdp1.wp_fancybox' doesn't exist
I also received this error when trying to activate:
Fatal error: Cannot redeclare mt_add_pages() (previously declared in /home/sayshea/public_html/wp-content/plugins/custom-admin-branding/custom_branding.php:15) in /home/sayshea/public_html/wp-content/plugins/schmancybox/schmancybox.php on line 17
I deactivated the custom admin branding plugin, so that i could activate schmancybox plugin, but then got the sql table error.
Anyway, maybe that will help work out some bugs! I’m gonna reactivate the manual install I had going for now, but good luck on this and thanks for your work!
February 20th, 2009
10:25 pm
Thanks for all your feedback guys – the plugin is now fixed and works perfectly with WP2.7!
May 6th, 2009
4:16 am
Hi George,
sorry to bother you for I’m a real beginner and I can’t make Schmancy to work…I googled a lot but couldn’t find a detailed set-up.
What I’m trying to do is to open a gallery from an image…With FancyBox was impossible to do that and then I bumped into your plugin and I understood that that could be done…so:
I installed Schmancy, I went to its settings and typed “Schmancy” in “class for lightboxing”…then what should I do?
I read the instructions which say to type
<a href="”...”" rel="nofollow"></a>I guess I have to write this in the page gallery I would like to be opened with Schmancy. the “…” should be the address of the gallery and should be the first image to be loaded, right? I told you I’m really nuts
then I wrote this
<a href="wp-content/gallery/spinning-monks" rel="nofollow"></a>and nothing works…what did I do wrong? (I guess everything)
I would be really grateful if could help me with this
have a nice day
May 6th, 2009
11:59 am
Hi Luigi,
I’m not sure I fully understand but your example code is missing a class to call the fancybox. For example
<a href="wp-content/gallery/spinning-monks" class="Schmancy" rel="nofollow"></a>If you add this then the lightbox will work however I’m not sure linking to a folder will work.
Ordinarily I would use it like this
<a href="full-size-image" class="schmancy" rel="nofollow"><img src="thumbnail" title="Image Description"/></a>Hope this helps
May 7th, 2009
8:35 am
thanks for the answer George,
I definitely missed the class.. but I realised that you used it to an image…
my question (I’m sorry for my English I’m Italian), I mean, what I was trying to ask, is this:
I have a “photography” category with 14 images in the body, which are linked through permalinks to 14 NEXTGEN galleries [nggallery]. My dream would be that when I click on an image in the category, schmancy would start the fancy slideshow in the same page, opening the gallery directly, rather than going to the page linked and then start the slideshow. I was hoping that if I manage to assign the class schmancy to the [nggallery] that magic would happen.
maybe it’s still a dream, don’t know…
I’ll try adding the class to the folder and see what happens..and I’ll tell you
thanks a lot for your time!!!
May 11th, 2009
10:35 am
Hi there,
I am clearly doing something wrong.
Using the below
<a href="http://www.google.com.au" rel="nofollow"></a>does not work at all, it goes right to the link instead of opening in the lightbox.
I have made sure that the class is “Schmancy” in the plugin settings.
I can not get it to work in basic images either.
Any help would be fantastics. Thanks!
May 11th, 2009
10:56 am
Hi Dave,
As well as defining the class in the options menu, you will need to add it to the link you wish to fancy box, e.g.
<a href="http://www.google.com.au" class="Schmancy" rel="nofollow"></a>Hope this helps.
May 11th, 2009
11:01 am
Hi George, thanks for the quick response.
My apologies, I had actually defined the class in the link as you have shown above already, but double checked to make sure i had everything right ( i think)
You can see it in use here.
http://muttromedia.com.au/clc/fixtures/
No sure whats going on…
May 11th, 2009
2:44 pm
Hi Dave,
The website linked is using MooTools & two different versions of jQuery. I would imagine there are a lot of conflicts and I’m not sure that you will be able to resolve it without quite a lot of work.
You could try deleting the line in SchmancyBox that calls jQuery (around line 102)
Otherwise I would advise trying to work with only one JavaScript framework as this will lessen the conflicts.
Let us know how you get on
July 8th, 2009
4:46 pm
Hi there,
So Schmancy is supposed to open a webpage/iframe too, not just pictures and videos? Cause I’m not getting it to work. I have defined the class name as Schmancy in the options, referring to it in the link tags (class=”Schmancy”) properly, using rel=”nofollow” and everything, but the link still opens normally (navigates away from the page) instead of popping up in a schmancy box.
Any ideas?
July 9th, 2009
12:27 pm
Hi Riku,
Do you have a link I could look at?
Cheers,
George
July 9th, 2009
3:13 pm
http://www.recue.net
Schmancy not activated at the moment. Dont know if it’s a conflict with nextgen gallery. But I was able to get fancybox for WP working, even at the same time when nextgen lightbox was on so it opened two popup boxes at the same time. But the problem with fancybox for WP is that it applies it for every possible instance and I’d like to use the effect on selected elements that would open an iframe containing a webpage with some info on it.
With schmancy it doesn’t give any errors or indicate any conflicts but it just doesnt pop up. Just navigates away on a link.
Cheers,
Riku
July 17th, 2009
6:50 am
Ok, problem solved. Using fancybox for wordpress with iframes and only to those links I want.
August 30th, 2009
2:39 am
Will Schmancy-Box work in 2.8.4? My link/image opens normally (navigates away from the page) instead of spawning a Schmancy box.
September 2nd, 2009
2:18 am
seems to be broken again in WordPress 2.8.4
goes right to the link as a page instead of opening in a lightbox. Would love to see this working…
Cheers
March 13th, 2010
5:39 am
Hi!
Is the plugin working with WP latest version v2.9.2?
Any links to some sample pages?
THANK YOU!
Peter