下载

WP jQuery Lightbox

作者Erick Danzer

描述

A simple, lightweight WordPress lightbox plugin. See demo here.

Features

  • Automattically detect images so they open in a lightbox with no need to adjust markup.
  • Works seamlessly with WordPress core images and galleries, and galleries from many plugins.
  • Play or puase slideshow within lightbox.
  • Enhanced mobile support with swipe gestures on touch devices, improved scaling to maximizes use of screen space, and live adjustment to the browser window and orientation of your phone.
  • Browse images with your keyboard: Arrows, P(revious)/N(ext) and X/C/ESC for close.
  • Admin panel to configure options. sv
  • Localization support.
  • Lightweight and fast.

See the plugin in action here: pandaboxwp.com

Background and Thanks

Special thanks to Ulf Benjaminsson, who created this plugin and maintained it for many years.

This plugin lets you keep Lightbox 2 functionality but sheds the bulk of the Prototype Framework and Scriptaculous Effects Library. Warren Krewenki ported Lightbox to jQuery and this plugin is mostly a wrapper to his work.

Additional Info

Copyright (C) 2010-2023 Ulf Benjaminsson.
Copyright (C) 2023-Present Erick Danzer.

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

屏幕截图

  • Default frontend appearance.

安装

  1. Upload the wp-jquery-lightbox-folder to the /wp-content/plugins/ directory
  2. 通过WordPress的“插件”菜单激活插件。
  3. Check out the jQuery Lightbox-panel in your admin interface for usage details and configuration.

How to Use:

  1. With WordPress built-in gallery: [gallery link="file"]

  2. All galleries in a post make a single slideshow. To create separate slideshows, use group:

    [gallery link="file" ids="1,2,3" group="mon"]

[gallery link="file" ids="4,5,6" group="tue"]

  3. You can manually add a rel="lightbox" attribute to any link:

    <a href="image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    Note the use of title-attribute to set a caption

  4. To manually group sets of related images, follow step 3 but additionally include a group name in the rel attribute:

    <a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

  5. 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>

  6. To disable lightboxing of an image link, just set any other rel-attribute: rel="nobox"

  7. Keyboard support: Arrows, P(revious)/N(ext) and X/C/ESC for close. Swipe left / right on touch devices.

  8. Infinite-Scroll and similar “endless pages”-plugins should call doLightbox(); whenever it loads new content. Check your plugin for a setting
    named “callbacks” – code that is called after each new page is loaded. Add this line;

    if(typeof doLightBox !== 'undefined' && typeof jQuery !== 'undefined'){
       doLightBox();
    }

  9. On the server side you can apply lightbox to any content by running jqlb_apply_lightbox($your_html_content, "any ID"); It returns a string with all image links lightboxed, grouped by "any id".

Trouble shooting:

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.

If you’re running a custom theme:

  1. Make sure you have wp_head(); 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. For the same reason, always have wp_footer(); just before the closing </body> tag of your theme.

  3. Many JavaScript optimizers, combiners, minifiers, etc. conflict with wp_localize_script, used to configure this plugin and many others.

  • If you have problems with jQuery Lightbox; first 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

Lastly:

  1. Disable all other plugins, one at a time. Try the lightbox between each.

  2. Revert to the default theme. Did it help? Fix your theme.

  3. Search the forums for similar symptoms.

Still have problems? Post a link and describe what issue you’re having, and tell us what of these steps you’ve already tried.

常见问题

Trouble shooting:

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.

If you’re running a custom theme:

  1. Make sure you have wp_head(); 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. For the same reason, always have wp_footer(); just before the closing </body> tag of your theme.

  3. Many JavaScript optimizers, combiners, minifiers, etc. conflict with wp_localize_script, used to configure this plugin and many others.

  • If you have problems with jQuery Lightbox; first 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

Lastly:

  1. Disable all other plugins, one at a time. Try the lightbox between each.

  2. Revert to the default theme. Did it help? Fix your theme.

  3. Search the forums for similar symptoms.

