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”

  1. Hi, great plugin but i’ve lil problem.

    I use the same theme as viper’s and i whant to use your plugin. but i can’t change the default jquery lightbox which is included in the theme.
    I’ve 3 options in the theme manager, enable/disable Jquery, enable/disable lighbox theme (i desactivate it) and a third.

    How can i do.
    thx
    ad

  2. Pingback: 11???JQuery?Wordpress?? | Fatkun's Blog

  4. hi. its is possible to use the colorbox with this native with singel images in as post… i have only one image in a post, with left align. i can open it with this plugin/ if yes, what i must do? thanks

  5. Hi,
    I have been using this great plugin for a while. After the latest update I have noticed that it doesn’t display ‘Next’ and ‘Previous’ buttons any more. Every image has to be opened individually which is a pain. I have tried every theme and the problem is always there.
    Any thoughts?
    I am using WordPress 2.8.6 at the moment.

  8. Hi,

    Since I have upgraded to Mystique 1.5.3 and WP 2.9, I get the same error as Comment#197.

    I tried all of the 5 themes and always get the same (no-working) result.

    Any help is greatly appreciated.

  9. +1 problem plugin;

    After the latest update I have noticed that it doesn’t display ‘Next’ and ‘Previous’ buttons any more. Every image has to be opened individually which is a pain. I have tried every theme and the problem is always there.
    Any thoughts?
    I am using WordPress 2.8.6 at the moment.

  11. Pingback: 11 Useful jQuery Powered WordPress Plugins by Henry Jones « LifeLikePixel's Blog

  12. Ok, here is latest update.

    I have updated to Mystique 1.62 and tried again. Still not working (aka not getting the navigation arrows and such).

    I have tried the classic theme and the plugin works flawlessly…

    I see you have WP 3.0a… do you think I should upgrade or maybe you tweaked the code of Mysitque??

  13. Woohoo!, Found the solution… hope it works for everyone.

    In the Advanced tab of the Mystique settings menu, there are 3 checkboxes. The first one needs to be turned on, the 2nd turned off and the 3rd box, I left empty.

    Now skins and features for the plugin works superbly fine!

  14. Like Josh, I too would like this plugin to work with single images. It’s great for the native gallery but annoying that it seems I have to install another (visually different) lightbox solution to handle single inline images on a page.

    • The discussion above about rel=”lightbox” was about the Lightbox script requiring that to work rather than being able to be applied using Javascript like ColorBox can.

      Getting it to work on single images is easy. Just add something like to your <head>:

      <script type="text/javascript">
	jQuery(document).ready(function($){
		$("a[rel='lightbox']").colorbox({maxWidth:"95%", maxHeight:"95%"});
	});
</script>

      • Doesn’t work for me either: added rel=’lightbox’ via WP image insert > Advanced Settings. Also tried manually adding “colorbox” to CSS class of a picture and that doesn’t work – I assume that means the class “colorbox” isn’t getting picked up by anything.

        I noticed on the galleries that work they have a class called “cboxElement”. I tried this on a single image and it breaks the script on the page altogether.

  15. Hello

    The gallery creates thumbnails 150px X 150px in my webpage, how can I change the size of the thumbnails that the gallery creates?

    Thank’s

  16. I have figured out what I did wrong… I placed the additional code before the wp_head() call and then it doesn’t work.

    Add:

    <script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){ jQuery("img.size-medium").each(function(index, obj){ jQuery(obj).parent("a").colorbox(); }); jQuery("img.size-thumbnail").each(function(index, obj){ jQuery(obj).parent("a").colorbox(); }); });
