jQuery Lightbox For Native Galleries
Description:
Makes the native WordPress galleries introduced in WordPress 2.5 use jQuery Lightbox by balupton to display the fullsize images.
Demo:
To create the below gallery, all I’ve done is inserted [gallery] into this Page’s content. No modifications are required to get the Lightbox working.
Images by Microsoft
Download:
- Download from WordPress.org (
downloads total)
Known Issues:
The lightbox package doesn’t like images larger than the user’s screensize. I’ve added a bit of CSS to try and account for big images, but it’s not perfect.Fixed in v1.1.0.My plugin isn’t per-gallery aware. The next/previous links when in lightbox mode share between galleries.Fixed in v1.1.0.
Hello,
I try your plugin. Good job.
But I should be a good idea, to fitt the size to the window!
CU
Carsten
Carsten Giesen on August 2nd, 2008 at 7:12 AM wrote:
Yeah, that’s the Lightbox plugin. I’m looking into alternatives.
Alright, here’s my results:
* The other jQuery Lightbox sucks and doesn’t do resizing either.
* Thickbox seems to require DOM (HTML) modification and is overly complex.
* Original Lighbox (v2) requires DOM modification as well and it doesn’t appear to do resizing.
Simply put you probably just want to upload smaller images. I’ll look into it uses the “Medium” version though.
Excellent work, I’ve been looking for this for some time! Thanks for sharing :)
After using it for a while, I found one small problem. If you have several posts with [gallery], all the pics will be in the slideshow, no matter what post you start it from. I feel that each slideshow should be limited to images on the current post [gallery]. Other plugins work by putting something like rel=”gallery[post-id]“, but i still haven’t looked at your coding. I’ll fix this on my installation, but i think it should be on the next release ;)
Thanks again
Yeah, I know. There are no easy hooks to do it though. I’m going to have to hook into
the_contentlate and then regex the final post output. A major pain.So I opted to just get this simple version out the door to see if there was any interest in it or if I was just wasting my time. ;)
Yeap, after looking at the code i realized it’s not that simple. The regex solution has some problems too; there are some themes (as the plaintxt ones - sandbox is often used as the base for many themes) that already put a “rel” tag on the gallery images. So it’s not just append a rel, one must also check if there’s already a “rel” inserted; i changed another plugin to do this, but the code was getting messy…
Anyway, there is interest in this plugin, i guess :D
jQuery Lightbox by balupton will NOT work with IE6 which, according to my stats, represents about the 65% of my users.
nikos on August 4th, 2008 at 2:38 AM wrote:
I don’t have IE6, so I can’t test. Even if I could though, the issue most likely is with the JS package rather than my plugin so there’s not too much I can do. :(
Any chance of supporting Lightbox 2 (http://wordpress.org/extend/plugins/lightbox-2/)? I find I like this version better.
Eric on August 4th, 2008 at 9:56 PM wrote:
Lightbox 2 requires adding
rel="lightbox"to all of the links. This is a major PITA. The JS package I’m using at the moment allows me to do it without any HTML edits.I’m going to be looking into it though.
I use this plugin (http://mdkart.fr/blog/plugin-add-lightbox-pour-wordpress/) with Lightbox 2 for posts. Maybe it has a new angle on getting the REL attribute added.
Eric on August 5th, 2008 at 8:18 AM wrote:
Yeah, that’s what I’m going to have to end up doing. Not terribly difficult, just a pain. ;)
Lightbox is ok, but I use Highslide JS all the time! Highslide is truly amazing and works everywhere. I’ve been using the WP-Highslide plugin along with Next-Gen Gallery, as well as the Highslide core javscript, coded into various pages of my themes. Would be great if this plugin would have support for Highslide as well…
» Highslide JS
» WP Highslide
Since I’m going to have to add
rel="..."support, yeah I’m thinking of just bundling a couple different scripts and allowing the user to choose.Definite interest!! This is exactly the way it should be done!
If you do decide to add highslide, or slimbox, or one of the others, please do that on an options page, not something that has to be jacked with on every post.
Resizing can be done via an image manager plugin - like Flexible Upload. I sure wish someone would come up with a plugin that worked as simply and effectively for inline slideshows.
Thanks for the hard work, looking forward to the upgrades.
KLM
This is a very nice plug-in. I like the way keyboard shortcuts provide additional navigation options. Thanks for your contributions to the WP world.
Chris Cavallucci on August 19th, 2008 at 7:13 PM wrote:
I can’t take credit for that as I didn’t write the JS package, but thanks anyway. :)
I’ve just noticed that on my site (and yours) there’s a popup for http://www.savethedevelopers.org which is due to the included JS. Were you aware of that?
A bit of a pain really… Am I missing something obvious?
James on August 20th, 2008 at 9:03 AM wrote:
I was aware that it was on my site (I added it to bug IE6 users to update), but no I was not aware that it was bundled inside of the plugin.
I’ll remove it. Thanks.
So, what’s the reasoning behind not using Thickbox?
Yes, it alters the DOM. It adds some nodes on activation so you don’t have to. I’m not exactly sure what you mean. Plus, it’s already bundled and used by Wordpress.
Here’s all you have to do to make an associated Thickbox gallery:
….
The rel attribute takes care of which image belongs to which gallery.
Seems pretty easy to me.
Also, I think you guys are thinking much too hard about how to go about adding the rel attribute. You don’t have to do any regex replacing or insertion. Simply replace the function that writes the gallery markup. This can easily be done through a plugin. I’d recommend looking into how the post_gallery filter is applied just a little bit harder.
Jason on August 21st, 2008 at 9:49 PM wrote:
That is very poor solution for forward compatibility reasons. Regex would be a much, much better solution.
I will be making the switch to a “rel” solution, but I’m busy with other projects at the moment, namely recoding Viper’s Video Quicktags from scratch which is literally like 150x as popular as this plugin (so it gets priority).
I do not think it’s a poor solution at all. It was anticipated by the developers.
// Allow plugins/themes to override the default gallery template.
$output = apply_filters('post_gallery', '', $attr);
if ( $output != '' )
return $output;
Do you think that taking advantage of pluggable functions is a very poor solution? It’s basically the same thing.
Jason on August 22nd, 2008 at 8:29 AM wrote:
Just because I can reinvent the wheel doesn’t mean I should. If changes are made to the gallery output, that means I have to update my plugin to match it. A major pain.
100x easier to just regex the links inside the gallery div. ;)
Hi people, I’m the author of “jQuery Lightbox (balupton edition)” which is being used in this plugin. I see that a few of you have been having problems or there are features that you would like added. Could you please post them on the plugin’s website under “issues” so that I know what features people want, and where people are having trouble - here is the link: http://plugins.jquery.com/project/issues/jquerylightbox_bal
Thanks, and hope you like this plugin. And thanks Viper007Bond for using my project - I will add a link on the plugins site.
Carsten Giesen, the resize functionality has been added in v1.3.0-rc1.
nikos, v1.0.1-final always has worked with IE6. v1.3.0-rc1 has re-added support for IE6.
James, this message is now optional in v1.3.0-rc1, and IE6 support had been re-added.
Viper007Bond, is the rel/grouping issue you are talking about something that I can help out with? If so, post an issue on the lightbox website and I can see what I can do.
Benjamin “balupton” Lupton on August 23rd, 2008 at 7:05 PM wrote:
Excellent. I’ll update. :)
Benjamin “balupton” Lupton on August 23rd, 2008 at 7:05 PM wrote:
I’m not sure if it’s my fault or an issue with the plugin. Here’s the description of my problem:
http://viper007bond.pastebin.com/f557d8e7d
Benjamin "balupton" Lupton on August 24th, 2008 at 2:08 AM wrote:
This should do the trick:
http://viper007bond.pastebin.com/m52eb4714
I install the rc1, but sorry, I didn’t see any differents.
Whats my error?
I omly copy the new files. Are ther some settings todo?
Carsten
Benjamin "balupton" Lupton on August 24th, 2008 at 2:08 AM wrote:
Oh, do an each! Ingenious! lol Thanks, I’ll try that out. :)
Carsten Giesen on August 24th, 2008 at 8:13 AM wrote:
Dump your browser cache? I dunno. I’ll be updating this plugin momentarily though, so you can probably just wait for that.
Okay, v1.1.0 is committed. It’ll show up on WordPress.org soon. :)
Thanks for the plugin. Saves me time =)
Any advice/pointers/URLs on how to extend this to include iframe and/or inline-content support? That or, and other plugins people found to be working happily beside it (that don’t take too much of a foot print)?
I’ve downloaded and installed this plugin (thanks) but I have a couple of issues:
1. I see no options menu within the admin area to stop the plugin from resizing images. How do I make the plugin *not* resize images. I have the gallery settings inside WP’s Admin area set to 900×1600 for “medium” images hoping this would prevent an auto resize. Am I missing anything?
2. For some reason, activating this plugin makes my theme align left versus centered. I am using the Paid Revolution themes. De-activating all other plugins and turning on this one makes the theme align to the left of the window. Any idea on where I should check to eliminate this issue?
Beyond that, this is the type of plugin I have been very much searching for, offering gallery navigation functionality I would have expected to be within WP by default. Any assistance you can provide would be appreciated.
3. How do I prevent the plugin from auto scrolling. I want it fixed to the top of the screen and show the original file size always… never the medium size or an auto resize. Is this possible?
Sherwin Techico on August 25th, 2008 at 9:50 AM wrote:
Thickbox, which comes bundled with WordPress, supports content in lightboxes. I don’t know how nicely it’ll play with other lightboxes though.
Robert on August 25th, 2008 at 12:38 PM wrote:
That’s because there isn’t one — there’s nothing to configure really.
Robert on August 25th, 2008 at 12:38 PM wrote:
This plugin doesn’t use the medium version, only the smallest one (for the thumbnails) and the fullsize version (for the lightbox). The lightbox script will resize the fullsize version if it is larger than the screen to make sure it doesn’t go off the sides of your screen.
Robert on August 25th, 2008 at 12:38 PM wrote:
Hmm, dunno what to tell ya there. My plugin doesn’t load any styling other than that to control the lightbox. Check out it’s CSS file — perhaps something is up in there.
Robert on August 25th, 2008 at 12:38 PM wrote:
Not sure, you’d balupton will have to answer that for you.
Benjamin “balupton” Lupton on August 25th, 2008 at 2:55 PM wrote:
There’s actually a fair bit of options for the lightboxes: http://www.balupton.com/sandbox/jquery_lightbox/jquery_lightbox/readme.txt
Viper007Bond, for all the requests on my side, could you forward the users to http://plugins.jquery.com/project/issues/jquerylightbox_bal so that I only have one place to check. That being said, I’ll stop checking the comments here after this post. Continue the great work.
Hrmm, I just tried to reply but it didn’t work…
Anyway, there is actually a fair bit of options available via the lightbox:
http://www.balupton.com/sandbox/jquery_lightbox/jquery_lightbox/readme.txt
I’m guessing if you wanted to you could add the wordpress config for these, and then convert it into a JSON array via php and then call $.Lightbox.construct([php echo $json_options;]); if that makes sense, if not, I’m sure you will be able to figure it out ;-)
Anyway, for all the requests for my project could you forward them onto here:
http://plugins.jquery.com/project/issues/jquerylightbox_bal
As it is becoming a little bit of a hassle for me having multiple places to check for requests. Cheers, that being said, this should be my last comment here, so continue the great work.
Benjamin “balupton” Lupton on August 25th, 2008 at 3:02 PM wrote:
Sorry, I had my “send to moderation queue if contains X links” set to 2. I’ve upped it to 5.
Benjamin “balupton” Lupton on August 25th, 2008 at 2:55 PM wrote:
Yeah, I used some of those already and I’ll probably eventually throw together an options page, but it’s just a lot more work so I haven’t. ;) Plus the majority of users won’t need to change any of those probably.
Benjamin “balupton” Lupton on August 25th, 2008 at 2:55 PM wrote:
Will do and you too! :)
Viper007Bond on August 25th, 2008 at 1:36 PM wrote:
Ok, thanks for the quick reply. Guess I will need to continue my search as the group I am with uses large scale models and all of us have large resolutions, and require the large images.
Ideally, we need a Lightbox style script that stays in a fixed position at top of the screen, and reveals the image in its full original size, and allows for scrolling. That is, absolutely no resizing of any kind. It’s too bad as I really thought my search was over :)
Are you aware of any script that offers those capabilities? The no resizing is an absolute requirement.
Robert on August 25th, 2008 at 4:31 PM wrote:
Just open a feature request here asking for the option to toggle large image resizing or not:
http://plugins.jquery.com/project/issues/jquerylightbox_bal
I suppose this will be a dumb question, but, is this plugin supposed to work at all for single images, or only for the gallery images/tags? I would love to only need one plugin for the lightbox effect.
James on September 2nd, 2008 at 4:15 PM wrote:
It only applies itself to galleries. Add this somewhere in your theme and it will make it do it to single images as well:
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("img.size-medium").each(function(index, obj){ jQuery(obj).parent("a").lightbox(); }); jQuery("img.size-thumbnail").each(function(index, obj){ jQuery(obj).parent("a").lightbox(); }); });</script>THANKS! It works like a CHARM!
This is just awesome. I think wordpress should include this as default.
Tons and Tons of Thanks.
Robert on August 25th, 2008 at 12:38 PM wrote:
Ok ! For thowse who use Revolution Themes, or centred web site’s here is the solution at the “left align problem” :
In jquery.lightbox.packed.css find: html,body{margin:0;padding:0;height:100%}
and remove margin:0;
This will do the job. Tested in IE & Firefox.
Good luck.
James on September 2nd, 2008 at 4:15 PM wrote:
You can also use Add Lightbox plugin for that.
Will try it. Thank you for your genorousity. Looks good. Will save a lot of time.