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. The gallery works fine on a post or page but why do I see the following in any excerpt:

    #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; }

    Any ideas. Thank you

  2. Hi, I install your tool in my blog and I have some problems.

    If i use the Internet explorer, work’s good !
    But if I use other browser like Opera, when i click in the image, the window of the picture close.

    Do you know what I can do to fix this ?
    Thanks and congrats for your work.

  3. Hey all,

    Need some help, colorbox mysteriously stopped working on my site and now it’s just linking to the JPG. Example page with the tiny thumbnails at http://www.wornmagazine.com/2010/06/activation-portraits-polaroids/.

    When I view the source, as far as I can tell all the necessary scripts are in there. So I have no idea what’s broken. If anyone feels like tackling I’d really appreciate it. Also tried deactivating, deinstalling, reinstalling, reactivating, but that didn’t work either.

    Josh

  4. Pingback: ForumKervan - Native Galleries

  6. For me, the “gallery” functionality has stopped working entirely. Even if I remove your plugin and switch my theme back to TwentyTen, clicking on a gallery image simply opens a browser page that points to the image file in my uploads folder.

    I’ve been installing an playing with all manner of plugins and themes so I suppose there might be a conflict somewhere. (?)

    • OK, a bit of disabling various plugins and… it seems that the plugin “Q and A” breaks the plugin jQuery Lightbox For Native Galleries.

      Now then… I’ve been changing things so fast I no longer remember what “normal” is. What is the NORMAL behavior when clicking on an image that’s part of a [gallery] ?

      • Without any attributes set in the shortcode, the default functionality is to take you to a page on your blog where a larger thumbnail is shown. My plugin overrides that behavior and makes the little thumbnails link to the fullsize images. This is required for the lightbox functionality to work.

  7. Our Lightbox have also stopped working. When clicked the screen turns black (background) but no picture is shown. This happened only a few days ago. When I test the pictures here on your site I see the same. I’ve tried in both Chrome and IE9beta.

  8. awesome plugin, but doesnt work anymore, fullsize images dont load anymore, even in your own demo? seems like an issue with an external hosted library, but google api is online…

    whats the deal?

  9. Hi, I have a question, how to insert a link in the bottom of the lightbox (where the title and image number appears) to the original file? or a link to another page? can you help me please?!

    Thanks a lot, the plugin it’s awesome!
    Dani

  10. The plugin doesn’t work anymore, same as #416 and #417
    It was wokring so great, if you can find a way to fix this. Thank you Alex.

  12. Is there a tutorial on how to use this? I am so confused on how to even begin the gallery. I have looked and looked on how to load the images so they appear as the thumbnail then when you click on them they would pop up but I just cannot figure it out.

    Thanks
    Angie

  13. Thank you for your answer. I finally figured it out last night after playing around with it. I kept thinking it cannot be this difficult and it is not.

    I do have another question for you. Is there anyway to have a caption on the pop up image? I do not want it on the thumbnail but on the larger image. I am using it on a site and they would like to have the image linked to another website.

    Thanks

  16. Alex –

    The Demo on this page is launching the lightbox bezel and controls, along with image captions, but no image under MAC OSX 10.5.8, Safari 4.0.5. Working fine in same OS with Firefox 3.0.19.

    Hesitant to upgrade. Any suggestions?

    Pete

      • I’m not going to roll back the changes. The plugin works perfectly fine in WordPress 3.0.1. Colorbox is just not compatible with jQuery v1.4.4 which is currently included in WordPress 3.1 (unreleased at this time).

        In short, it’s working fine in the latest stable release of WordPress. 🙂

  17. i’m using this plugin, it’s very nice, but when i embed videos from youtube, that video show in the gallery with the images.. How do i fix that?

    Thanks

  18. Pingback: WordPress Plugin Releases for 11/8 « Weblog Tools Collection

  19. hi, thanks your pluging .but sir, i m don’t know about web design. so can you explaing how to add all funtion in wordpress. can you help me.

    thanks

    asanka

  20. Hey Alex,
    Love the plug-in by the way. I was wondering if there is a way to imbed comments into the photos. I know i can use the title and for the most part this works fine for smaller titles, but i’ve been trying to find a solution to add longer comments to my photos.
    Forgive me if this has already been addressed somewhere, but i figure i give it a shot and just ask. I am a newbie to WordPress and have only been playing around with it for a couple weeks now, but so far it’s been great!

    Thanks,
    Greg

  21. Pingback: Scrapbookers love us too!

  27. Alex, thanks for the great plugin! One question: now the title of the pic is being shown on the lightbox. Is it possible to change title to description, i.e. it displays description field of pics uploaded?

    Thanks!

  28. Hey Alex. Been a while since I’ve looked at the updates but seems to be just getting better and better. I was wondering if you’ll incorporate some type of grouping?

    Before, I think it was Balupton ed., we were able to do something like
    [code]rel="lightbox-group1"
    rel="ligthbox-group2"[/code]

    I know with the current edition, we can do with
    [code]class="lightbox"[/code]

    Would be nice to have the functionality to group w/ the rel-tag, like…
    [code]class="lightbox" rel="lightbox-group1"
    or
    class="lightbox" rel="gallery-2462"[/code]

    Where the latter example uses the actual “gallery-id#” for the grouping vs. a random number. I guess a visual example would be good as well, you can check out this post… http://j.mp/dZ0E3i

    • Using the rel tag is an old antiquated method. Since this lightbox is jQuery-powered, you can just use selectors of any type. class works better than rel because it’s a purely presentational element.

      The class="lightbox" lightboxing is done using this code:

      [javascript light=”true”]$("a.lightbox").colorbox({maxWidth:"95%", maxHeight:"95%"});[/javascript]

      So you could easily make your own class and group them that way, or whatever. You could even stick the <script> tag in your post so you can do custom groups.

      If you wanted to really use rel though, it’d be:

      [javascript light=”true”]$(‘a[rel="lightbox-group1"]’).colorbox({maxWidth:"95%", maxHeight:"95%"});[/javascript]

  29. Just an update. Seems this is working…
    [code]class="lightbox" rel="lightbox-group1"[/code]

    But this would be nice if it did…
    [code]class="lightbox" rel="gallery-2462"[/code]

    Where the latter is a single-image which was excluded from the gallery-thumbnail display, but should be included when the colorbox/lightbox has been activated for slideshow.

  33. Pingback: WordPress için jQuery Galeri Eklentileri

  34. is there a way to include the ‘lightbox’ class automatically to for single images as you explain that could be done in the read me file? I could get it to add a class to the tag but bot to the tag.

    Regards and thanks in advance.

    • Add this to your footer.php:

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

      That’ll find all links that link to JPEG images and turn them into lightboxes.

  35. Pingback: Wordpress – Imprescindibles | MasterBip.cl

  37. Pingback: 35 Stylish And Modern WordPress Plugins Using jQuery UI « DownGraf – Your Graphic World

  38. Hello I need to show other things such as images arround colorbox,
    I need to place a banner for my client, he wants it below the image preview, so, below colorbox.. Any ideas of how can I perform this?

  39. Hi Viper,

    I’m using your JQ Lightbox and I need to slightly modify it for a friend. They’d like to access a Gallery from a secondary page other than the page the gallery is located on. How would I accomplish this?

    Well done on the plugin, it’s very simple to use!:)

      • Thanks for that answer. I guess I need to explain the situation a little better.

        I have a page with 4 images (one for each type of photo gallery, i.e. pets, weddings). I want it so when the gallery is clicked on, that image gallery pops up. This way all the gallery image thumbnails are not on that page.

        Does that make sense?

        Thanks,
        Cathi

        • Better explanation:

          Currently I have 4 images that link to 4 gallery pages. In each gallery page there is a native gallery.

          The person I’m making a site for wants me to put all 4 galleries on the same page without thumbnails. But still wants the native gallery feature to be available so it’s easy for them to update their galleries.

          Each of the images on the gallery page needs to directly link to their respective lightbox galleries without using or displaying thumbnails and not loading a new page.

          The shortcode resource you game me was a big help in dislpaying each of the galleries on one page ( [gallery id="123"] [gallery id="234] etc….) Now I need to do it without relying on the first thumbnail of each gallery, and also without displaying the individual thumbnails. So a link from a static JPEG directly to the lightbox gallery pop up is what I’m trying to accomplish.

          What I can’t figure out is what coding the I need to pull from the first thumbnail of each gallery and place in the link of each of the gallery images that pop-up their individual lightoboxes. When I pull of the source coding of the page it just shows the rendered links the thumbnails use nothing more.

          Thanks again for the help! This one is a tough problem for me!:)

  40. Hi Alex, great plugin !!

    Is it possible to customize the thumbnails frame, maybe with a rounder one, like one of these for example:

    [IMG]http://img593.imageshack.us/img593/6279/immagine2ji.jpg[/IMG]

    Regards

  42. I use a plug-in that I just discovered is preventing this plug-in from functioning. ISSUE: When I click on a thumbnail instead of the jQuery screen appearing the link takes me to the full size image.

    The plug-in I am using relates to the navbar and dropdown menus. It prevents any top level navbar button that has dropdowns from linking to a page when clicked (forcing the user to choose from the drop down menu). My question is: Is there anyway to get both plug-ins to work together?

    Here is the code from my custom.functions.php file:
    [code]
    function remove_clickable_menu_tabs(){
    ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script&gt;
    <script type="text/javascript">
    jQuery(function($) { // DOM ready
    $(‘ul.menu ul’).each(function(){ // Find every sub-menu
    $(this).prev(‘a’).attr(‘href’, ‘#’); // Set the link preceding it to #
    });
    });
    </script>

    <?php

    }
    [/code]

  48. Hi,

    thanks for the great plugin.

    After installing the plugin, I noticed that the attachment pages’ prev/next thumbnails no longer linked to attachment pages (url/?attachment_id=xx), but to the image files instead (../wp-content/uploads/…). I am not using attachment pages, but google seems to find them, so I wanted to fix this. And here is the fix:

    in jquery-lightbox-for-native-galleries/jquery-lightbox-for-native-galleries.php, find:
    [code]
    // The lightbox doesn’t function inside feeds obviously, so don’t modify anything
    if ( is_feed() || is_admin() )

    return $link;

    [/code]
    change it to:
    [code]
    // The lightbox doesn’t function inside feeds obviously, so don’t modify anything
    // MS-potilas: not in attachment pages (thumbnail links) either
    if ( is_feed() || is_admin() || is_attachment() )

    return $link;

    [/code]

  49. Pingback: Die Standard-Bildergalerie von WordPress nutzen | Elmastudio

Comments are closed.