// ]]>
</script>

    after the line which contains the wp_head() call:

    wp_head();

    Within the K2 theme you can simply add this into header.php after .

    @Viper007Bond, thanks a million for this wicked and easy to implement plugin!

    • @Viper007Bond: This is a great plugin! Thank you.

      @Steven: The script you provided worked well for my single images. I appreciate you providing it. Any thoughts on how to set the theme for the single objects? I’m using Theme1 for the gallery plugin, which has diagonal lines/watermarks. The script above is using a simpler gray background without as much fancy formatting. Thanks.

      • A bit further background on the theme question I asked about yesterday: The theming does apply to images and galleries linked from my “home” page (the list of blog excerpts/teases), but not on specific post pages.

        For example, this post contains an image that, after I added the custom-single-image code (below), opens in a lightbox. When opened from that single-post page, it opens un-themed, so to speak; when opened from my home page (second post at the moment), it opens themed.


        //

        I wonder if the code needs to be massaged at all to account for this? I do realize that this is an unsupported feature — and, really, not even a feature — of your plugin, but nevertheless a nice way to create uniformity on all image clicks. Thanks.

  17. Is there a way to include the necessary javascript code onto a specific page?

    I’m having a major conflict with some other featured content rotators on a different page, and can’t figure out what the conflict is.

    If I could include this plugin on a specific page, that’d solve my problem.

    Any suggestions?

    • Yeah, just remove it:

      global $jQueryLightboxForNativeGalleries;

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

      Put that in your theme’s functions.php or whatever.

  18. I am still having the same issue as comment #197, unlike Guilliame, I am not using “Mystique” but building a custom theme.

    Does anyone have suggestions for the “Previous” and “Next” buttons to come back? It worked momentarily when I first installed the plugin.

  19. Doesn’t seem to work. I tried:

    global $jQueryLightboxForNativeGalleries;

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

    And

    global $jQueryLightboxForNativeGalleries;

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

    and

    global $jQueryLightboxForNativeGalleries;

if ( !is_page_template('about.php') ) {
	wp_deregister_script( 'colorbox' );
	remove_action( 'wp_head', array(&$jQueryLightboxForNativeGalleries, 'wp_head') );
}

    In all three cases the javascript was output into that page, no matter what. Any other suggestions?

    • Sorry, you’ll need to wrap that all in a function and hook that function into init, otherwise you’re removing it before my plugin has added it (which won’t keep it removed).

      • Hi Viper,
        I’ve used your plugin several times and it’s very good.

        But now I have the issue of removing the script from the Home page ’cause it’s in conflict with a slideshow.
        I know I have to wrap everything into a function and hook it up with init but I’m not a programmer or either a developer and even if I tried, the scripts still loading on the home page causing the slider fail.

        Can you help me writing the entire right code here?
        Thank you very much.

        Cheers.

        • Can you help me writing the entire right code here?

          No, but here’s something to get you started:

          add_action( 'init', 'some_function_name' );

