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. Greetings,

    I am wanting to utilize this plugin as it is highly recommended. I’ve been researching light-boxes for months – for use on a WordPress blog.

    I installed the plugin and note that any image that I post with the image link enabled, pops up on a lightbox.

    However, each image pops open to a different size, (the actual size of the image) and thus everything is not uniform.

    Please advise or direct me to where I can learn more about this exciting plugin.
    Much thanks!
    D’vorah

  2. Pingback: Wordpress Plugins | Arrow Root Media

  3. Hi, I just love your plugin and I thank you so much for giving it for free.
    I am puzzled, however, because I have a strange issue.
    I am aware it is due to the fact I am newbie.
    Here it is: the [gallery] shortcode is showing me both the formatted thumbs and, down all the bigger images, on same page. What am I doing wrong?
    Thanks,
    K

  4. sorry for wasting your time!
    I’ve just discovered that I didn’t write the closing tag [/gallery]
    Thank you again for your plugin.
    K

  6. First I like the plugin. And second I like the WP theme being used on this website. (especially the CSS being used in the comments area. Very good Viper.)

    My question is about the website visitor and how the website visitor views a website and the photos when using a plugin such as this.

    A loyal visitor of my website commented about when he click the “Back” button in the browser when viewing the pop-out gallery it took him to the previous page that he had viewed. His intention of hitting the “Back” button was just to get of the gallery pop-out.

    My question is only about how the end user (which is sometimes a novice to this type of viewing) may view the gallery for the first time. If they hit the “Back” button in the browser could that just close the gallery pop-out and not take them back to the previous page.

    I ask only for healthy debate on end user-ability and how users utilize a website and what they expect when viewing photos in this manner.

    Thank you.

  7. Hi there
    Is there anyone having problems with the plugin on Chrome?
    Me! 🙂
    Please see the multimedia page under Chrome, some images don’t open the lightbox.
    Thanks anyway

  8. Thank you for your great work. This is the most beautiful plugin I have ever seen. You sir, are awesome 🙂

  9. Hi,
    I love this lightweight plugin and have used it in a several projects. With the update to WP3.0, however, it doesn’t seem to work in IE7 anymore. It seems like it doesn’t get loaded at all as I can’t find it when viewing the source code. In Firefox, Safari, and Opera everything’s normal. What can I do to fix this?
    For a (not) working example, please have a look at “http://constantin-rueger.com/photos”

  11. Thanks for a great plugin, is there anyway i can create a manual link to a specfic image in a gallery and open that image within the lightbox?

  12. Pingback: WordPress plugins I use and how one made my blog faster | Geekality

  13. Great plugin and helped me get around using flash based gallery.

    I have a problem that I haven’t been able to resolve yet. I am running WP 3.0 with the Thesis theme.

    Page in question:
    http://reddragonaudio.com/gallery/

    I setup a native gallery in WP and then inserted [code][gallery][/code] as instructed. The gallery shows up and colorbox/lightbox works fine.

    However try clicking on any hyperlink up in the navigation bar or the wordpress admin at the bottom. It brings up the page inside the lightbox as if it were a picture.

    Thanks!

  14. Hi Alex,

    I’ve implemented your Colorbox solution and it works great for all our galleries, however, i’d like to know if it’s possible to support IFrames as in the real version of Colorbox, can I give the link a custom class at all?

    Best Regards
    Tom

    • Not with my existing Javascript, no. It only applies Colorbox to links within a .gallery. and links with the class lightbox. Try editing my plugin and replacing a.lightbox with just lightbox.

  15. this is a great plugin! great themes! thanks for sharing this plugin. i wished i’ve known this plugin before I became fancy with my media files.

    this is my observation: i have noticed that it overrides all the attachment page URL with the attachment file URL; that when using ‘get_attachment_link(att->ID)’ rather than returning the URI of the attachment page, it returns the URI of the attachment file. i hope it doesn’t do that!

    also, i was hoping you can teach me how to add a few features to this plugin:

    1. to enable the use of the media caption and/or media description in the pop-up frame, rather than the title.

    2. to add a function in the pop-up frame that would link to the file’s attachment page; so viewers can comment on the media(image) through the attachment page.

    if you can help me on this, it’ll be great! otherwise, … still great plugin.

    • It has to change the link to the URL to the fullsize image as that’s how the lightbox works. However I should work harder to make it only apply to the [gallery] output and not other things.

    • Whoops, hit submit too soon. Anyway:

      1. The title attribute of the image being used is also a part of this (and most other) lightboxes. It’d be hard to change. Just copy/paste your caption into the title field and you’ll be good.

      2. I don’t think that’s easily possible. Sorry. 🙁

  16. Hey, I’ve been playing around with the plug in for hours now trying to do something… and I’m out of ideas. I’ve hope this hasn’t been answered before, I’ve searched through the comments but there are just too many.
    I want to make the lightbox gallery appear when a text link is clicked. I don’t want the thumbnails to show before opening the lightbox… But rather that a link that says “Gallery” would open the lightbox in the same window. I know it’s possible to link to a single image, but is it possible to do with the whole gallery? Maybe through java/css code?

  17. Pingback: 35 Stylish And Modern Wordpress Plugins Using jQuery UI | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Html tem

  18. Pingback: 35 Stylish And Modern Wordpress Plugins Using jQuery UI » The Nowhere News

  19. Pingback: 10 Image and Gallery Lightbox Solutions for WordPress – Plugins » The Nowhere News

  20. How do i turn on the slideshow?

    I had it working on the site but now i’ve upgraded the plugin and can’t see how to turn the slideshow on!!

  21. Hi Alex – great plugin, simple and easy to use for novices like myself!

    I am trying to create a gallery for artwork and need to have more detailed description than the title when the image pops up in the lightbox. Ideally at the bottom of the image this would look like either:

    multiline:
    “Title”
    16″x20″
    Oil on Canvas

    singleline:
    “Title” 16″x20″ Oil on Canvas

    I have found php code that allows me to use tags in the title to create a multiline display but the problem with both solutions is that depending on the size of the image the text bleeds into the image or overlaps onto the lightbox controls.

    I don’t know if this is rightly a jquery lightbox question or not but if even a pointer in the right direction would be appreciated.

    Thanks

  22. Great plug in. Is there a way to open say a Google Map link in the lightbox? I’ve tried adding the class=”lightbox” in various places in the link but can’t get it to work. Let me know if there’s a way.

    Thanks for the great work on this.

  24. Pingback: ????Lightbox??ColorBox???????? « PERUTORO -?????????????????-

  25. Pingback: 8 excellents plugins jQuery « Armel Pingault

  26. Congratulations for this great-looking plugin. However… is it possible to use it for a single image or this works only with galleries?

    Thanks in advance,
    Giorgio

  28. Pingback: Scrapbookers love us too! — Family Tree

  30. Tried the slimmed down version , did not help any. However your other suggestion of title attrib on the link worked beautifully. Its a fantastic plugin , not too high end but does the job amazingly well. Thanks for it.

    I had another query – is it possible to put HTML on the caption – in any manner at all?

  31. Pingback: Photo Galeri dengan Wordpress

  32. I’ve an awsome problem. when i click on the category link, it shows me:
    http://www.foto-eberle.de/category/akt/

    Welcome to my gallery

    #gallery-1 { margin: auto; } #gallery-1 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-1 img { border: 2px solid #cfcfcf; } #gallery-1 .gallery-caption { margin-left: 0; }

    if i click directly on the article, then everythings ok!
    http://www.foto-eberle.de/akt/akt/

    someone know this problem?

    thx and regards from germany
    michael

  36. Hi,
    Just wondering if you could include in the options a couple of fields to set the initial height and initial width of the lightbox? I’ve found it in the jquery.colorbox-min.js file but it would be easier if it could be set in the options. Also, thanks for the plugin, it is great!

  37. Pingback: Io & jquery? Amore a prima vista! - InforMania

  39. I’d like to link to the gallery via a hard-coded link (basically making the WordPress archives pages open the gallery from a single image), but can’t work out how the lightbox is called.

    Normally it’s something like rel=”something” in the image link, but I’m not seeing that when I view the source. How is the gallery lightbox called?

  40. I’m actually trying to link to the multi-image gallery itself. The images will exist on the page, but hidden in a div – I just need to call the gallery, if possible.

    • Oh, I see. I’m pretty sure that’s possible, but not with my plugin out of the box. You’d need some custom Javascript to select the images and trigger it.

      You’re not the first person to request this, so I’ll add it to my (really long) todo list. Don’t expect it soon from me though. 🙁

  41. Pingback: Bethany Farren II | Jack Way Web Design

  42. Hey, thanks for the great plugin. I myself am using colorbox on my main site (custom written with Ruby). My WP is on a subdomain. Instead of having the user to download the colorbox-min.js again, I wonder if I could put in an exact external URL which links to another directory of my side for the same colorbox-min.js.

    wp_enqueue_script( ‘colorbox’, plugins_url( ‘http://www.yoursite.com/jquery.colorbox-min.js’, __FILE__ ), array( ‘jquery’ ), ‘1.3.8’ );

    Thanks.

    • Add the following code to your theme’s functions.php file or to a new plugin:

      [php]add_action( ‘init’, ‘victor_colorbox_relocate’, 10 );

      function victor_colorbox_relocate() {
      if ( is_admin() )
      return;

      wp_deregister_script( ‘colorbox’ );
      wp_enqueue_script( ‘colorbox’, ‘http://www.yoursite.com/jquery.colorbox-min.js’, array( ‘jquery’ ), ‘1.3.8’ );
      }[/php]

  43. I love the plugin, but when I show excerpts I get html code in the excerpts about the gallery thumbnails. How can I get this to not show. Thanks

  44. I have written a jQuery script, that does two things and works with this plugin.

    1. Automatically add “lightbox” class to every “a” (linked to png, jpg or jpeg) element that contain “img” as child element and it does not interfear with native galleries or other hyperlinks.
    2. Disable lightbox by removing class “lightbox” and “cboxElement” if a mobile device is detected such as iPhone.

    [js]
    var userAgent = navigator.userAgent;
    var expression = new RegExp("(webOS|SymbianOS|Nokia|Android|iPhone|iPod|iPad)", "");
    var match = userAgent.match(expression);
    if(match == null) {
    jQuery(‘a:has(img)’).each(function() {
    var href = jQuery(this).attr(‘href’);
    var expression = new RegExp(".(png|jpg|jpeg)$", "i");
    var extMatch = href.match(expression);
    if(extMatch != null) {
    jQuery(this).addClass(‘lightbox’);
    }
    });
    } else {
    jQuery(document).ready(function(){
    jQuery(‘a:has(img)’).each(function() {
    jQuery(this).removeClass(‘cboxElement lightbox’);
    });
    });
    }
    [/js]

  46. Is it possible to change from Theme #1 to one of the other 4?

    Excellent plug-in! Thank you so much for sharing, this is exactly what I needed for a project I’m currently finishing up!

  47. So. I installed and activated the your plugin. Added images to a page and checked the HTML page to make sure that [gallery] was what was there.

    Problem: a gallery of images IS displayed, but as near as I can tell, it’s using the default gallery, not yours. Suggestions?

    Thanks!

  48. “Never mind!” I’m using the Mystique and there is a setting to disable the theme’s lightbox. When I did that, the pop ups looked like I was expecting (Colorbox).

  49. Hi there

    I tried to include the plugin on my site but it seems that there are no css/scripts added to the page header so i added them manually. The images and the gallery displays correctly but when I click an image it opens a window with the .jpg (no lightbox) – any idea?

    cheers, dan

Comments are closed.