Still have problems? Post a link and describe what issue you’re having, and tell us what of these steps you’ve already tried.

Can the lightbox display the image description instead of the title?

WP jQuery Lightbox grabs texts from three different HTML nodes;

  1. title-attribute of link-to-image
  2. img tag’s title attribute (if 1 is empty)
  3. img tag’s alt attribute (if 1 and 2 is empty)
  4. HTML content of .gallery-caption or .wp-caption-text (in that order)

Look at how the default TwentyTwelve theme uses these in its galleries and set up your theme so it outputs what you need in these places.

I can see elements of my site through the overlay

It’s a problem of z-index. Check the z-index property for the problematic elements, and force them to be less than 100. (Thanks dway!)

How do I add images to a post?

Inserting Images into Posts and Pages

How do I create a thumbnail gallery?

Upload images to a post (see previous question) and use WordPress’ built-in gallery shortcode: [gallery link="file"]

Note the link="file" – this is crucial! By default the gallery will link your humbnails to a page displaying your image. With link="file" the thumbnails links
directly to the image files – allowing Lightbox to function.

Must fade-in and animation of all *box-scripts be so slow?

WP-jQuery Lightbox lets you configure the animation duration and disable image resizing from the admin panel. Set duration to 0 to disable animations entirely.

For developers:

  1. Always have wp_footer(); just before the closing </body> tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files.
  2. Apply lightbox to any content by running jqlb_apply_lightbox($your_content, "any ID"); It returns a string with all image links lightboxed, grouped by "any id".
  3. Many JavaScript optimizers, combiners, minifiers, etc. conflict with wp_localize_script, used to configure this plugin and many others.
  • If you have problems with jQuery Lightbox; first 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

Can I help you in any way?

Indeed you can!

Translations and help with implementing them would be nice.

评价

Works well but needed tweaking after an update

2017年5月15日
Works well, however after recent upgrade of this plugin the reference to how it initiated seemed to have changed. Needed to have rel="lightbox[product-gallery]" instead of data-rel= being used, plus not using prettyphoto. Only issue we have is that it loads far too far down the page instead of in the center of the browser window. It may be conflicting with the MailMunch plugin which also uses popup / lightboxes, however each should work independantly and the position of the popup should be in the middle of the browser window either way as users are forced to scroll to find the newly opened popup window on their screen.

Lightweight, simple to use, good support

2016年9月3日
Does what it says on the tin - and on both occasions I thought it was broken, developer responded quickly and helpfully and problem turned out to be elsewhere! Would be nice to see it confirmed as 4.5.x compatible, but it seems to work fine 🙂

Elegant

2016年9月3日
One of the first plugins I install for every WP website I construct

The WP Gallery LightBox plugin for me!