function some_function_name() {
	// Do stuff here
}

  20. Can someone explain to me how to use this plugin other than installing it?
    Installation was smooth, its just there is no documentation as far as what to do with it?

    Where or how do I upload pics? How do I insert them into page…etc

  21. Pingback: Los mejores plugins de jQuery para WordPress (I): jQuery Lightbox | Recursos para Diseñadores Gráficos y Web | Creativos Online

  22. Hi , i have a problem with the lightbox , in ie7 every time i click on a link on my site ( not only from the gallery ) i get redirected to the jquery lightbix site .

    Does anyone know what this problem is or any way to fix it ?

    Thanks.

  23. Hi

    I’ve installed this and have added the rel=”lightbox” to my photos, and have added the javscript snippet I found in the comments at the end of my statement, and it’s working pretty well. Only one small change I would like to make if possible.

    Whichever picture I display, uploaded via wp-admin or not, when the lightbox appears, all the photos tagged using rel=”lightbox” appear in the gallery, when I really only want the current one to be.

    I’ve worked through these comments, and can’t see an obvious answer (although according to my wife I probably did BOY looking), but wondered if you can tell me if this is possible or not? If it isn’t then thats OK, because it always shows the current picture.

    Thanks for the plug-in and the work keeping it up to date.

  24. Just a little more feedback, as I am slowly working things out. The gallery it shows me, is a gallery of entried on the current page it seems, so perhaps this is WordPress functionality rather than plug-in functionality because if I view a single post with a single picture, there is no gallery counter at the bottom of the screen. If I view a category, then the gallery is the photos on that category page.

  25. Excellent plugin. It works and it’s really easy to install.

    When I open the gallery and click on the image, it goes to the next one. What do I have o do to be able to link each image with a different url?

    Thanks

    • I think that will beat the purpose of the plugin. You could just insert images in a post the traditional way then go to the theme script and change stuff. I suggest you use firebug (a firefox addon) to discover which bits of the script to customise for this to work. I don’t expect this to satisfactorily answer your questions!

  26. Hmmm here’s another good one. Is it possible to have the image description show up underneath the image in the pop up? It is text that is likely going to be longer than the title etc.

    This has been something that has annoyed me with all the lightbox solutions as the title or alt attribute gets misused to be a short caption/description.

  27. VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVery

    Thank You!
    Thank You!
    Thank You!

  28. Well, my plugin still isn’t working. The old version worked great and ever since I have updated there is no ‘next’ or ‘previous’ links. In fact the whole bar below the picture seems to be absent. Is it not supposed to work? Can some one please tell if they have a similar problem or what could be causing it. It worked before the upgrade 🙁

    • It works great for me. Why don’t you completely get rid of it and then reinstall the new one as if you were installing it for the first time? This is my first use and it seems to do wonders for me http://www.jf32.com/?page_id=49
      But I am looking at the possibility of having different galleries for different pages/posts.

  29. Pingback: 10 Image and Gallery Lightbox Solutions for Wordpress – Plugins | Script Online Collection - Free nulled script - Clone sites

  30. Great plugin, though I’m having the same problem mentioned above (“next-previous” buttons not showing at all). Using 2.9.1.

  31. Hi There,

    trying to utilize your plugin. Does it conflict with the Featured Content Gallery? As well I am fairly new at all this and is there further instructions on how to implement the plugin? You state just add [gallery] to the post. Where do I load the pictures etc.?

    Thanks in advance

    Dan

  33. Hi Viper!

    I love your plugin, its the best lightbox I find and use it in some projects.
    But now I want to use your plugin in simple images too (besides inly in gallerys)…
    I try the code you post before:

    “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(); }); });”

    but doesn’t work…
    can you help?

    thanks

  37. Hi, i love your plugin thanks for developing it it’s pretty awsome, i’m trying to use it on my site and it works fine but i have a flash element on my sidebar and when i click on an image of a gallery and the image pops up (with the plugin) it appears under the flash element.

    any idea how i can solve this?

    Thanks again,

    Mario

  39. Hi there, thanks for this plugin it’s easy to install and just works (well, not entirely in my case).

    I have an issue with IE6-8 on my site causing a temporary freeze after loading the page. The problem is that the colorbox.css contains some IE alphaloader declarations with fixed paths which are relative to the html and not the css file. As the plugin is (in my case) located at a different path this made the filters do some requests to non existing files (which were being rewritten to a default html page).

    My workaround for now is to just remove these filter declarations which seems to cause no damage.

    best regards,

    Bob

  41. Pingback: 35 Stylish and Modern Wordpress Plugins using jQuery UI | AlexVerse

  42. Pingback: Blog Updates und Plugins | zServ

  44. I love the plugin but I cannot get it to work with Nextgen Gallery. In its options I used rel=”lightbox[%GALLERY_NAME%]” for another lightbox plug in, but I cannot figure out how to get this one working with NextGen. Any ideas?

    Cheers

    • One of the great things about ColorBox (at least from a developer’s view) is that it doesn’t make lightboxes out of things on it’s own. You have to specifically tell it what you want it to make it lightboxes out of. For example, my plugin tells it to select all linked images within a .gallery object, i.e. the output of the [gallery] shortcode. No silly rel tag is involved.

      If you wish you use ColorBox on other objects, you’ll need to select them and then apply ColorBox to them. Here’s some docs you’ll find useful:

      http://docs.jquery.com/Selectors
      http://colorpowered.com/colorbox/

  47. I used 3.1.2 and it worked great, but then I updated to 3.1.3 and now when using IE8 and Firefox 3.5.8 the images appear under flash items including embedded youtube videos. It works ok in Firefox 3.6 though. Any suggestions? Can I get the previous version from someplace?
    Thanks!

      • I’m using theme #3. I tried #1 but the problem is the same, plus the frame of the image is behind of the flash even in firefox 3.6. But this was the case with the previous version also. But #3 was working ok.

        • The only thing I can think of that could cause that would be a change to the ColorBox script when I updated it.

          Regardless, I’m surprised it was able to work before at all if it isn’t working now. The Flash video needs to have wmode=”opaque” in order for things to be able to go on top of it.

            • I fixed it. It looks like there is some problem with the HTML editor of wordpress causing the “opaque” property to be ignored. Anyway it works ok now.

  48. Very nice, thanks for the plugin. Can you expand this to replace the caption shortcode as well? Then all images would have the same look & feel.

    • I’m not sure if that’s possible, infact I don’t think it is since the link to the fullsize is contained in the source of your post rather than inserted on display (my plugin uses a filter to change that link from the image’s page to the fullsize image in the gallery tag).

  49. Pingback: 11 Useful jQuery Powered WordPress Plugins | WebsGeek

  50. Just installed it and it works just great ! Thank u.

    Can u pls tell me how to use the lightbox with flv videos that are on my own server ?

    I saw an example here where the lightbox shows a video.

    Thank you once again…. appreciate the plugin. It’s very easy to use.

Comments are closed.