How to Use:

  1. You can use WordPress image galleries and have them grouped and auto-lightboxed: [gallery link="file"]
  2. [gallery]'s are automatically grouped by post ID. You can split them into separate slideshows, using the group-attribute: 
    	[gallery link="file" ids="1,2,3" group="mon"]
	[gallery link="file" ids="4,5,6" group="tue"]
  3. You can also add a rel="lightbox" attribute to any link tag to activate the lightbox. For example: 
    	<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    Optional: Use the title attribute if you want to show a caption.
  4. If you have a set of related images that you would like to group, simply include a group name in the rel attribute. For example: 
    	<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
	<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
	<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
  5. To disable lightboxing of an image link, just set any other rel-attribute: rel="nobox"
  6. You can use the data-download-attribute to set a custom download link: <a href="image-medium.jpg" rel="lightbox" data-download="image-superlarge.jpg"> [...] </a>
  7. Infinite-Scroll and similar "endless pages"-plugin, should call doLightbox(); whenever it loads new content. Most plugins have a setting for code that is called after each new page is loaded - just give it this: if(typeof doLightBox !== 'undefined' && typeof jQuery !== 'undefined'){ doLightBox(); }

Troubleshooting

If you have problems with WP jQuery Lightbox, please make sure you try these steps before asking for help. If you ask for help and I find any of these steps would fix the problem, I will just link you back here to do the work yourself.

  1. Make sure your site is not throwing any javascript errors. Use your browsers javascript console to find out.
  2. If you're running a custom theme:
    1. Always have wp_header(); just before the closing </head> tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files
    2. Always have wp_footer();, just before the closing </body>, for the same reason
    3. Many JavaScript optimizers, combiners, minifiers, etc. conflict with wp_localize_script(), used to configure this plugin and many others.
      • If you experience problems with jQuery Lightbox, please disable all JavaScript-optimizing plugins. (Optimize Scripts, W3 Total Cache, WP Minify etc)
      • If you develop JavaScript optimizers for WordPress, please play nice with the default API...
      • More info about this issue
  3. Disable all other plugins, one at a time. Try the lightbox between each.
  4. Revert to the default theme. Did it help? Fix your theme.
  5. Search the forums before posting.

Credits