2016年9月3日
I just spent three or 4 hours testing out WP Gallery/*Box plugins. In short, this was the only one I found that worked first time 'out-of-the-box" (on a local, up-to-date [no other plugins] install of Dynamik Website Builder). My entire wish-list for a *Box plugin were supplied - and worked; Responsive, lightweight, prev/next, WP Gallery compatible, easy-to-use & understandable. Also, the supplied coding documentation was easy to understand, simple to implement and just right for my [limited] coding aptitude. Uploaded to a Live Site and, it just worked 1st time!! Thanks Ulf.
阅读所有38条评价

贡献者及开发者

“WP jQuery Lightbox” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

“WP jQuery Lightbox”插件已被翻译至7种本地话语言。 感谢所有译者为本插件所做的贡献。

将“WP jQuery Lightbox”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码，查看SVN仓库，或通过RSS订阅开发日志。

更新日志

1.4.9.1 (2023-11-05)

  • Add webp support
  • Remove donation links

1.4.9 (2023-11-03)

  • Updated readme author and description
  • Fixed image centering on small screens
  • Removed white space from end of lines
  • Updated default settings for resize_on_demand and margin_size
  • Capitalized slideshow links

1.4.8.4 (2023-10-24)

  • Removed screenshots and banner image from repository

1.4.8.3 (2021-01-26)

  • Added setting to control whether jQuery is loaded in the header or footer.

1.4.8.2 (2021-01-26)

1.4.8.1 (2019-03-24)

  • Tested for WordPress 5.x and PHP 7.0

1.4.8 (2015-12-31)

  • Fixed translations not being loaded properly
  • Fixed support for WordPress 4.4

1.4.7 (2015-09-21)

  • Support for WordPress’ new translation system.
  • Updated translation for Portugese (Thanks: Pedro Mendonça)
  • Added images and CSS for Portugese (Thanks: Pedro Mendonça)

1.4.6 (2015-03-20)

  • “Download link” now correctly open a download dialogue instead of displaying the file
  • Title, caption and all control elements can now be turned on / off individually
  • Added support for custom style sheets (just copy original to your theme’s style folder, and hack away)
  • Restructured the HTML slightly, making styling easier
  • Added specific CSS selectors for all elements
  • Fixed animation speed setting being ignored
  • Dropped quirks support for Internet Explorer 8
  • Removed help-text setting

1.4.5 (2013-06-09)

  • Fit to screen edge on low rez displays (<500px)
  • Added global setting to hide title & caption
  • Reduced the amount of code running for each image shown
  • Updated German translation (thanks Niko23)
  • Fix: swipe direction
  • Fix: slideshow now waits for images to display before starting timer.
  • Fix: support for latest jQuery
  • Fix: WordPress encoding wrong quote mark in captions, causing duplicate texts to display.

1.4.1 (2013-02-03)

  • Added swipe gestures on touch devices
  • Added slideshow
  • Added support for multiple sets in one post (use: group with the gallery-shortcode)
  • Added support for arbitrary Download links via the data-download-attribute
  • Added support to pick text from the image ALT-attribute (if title is not available)
  • Added translations: Norwegian Bokmål (thanks Ole Martin Kristiansen!)
  • Fix regexp to deal with urls like www.gif.org. (Thanks Yannick Berker!)
  • Fix changed common IDs to avoid collisions. (you’ll have to update your CSS now!) (Hat tip; Pollmann Frederic)
  • Fix better support of Infinite Scroll and similar
  • Fix toggling visible state on unrelated object, embed and select nodes. mwolfe02
  • Fix leaky CSS on admin page

1.3.4.2 (2011-02-01)

  • Fallbacks for people using older jQuery

1.3.4.1 (2011-01-31)

  • Updated deprecated jQuery calls (thanks; David Naber)

1.3.4 (2011-12-29)

1.3.3 (2011-06-12)

1.3.2 (2011-05-16)

1.3.1 (2011-05-02)

  • Forgot to include languages files! 🙂

1.3 (2011-05-01)

  • Improved scaling to make maximum use of display area.
  • Supports orientation / resize changes – Lightbox reflows with site.
  • Added translation support (Thanks; Martin S & Denis N. Voituk).
  • Added option to display download link.
  • Added support for disabling all animations (set duration to 0).
  • Fixed “duration” not having an effect.
  • For Developers: public method to apply Lightbox to any string.

1.2.2 (2011-04-14)

  • Use WordPress bundled jQuery instead of forcing the Google CDN
  • Fixed the settings link on the Plugins page

1.2.1 (2010-10-24)

1.2 (2010-10-12)

  • Added support for Media Library titles and captions.
  • Minified the javascript (8.6KB vs 17.8KB)
  • Minified the CSS (2.0KB vs 2.7KB)

1.1 (2010-10-09)

1.0 (2010-04-11)

  • Release.

额外信息

评级

查看所有评价
登录以提交评价。

支持

最近两个月解决的问题：

总计 1，已解决 1

查看支持论坛