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”

  2. Hi,

    This plugin is exactly what I have been looking for. Thought I was home free, but have been getting folks telling me they are having issues. It looks like it is a problem with IE 8. I have not been able to personally duplicate the problem–and have had no problem with Safari or Firefox, but apparently the folks who are having trouble attempt to open a picture and then it compresses to a white line. I see that one other person has posted a similar issue from a week or so ago. Any thoughts?

  3. Hey Alex. Any ideas on how I might be able to tie in these images from this post? http://j.mp/olRh3T

    That is, I have a total of 8-images. 2 of them I displayed fully on the post, and the rest I let the [gallery] take care of (I excluded the IDs of the 2 I have displayed). However, I am only able to manually input 

    class="lightbox" rel="lightbox-edshoots"

    on the first 2. The gallery’s I won’t have to worry about since we have 

    $(obj).find("a").colorbox({rel:galleryid, maxWidth:"95%", maxHeight:"95%"});

    I guess is there a way to tie-in or have the images that I have manually added “.lightbox” to (first 2 in this case) to have the same “rel:galleryid” as well?

    • So Colorbox doesn’t automatically apply itself to any images. You can to select some links and then tell Colorbox to make them lightboxes.

      By default my plugin makes each [[gallery]] a group by selecting all of the links and then making them into a group using the rel Colorbox attribute and combining it with a randomly created group ID.

      So the thing you need to do is to get all of the images you want in the same group to have the same rel value. This will require doing this:

      remove_action( 'wp_head', array( &jQueryLightboxForNativeGalleries, 'wp_head' ) );

      Which stops the stock Javascript being being outputted and then implementing your own jQuery selecting and Colorbox’ing.

      That help?

  4. Follow up to my earlier comment, I was doing some checking and found a post on the StudioPress forums where a user was also indicating that folks were having issues with IE8. A moderator suggested posting the code below into the style.css file. It seemed to fix the users problem. I have not tried this, but put it here in case it makes any sense. If it is a red herring or is completely off-base, please accept my apologies. This was the suggestion that I found:

    Try adding the following to style.css:

    img#cboxPhoto {
    max-width: none;
    }

  6. can this wordpress plugin allow for multiple galleries on one page. for instance, i’m working on my sister’s website. she wants one set of photos for something, and another set of photos for something else. these different sets of galleries will live on one page.

    any tips for me or insight? thanks!!!

    easyfunnimo

  8. <h2>Image Gallery</h2>
            <?php echo do_shortcode('[gallery]'); ?>

    Alright so that is the code I’m using to try and display my image gallery however it is loading the image in a new page but on the same tab. I’ve also tried inserting a gallery into a post with the same result. Any ideas how to fix this?

  9. I have updated wordpress to 3.2.1 and when I tried to access the gallery but all I’m getting now is a spinning circle. I have disabled and enabled all my plugins one by one and it still doesn’t work. Any idea how to fix this?

  10. Hi,
    I put [gallery] in the editor and saved page. Nothing shows though. I’m missing something… What should I do to have the gallery show? Sorry, WordPress and plug-ins are new to me.

    😉 Thanks!
    e

  11. @Viper007Bond brilliant stuff by the way.

    Hi I have been working on a work around and this is looking promising:
    Well in fairness it is not my coding but from
    http://www.island94.org/2011/01/adding-class-to-wordpress-linked-images/
    so to include a link but I thought I should credit who done this.

    I just need to figure out how to automatically replace an image when it is loaded with [gallery columns="1"] and it would be fully automatic.

    So people in you function.php add the following:

    <?php
