jQuery Lightbox For Native Galleries

DISCONTINUATION NOTICE:

Development on this plugin has been retired and discontinued in favor of Jetpack and it’s Carousel module, the same one that runs on WordPress.com.

In my opinion it’s a much better lightbox functionality and provides a better feature set than my plugin.

Description:

jQuery Lightbox For Native Galleries makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images.

Download:

824 thoughts on “jQuery Lightbox For Native Galleries”

  3. I just installed your plug-in lighbox.

    1st of all…. let me say…nice one : really easy-to-use

    Gallery works fine but on post area I see some code..I think javascript code

    can You help me?

    http://www.rofl.it

    search for “Illusioni Ottiche” or “Comics Gallery”

    thx

  4. Pingback: Pixel Happy Child Theme – StudioPress Premium Photoblog Wordpress Theme | WordPress Theme Store

  5. That’s exactly what I did ( thx to the Codex )

    I write this:

    <?php 

add_action('init', 'rimuovi');

function rimuovi(){
	
global $jQueryLightboxForNativeGalleries;

if ( !is_page('Home') ) {
	wp_deregister_script( 'colorbox' );
	remove_action( 'wp_head', array(&$jQueryLightboxForNativeGalleries, 'wp_head') );
	
	}
}

?>

    put in the functions.php…

    …and it still throw the scripts up in the head.
    That’s why I’ve been asking to you, because I can’t find any other way out.
    Where is my problem? Am I doing or writing something wrong?
    Should I add something more?

    Thank you fo’ reading.
    Best regards.
    Marco

  6. We’ve been running the plugin for about 9 months on our WPMU-powered site and it was running great, until now. It seems that a recent update (of the plugin? to WPMU 2.9?) broke the functionality. When we click on a gallery image now, the colorbox UI comes up but we get the loading spinner and no prev/next controls. The image never loads and the close button is not active.

    You can see it here: http://wbjtoday.com/blog/cwh-tops-tower/4659/

    Has this happened to anyone else? Have we done something wrong?

    The site is running on WPMU 2.9 and using the theme “The Journal” from WooThemes.

    Thank you.

    • Looking at Firefox’s error window, your easing.js jQuery plugin is throwing a ton of error messages. It’s likely causing ColorBox to break too (it’s a jQuery plugin).

  7. Thanks for pointing me in the direction of Colorbox, I have a WP plugin which uses a different jquery-powered lightbox and it would not play nicely with any other lightbox on the same page, whatever I tried. Colorbox is the only one to have done the trick, this has solved a huge problem for me. Sorry I actually don’t need the gallery plugin (yet) but still wanted to say thanks!

  8. Starting to hate this plugin since requests hs been ignored…
    I tried all to make it work with one image and nothing, I combined with Colorbox and Slimbox, just on this cases you can see SINGLE IMAGES popping out on the screen, but not theming, not complications at all but it doesn’t feel right using a 2 items for 1 problem… anyone had been lucky?

  9. I’m sure there’s something really simple I’m not doing right, but I’m trying to use Colorbox with NextGEN Gallery & can’t get it to work. My images are all in galleries rather than pages or posts, so are loaded through the NextGEN Gallery plugin. The only place I can find where I can add any code for Colorbox is under NextGEN Options | Effects. There I have a “Link Code line” box & I’ve added the following:
    class=”thickbox” rel=”%GALLERY_NAME%”
    But it’s not working. All I get is the standard thickbox style, not any of the Colorbox styles.

    Am I missing something? Should I be adding code somewhere else?
    Any help is much appreciated. Thanks.

    • It took some trial-n-error but this is how I go t it to work with NextGEN. I took a look at ColorBoxes’s website samples and tweaked their sample code. Paste the following into your template underneath :

      jQuery(document).ready(function($){
      $(“a[rel=’colorbox’]”).colorbox();
      });
      :

      Then in NextGEN Options-Effects, you should choose Custom and replace the box contents with this:

      rel=”colorbox”

      Note that the Javascript and rel should be the same – in this case, they are both ‘colorbox’.

  10. Thanks for getting back to me. I’m still a little confused though. What code should I be adding & where to get the Colorbox styles to work?

  11. Well, it just sits there and does nothing. I’ve spent about an hour trying to configure it. I’d feel a lot better if there was some sort of documentation on how to set it up to compare what I’ve done. Oh, so I install it, then activate it? Thanks a lot.

    • What do you want me to do? Make up extra steps? Make it harder to install? There’s nothing to do other than install it (Plugins -> Add New) and activate it.

      If it’s not working for you, switch to the default theme and disable all other plugins. The issue is likely one of three things:

      1) You managed to install it incorrectly
      2) Your theme is missing one of the required theme hooks (in this case wp_head() in the header)
      3) Another plugin is causing a conflict and breaking my plugin

    • The plugin automatically makes the image no bigger than 95% the size of your browser window. It should fit entirely in your window.

      If it’s not, perhaps your theme’s CSS is breaking it or something.

  13. Pingback: [??]11????jQuery WordPress?? | I am Solari

  14. Pingback: » 10 ???????? lightbox ???????? ??? wordpress ReadyWeb.RU

  17. I have installed your plugin and I choose a photo from the gallery. When returning to the original page everything in the content container is shifted left. It clears once I refresh the page.

    I have seen this error in IE8

  18. Forgot the code tags in my prior post…

    It took some trial-n-error but this is how I go t it to work with NextGEN. I took a look at ColorBoxes’s website samples and tweaked their sample code. Paste the following into your template underneath wp_head():

    jQuery(document).ready(function($){
    $("a[rel='colorbox']").colorbox();
    });

    Then in NextGEN Options-Effects, you should choose Custom and replace the box contents with this:

    rel=”colorbox”

    Note that the Javascript and rel should be the same – in this case, they are both ‘colorbox’.

    • Bill,

      Thanks for your input on how to make this plugin work with Nextgen. I’m very new to WordPress, so please have patience with me!

      I followed your instructions in editing the jquery-lightbox-for-native-galleries.php file, but I’m getting an error code when attempting to use Nextgen immediately afterward. What am I failing to do correctly?

      If you have a moment, hoping you could walk me through this . . . I’d be very appreciative. Thanks much!

  19. Hm. WordPress has a bug where it won’t respect [gallery columns=5], so it outputs only 3 and 3 images (irritating to say the least!). And also, I’ve got a «top» image, that is single and I need to add into the whole.

    So how can I modify this so that it takes *all* the pictures in one go? Right now if you click on the first 3 pictures, the 2 rest won’t get shown. 🙁

    You can see it here if I didn’t make myself clear: http://fjoloy.s0.no/

    • Sorry, I tried another plugin that said it had that functionality already (jquery colorbox).

      But your plugin fixed the irritating bug in WordPress that links to attachmentpage although my gallery says this: [gallery link="file" columns="5"]

      How did you fix that? Strange this bug, I would think WP devels knew it, but then probably a conflicting plugin that does it. But it’s not easy to find, I don’t have anything other related to galleries.

      • Sorry for the spam, you can very well merge it. I just bit the bullet, and instead of living with all of the bugs in wordpress gallery I did it the old, manual way. 🙂

  20. If someone want to move JavaScript code to footer then in file jquery-lightbox-for-native-galleries\jquery-lightbox-for-native-galleries.php line 26:

    add_action( ‘wp_head’, array(&$this, ‘wp_head’) );

    change to:

    add_action( ‘wp_footer’, array(&$this, ‘wp_head’) );

  22. Pingback: Top WordPress Lightbox plugins « finalsense

  23. Hi Alex,
    thanks for your work first.
    Second, I have a question:
    Is it possible to “tell” the plugin to load only if it finds a gallery in a post?
    If yes, how should I edit your code?

    Thanks.

    Bye,

    Eddy

    • Looking forward at the posts that are going to display is not reliable. However I just realized I can move the Javascript (but not the CSS) to the footer and then I can easily opt to not load it if there’s been no galleries.

  24. Viper. Awesome Plugin. It is EXACTLY what I was looking for! no frills and Automagic! 🙂 One thing I would like to do is move the caption text to the top of the wrapper in “Theme #4” My captions are apparently too long and collide with the other text at the bottom. I took a look at the CSS and I’m not real sure what I should do. Thanks in Advance!

  25. If I have jquery gallery of 10 large images, do i need to have a 10 corresponding thumbs on the page, in order for the gallery to work? Or can there be 1 thumb and 10 images in the gallery-view?

    Ryan

  26. If I have jquery gallery of 10 large images, do i need to have a 10 corresponding thumbs on the page, in order for the gallery to 10 images? Or can there be 1 thumb and 10 images in the gallery-view?

    Ryan

  28. I wrote earlier about an issue that I understand better now. I integrated this plugin into my site, and really appreciate its functionality and simplicity. Few plugins work so seamlessly and effortlessly, without being unnecessarily clunky. Thank you for offering and supporting it.

    The small issue I’m having relates to themes — I’m using Theme 1. Galleries on excerpts on my home page show up themed when clicked. However, if you open the full post, the same galleries there appear unthemed. Is this a known issue? Is there an easy fix?

    Thanks again!

    • The styling is being applied, but you have another plugin that is loading it’s own styling. In this case it’s WP AJAX Edit Comments. It also uses Colorbox and bundles it’s own theme.

      I was aware of the issue, but still am not sure what to do about it.

  30. v3.2.0 of my plugin has basic single image lightbox support. You’ll need to manually give the link a class of “lightbox” like so:

    <a href="..." class="lightbox"><img src="...

  31. hi 007. bundle of thanks for this plug-in, it revealed my tension. i would like to get suggestion from you. in fact am trying to make Gallery with 3 sub menu of album
    Gallery
    Album1
    Album2
    Album3

    how can i do that with your plug-in. shall be thankful to you for your help.

  32. Hi.

    I have a problem with jQuery Lightbox For Native Galleries plugin for wordpress.
    I have added to a page this gallery to a index page with this code:

    [gallery]

    [/gallery]

    …but when I try put this code in the other page, the gallery don’t appears. This script only support one gallery?

    Thanks in advanced.

    Best Regards,
    Pedro Pereira

  33. Alex,
    Many thanks for the work and dedication to making this plugin and continuing to diligently correspond on the forum board.

    Completely new to the world of WordPress, but slowly (TOO slowly) coming along.

    I initially decided (right or wrong) to use Nextgen as my site’s photo manager – it was said to offer the “simplest” UI for newbies like myself.

    I’ve spent weeks trying to find an add-on that improves upon Nextgen’s capabilities: more attractive slideshow and image overlay. I really like your plugin here, and I’ve attempted the code tweaks mentioned in the two or so comments re: how to get your plugin and Nextgen to play nice. But, no avail so far. I tried posting for some more insight last week or so, but no response.

    Can you lend a hand? I’d rather not have to settle for NG’s standard “shutter” or “thickbox” effects, but I’m VERY green to all things code-related as well, and I’ve already uploaded, tagged, captioned, etc a couple thousand photos to NG.

    (For what it’s worth, I’m using latest versions available for WP, NG and Thesis 1.7.)

    Thanks in advance to any and all Good samaritans willing to help me out!

  36. Pingback: Como aplicar efecto lightbox a las galerias de wordpress | Paraiso Linux

    • I’ve exactly the same problem as adfy. Somehow every row becomes it’s own gallery, but they all have the same class, ‘gallery-image attachment-thumbnail’…

      You can spot the problem at adfy’s gallery.

      Anyone ideas?

  39. I’ve installed the ColorBox lightbox script in the hope of automating a gallery slideshow at the URL above, but the slideshow currently only operates on a manual click-through basis.

    What I’m wanting to achieve is an automated slideshow like that demoed on your site, and I’m hoping you might be able to help me out with a simple step-by-step guide to the process required to get it up and running…

    Many thanks!

  40. Pingback: Flow » Blog Archive » Daily Digest for May 19th - The zeitgeist daily

  41. Hi,
    thanks for your great job!

    I’ve installed your jquery lightbox in theme but seems does not work correctly…it seems that don’t recognize the [gallery] shortcode in wordpress…

    could you please help me?

    Thanks

  42. Pingback: Perfect for photographers — Family Tree Child Theme Demo

  43. Pingback: Scrapbookers love us too! — Family Tree Child Theme Demo

  44. None of the theme options seem to be exactly the same as the one here on your page, and I like yours best for the site I am working on. How can I get this theme?

  45. Your plugin worked wonders for my page. I was unable to make a single visible image link to multiple images in a gallery but so far, I am satisfied with how the effect looks in my blog.. thank you! 🙂

      • yea I tried the codes I found in google but none of them worked.. it appears that it only works for Lightbox 2.0 for now and not the Lightbox for Native Galleries

        • It has nothing to do with the lightbox. WordPress’ built in [gallery] shortcode outputs multiple images. This is what you need to fiddle with. I was suggesting hiding all of the images but the first one using CSS.

  46. Thanks for the plugin. I’ve looked a bajillion options today and I keep coming back to yours—clean, simple, attractive, easy. Perfect. Almost…

    For my needs, I really need to use the Caption field in from the WordPress Media Library instead of the Title field for the captions on the images. Two reasons: 1) so i can more tightly manage SEO with all those fields, and 2) so I can better organize and manage my Media Library and can scan faster when I’m looking for images–my captions are going to be more descriptive and narrative and less title-y.

    I’ve spent the better part of the day pulling my hair out trying to find a plugin that does it and is also as great and simple as yours, and works. I can’t find one. So, Viper, I’m begging you–would you tell me how I can swap the Title out for the Caption field (which might be a tad long and wrap on two lines)? I’m brave enough to be dangerous–I can make my way around code and get to the right place, kinda figure out what’s going on, but break things without direction. My point is that even if you can provide a roadmap, I might be able to hack my way through.

    Please save my sanity and my weekend and help…I’d be super grateful. Thanks.

    • The lightbox uses the image’s title element (in the HTML) as the caption in the lightbox. This HTML is generated entirely by WordPress. You’d need to use the post_gallery or wp_get_attachment_link filter. Look at gallery_shortcode() in /wp-includes/media.php or wp_get_attachment_link() in /wp-includes/post-template.php.

  47. Has anyone come up with a fool-proof way (for this admitted fool!) to use this with the latest version of NextGen?
    Thanks!

  48. The code works great! When using the single image class, I am wondering if there is a way to display the caption or title when the image is enlarged. I have looked through the comments and have not found a solution/comment listed about this subject.

    Thank you.

  49. Pingback: 35 Stylish And Modern Wordpress Plugins Using jQuery UI | DX Articles

  50. Pingback: 10 Of The Best JQuery Plugins For Wordpress | Triphp Webmaster Blog

Comments are closed.