/** * Attach a class to linked images' parent anchors
* e.g. a img => a.img img */ 
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
$classes = 'lightbox'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<a.*? class=".*?">/', $html) ) { 
$html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
} else { $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
} return $html; 
} 
add_filter('image_send_to_editor','give_linked_images_class',10,8);
;?>
<?php
/** * Attach a rel to linked images' parent anchors*/ 
function give_linked_images_rel($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
$rels = 'galleryid'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<a.*? rel=".*?">/', $html) ) { 
$html = preg_replace('/(<a.*? rel=".*?)(".*?>)/', '$1 ' . $rels . '$2', $html);
} else { $html = preg_replace('/(<a.*?)>/', '$1 rel="' . $rels . '" >', $html);
} return $html; 
} 
add_filter('image_send_to_editor','give_linked_images_rel',10,8);
;?>

    hope this helps

  12. Sorry forgot to mention this above code is for loading a single image and you need to load a single image like normal above it (in html mode) type in

    [gallery columns="1"]

    and it works all beautifully on latest WP

  14. Viper, love this plugin!

    2 Questions:

    How could I implement printing from the iframe? I want to give the option to print only the image within the lightbox. I know it will take javascript, but how would I go about implementing it.

    Is there a way to add an image ‘header’ above the image loaded? Something that would be loaded above every image (but within the lightbox). Such as a ‘Print This’ image?

  15. I am using this plugin to display a set of images in my WordPress site. The images have varying aspect ratios, so the thumbnails also vary. I would like to force all thumbnails in the gallery to have the same height, resizing width as necessary to accomplish that. With the same height, I can have a good-looking “film strip” on the page. With the same height, different thumbnails would have different widths because of their different aspect ratios. That’s fine.

    Is there a way to accomplish this?

    • I have tried setting the thumbnail dimensions in media settings to 150×100 instead of 150×150 and thumbnails now have a more uniform height. But they are not spaced evenly across the page. There are wide gaps between some thumbnails and lesser gaps between others (see my web site for example).

      I had noticed uneven spacing even when thumbnails were of varying heights with the default 150×150 settings. But they are much more uneven now that I am using 150×100.

      Is there a way to get even spacing in the gallery?

  16. Hi Alex,

    I experience this error:” “MX1.jpg” has failed to upload due to an error
    The uploaded file could not be moved to /home/antesg/domains/ante.sg/public_html/wp-content/uploads.

    This error came about after the image have been “crunched” could you advice what may have caused the error.

    It was working fine in the old server, we have relocated the site to a new server and when i try to add any new image it would prompt this error. By the way is there a specific php version etc before this plugin can work? Thanks.

  18. Hi there!

    I’m loving the lightbox plugin, thanks for your work on this!

    I have it implemented in my site, however for some reason it does not group all images in the same gallery into the image display pop up window. Right now I have three columns of pictures, and clicking on one brings up the lightbox display, but only displays the three pictures in each row.

    Is there some setting I can adjust so that it will display all the pictures in the gallery? I’ve tried looking around in the settings and I’m having trouble finding anything that might help.

    Thanks again!

  19. Hey Viper

    Is there any way to do any preloading of images with this? Like, start loading the next image in the slideshow when viewing any given image or something? Switching between images is pretty slow if I want to use a fairly large image size otherwise.
    Thanks!

  20. Hi, I’m using this plugin and want to thanks for your work! Congratulations!

    I’m having a problem: One of my WP sites show the picture out of screen… the pic dont appear in middle of screen as usual…. you need to roll down to see…. and each image you change, it happen again… and go down 🙁

    The site/example post:
    http://blogs.98fmcuritiba.com.br/andre/2011/08/12/imagens-alto-astral-para-comecar-bem-fim-de-semana/

    Anyone can help me?

  21. I have downloaded your plugin and it works fine, but my problem is that the menu disappers when I activite you plugin.

    Please let know, if there is a fix or where to look for the problem. The menu is a dropdown or dragout menu….

  22. is there a way to get rid of the image title completely without going through each image and deleting it?

    chrs

    M

  24. Could you please gave us the option to use medium size pictures? I use the original size for large images, so can be printed.

    Thansk!

  25. Sleak plugin ALEX! 🙂
    For me, being a CSS’er, it’s GREAT to be able to handle JS through a class!

    LOVE IT ?

    Thanks

  27. Hi, For some reason I’m not able to get this plugin to work on my site. it seems that nothing is happening once I installed the plugin… as if my site is not recognizing it. Do I have to do anything like else besides your instructions on the plugin page?

  29. Great plugin. Works fine but have one major problem. The lightbox is displayed behind youtube embedded video’s?! I checked the CSS and saw a z-index of 99999. I also noticed the css file was listed as not active and the video is not faded. I have no clue as how to solve this issue. Any help is appreciated.

  30. Hi,

    I am very fascinated by the functions of your plugin! However, my primitive theme seems to makes the images jump down for each press to “next”. What am I missing In my theme?

    See this in action here: http://www.lunatik.se/produkter (if you don’t see the big image when pressing a thumbnail, look further down 🙂 (That’s my problem)

  31. Great site and awesome plugin. I am curious if the plugin will work on a WordPress theme that is 3.2? In the plugin section on W, it states that it is not compatible with the current version of WP. Thx for the feedback.

  32. if i edit jquery.colorbox-min.js can i turn on the slideshow?
    what code i’d have to change??
    thanks for the plugin

  33. Pingback: 35 Stylish And Modern WordPress Plugins Using jQuery UI « Downgraf – Design weblog for designers

  34. Pingback: ????????? ????? ????????, ????????? ???????? ? Wordpress | ??????? ????????. ???????????? ????????? ??????.

  36. I am using your brilliant plug-in for a project, but can you tell me how I hide the filename of the photos? It show in the upper left corner, when the lightbox opens.

    Thanks!

    Michael
    Denmark

  37. I have a little problem I would like to get rid of. For example I have created a gallery of 4 images. Next I would like to add an induvidual image at another part of the page. What happens is that this image is added right there where I want it but in addition it is shown in the gallery as well as 5th image. In other words it is shown twice.

  38. Hi!
    Great plugin – I’m a bit comfused though, I would like the Lightbox to open on all images, that means also single inserted images in thumbnail size.

    I’m aware of the “class=lightbox” snippet, but I’m not sure how to use it – I have more than 100 posts, so it would be so nice if this could be taken care of in the post-template.. Oh how to that? 🙂

    Bw. and thanks a lot for a great plugin!!

    • Since the script this plugin uses, ColorBox, is jQuery based, you can make it apply to all images from within your theme. I think something like this will work:

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

      That (should) find all links to JPEG and PNG images and turn them into lightboxes.

  39. The text isn’t wrapping in the name area of the image. Sometimes the title goes over the number. Can you please fix that?

    Glen

  40. Pingback: Top Wordpress jQuery Plugins-Nihad Nagi

    • I did. The text here is short and you can’t see the same problem. Type something longer than “Autumn Leaves” and you will see what happens. Make something really long just as an example and you will know what I mean.

      Can you please fix this so the the writing doesn’t go over the number or give us options to do something with the numbers?

      Glen

  41. This plugin is simple, straightforward, and fantastic. Its working superbly with the site I’m developing. However, I was wondering if there is a way it can be turned off for specific posts or pages?

  42. Hi, I finally found a gallery plugin I like with this! however all my gallery images are displaying in one vertical column, justified left… I keep changing the column number but to no avail. Any idea what I might have done wrong?

  44. Very nice plugin. Is there a CSS class or something I can use to apply to individual images so that a linked larger version of those can also be made to be shown by the plug-in?

    At the moment, the gallery photos are shown by the color box, but the main image which links to a larger version shows in a different page.

    I know I can install a separate lighbox plug-in for that, but I’d rather have your plug-in do both if it has the capabilities.

    Please let me know.

    Thanks

    • I added a class of “.lightbox” to the single image on the post and it worked. That was after trying “.colorbox” as a class. That did not work.

      I tried the script you show the guy above and in fact it breaks everything. After applying that script to the head, neither the single image, or gallery images work. I even tried replacing the “colorbox” to “lightbox” in that script. I wonder if there is some kind of syntax problem in that script. But I’m not a programmer, so I would know.

      I got it to work, but I’m going to have to apply the class manually to every image. Unless you know how to globally add the lightbox class to every image link on the site.

      -Danny

      • If it breaks everything then it sounds like there’s a Javascript syntax error. Make sure you’re adding it after wp_head() is called. Directly before the head is closed would be best, or even in your footer.php.

  45. Hi Alex – great plugin! I am helping my niece build a site to show her portfolio for grad school admissions! This helps quite a bit!

    One question – it was asked earlier… Is it possible to remove the file name so that it does not show up. You answered that you can change it in the Title attribute of the image in the gallery. However, the Title is required, so something needs to be there. Using just a space does not work 🙁

    Any thoughts?
    Thanks for all you do!

    Be Well.
    Paul.

  46. Hello. I was testing the Thematic 320 and Up theme for WP. Seems it uses box-sizing: contnet-box.

    I had to add the following to function wp_head() in the main JS file to make the content display correctly: http://pastebin.com/CHFSh6VA

    Don’t know if it was just on my copy, but in case some else runs into this, hope that helps. The only thing that is still bugging me is that the colorbox isn’t centered, and display to the right of the center-width. Please do let me know if you see this as well. Thanks in advance.

  47. This is working well on my site. I have 16 images in the gallery, but for some reason the counter on the bottom starts at 3. So when you click on the first image it says “image 3 of 18” at the bottom instead of “1 of 16”. Any ideas? Thanks for a great plugin.

  49. That’s a great plugin, it works really well and without trouble :)! Only in ie 8 i have the same problems as others, that the images don’t display and i get a white line instead. After testing other lightbox plugins i decided to stick with your plugin after all.
    So my question is: how can i force the plugin to degrade nicely in ie8? Like this site does: when i click on a image from the demo it opens in another page. So how can i configure it to work like this? Thanks!

  50. Hello, I’m new wordpress plugin installed but not loaded, there is some incompatibilade the link where the images are hosted through the theme?

Comments are closed.