A simple, flexible, responsive, retina-ready jQuery lightbox plugin.
Home Page: http://dev7studios.com/nivo-lightbox
License: MIT License
Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Lightbox development? Get in touch
A simple, flexible, responsive, retina-ready jQuery lightbox plugin. See http://dev7studios.com/nivo-lightbox for more info.
images with query params will be sent to iframe (default) as they fail the regex.
Old: .(jpeg|jpg|gif|png)$
Will not catch foo.jpg?bar=5
Suggested change: .(jpeg|jpg|gif|png)(?.+)?$
This will catch the above url and serve it as an image popup.
I use an inline view. The box has html elements such as drop-down menu by clicking the drop-down. But does not work click on the drop-down menu.
Because Nivo is using iframe internally how would I give the option of a fullscreen button and remove the channel branding from the top left? Normally you'd just put those options on the actual .html page but in this case I obviously can't.
Hey
I have this article under development:
http://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/
I have the following code added to the child theme functions.php file.
/\* Enqueue Nivo - http://dev7studios.com/ - works ok - no semi transparent background color, does not show original image size */
add_action( 'wp_enqueue_scripts', 'enqueue_nivoLightbox' );
function enqueue_nivoLightbox() {
wp_enqueue_style( 'nivoLightbox-css', get_bloginfo( 'stylesheet_directory' ) . '/nivo/nivo-lightbox.css', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'nivoLightbox', get_bloginfo( 'stylesheet_directory' ) . '/nivo/nivo-lightbox.js', array( 'jquery' ), '1.5.13' );
wp_enqueue_script( 'nivoLightbox-init', get_stylesheet_directory_uri() . '/nivo/nivoLightbox-init.js', array( 'nivoLightbox' ), '1.0.0', true );
}
I have a difficult time having a semi transparent overlay that hides the background page and focuses on the open lightbox image.
It would also be nice to show the default image size that does not resize to the view port.
I also have this nivoLightbox.init code:
jQuery(function( $ ){
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").nivoLightbox();
$('a.gallery').nivoLightbox();
});
It would be nice to also add the gallery code as well as knowing more about the various customizations and variations of them. More then what is listed on your web page.
I would like to add an improved way of using Nivo lightbox to the article that I am writing for all those who want the non plugin way of using Nivo in WordPress.
Have a great day!
ps
Perhaps I should have posted this in the WordPress plugin section, but since I am using the JQuery way I am thinking here is the right place to post. Also it would be interesting to adding your slider in a similar way to how I add the lightbox (if possible).
I work with a lot of images that are fetched/added via ajax and just calling the lightbox on page-load for a given class doesn't work with these.
This should be able to work by changing the initialisation code to $(document).on('click', selector, function).
If using bootstrap, a global box-sizing attribute causes a small issue with the close img button, using the default theme.
I fixed this by adding
.nivo-lightbox-theme-default * {
-webkit-box-sizing: initial !important;
-moz-box-sizing: initial !important;
box-sizing: initial !important;
}
to the default.css. I've submitted a pull request for the change.
Is there any one experienced playing youtube video that has "-"(dash) on the video id?
When playing back a vimeo video in Chrome (v35) from Nivo-Lightbox and the fullscreen option is selected, the resulting video's slider and pause button aren't working. Screenshot
As the title says: The minified version of the script is still missing :(
V1.1
Safari 5.1.7 (Windows)
When changing the effect to anything other than 'fade' it no longer works in Safari.
Hi,
I am currently adding RTL support on a site for an arabic client
The slider navigation (previous, close, next) text shows when either of the following are used, or both together:
HTML: <html dir="rtl">
CSS: direction:rtl;
Cheers
When an item is opened in the Lightbox, the screen is filled using this class:
.nivo-lightbox-theme-default.nivo-lightbox-overlay
This works fine in all browsers. If you scroll up and down the page, the overlay covers the entire screen.
The issue lies with YouTube videos and that kind of thing (Vimeo too and some custom stuff I've been throwing at it) and only on Chrome.
Scrolling up and down the page reveals that the overlay doesn't cover the entire screen.
Hopefully the image explains that better.
I haven't had the time to test this on Windows yet, but on Mac it only appears to be an issue on Chrome. Safari and Firefox work as expected.
I can reproduce this in the NivoLightbox demo.
When closing an iFrame lightbox by clicking outside of the lightbox, clicking and right clicking on the web page becomes disabled. I suspect the overlay is not quite being removed properly. Closing an iFrame lightbox with the close button does not cause the issue.
If the video has a symbol such as:
http://www.youtube.com/watch?v=-Myl5siIu3U
(minus sign in the videoID)
It will not load in the lightbox.
Transition effects don't work within an open gallery, only when launching the lightbox.
For example: when I open an image, I will see the SlideRight transition.
But if I then navigate back and forth between images within the gallery, I don't see any transitions?
If a YouTube video's identifier includes a hyphen (many of min do), the identifier is cut off after the hypen
i.e. QWERT-YUIOP becomes QWERT
line 153 of nvio-lightbox.js is:
else if(video = href.match(/(youtube|youtu|vimeo).(com|be)/(watch?v=(\w+)|(\w+))/)){
replacing the regular expressions \w+ with [\w-]+ solves the issue for me.
else if(video = href.match(/(youtube|youtu|vimeo).(com|be)/(watch?v=([\w-]+)|([\w-]+))/)){
I am using Nivo Lightbox on my client's website site. Unfortunately it is not working correctly on mobile browsers, a scrolling problem occurs. On mobile you'll see that while trying to scroll down foreground content, background is being scrolled instead of the lightbox content. It works fine on PCs.
Can you help?
Thanks,
Eva
I thought I'd mention a minor glitch I found in your javascript. I bought a site with your js in it, which lead me here.
nivo-lightbox.min.js
You had:
... if(o[1]=="youtu"){a="http://www.youtube.com/embed ...
this section of code converts the short link into an embed link. While this works, it has a minor issue of ONLY working on http sites, as the protocall is hard coded.
Changing it to:
if(o[1]=="youtu"){a="https://www.youtube.com/embed
allows it to work on both http and https sites, as https content loads correctly over http, however the inverse is not true on all browsers.
There are two instances of the issue in your javascript.
Videos should stop when lightbox is closed. They only stop if another lightbox is opened. This issue can be seen on the plugin demo page.
Something like $.nivoLightbox(url, options), or maybe an option to show on initialise. This would make it easier to control manually.
I'm struggling with Nivo Lightbox on my personal portfolio site. Unfortunately I can't make it act correctly on mobile browsers, some scrolling problems occurs.
Please check on android browser, mobile chrome etc. http://www.krzysztofbalana.pl and try to open random project. On mobile you'll see that while trying to scroll down foreground content, background is being scrolled instead of project description.
Thanks in advance! Christopher
Hi
Youtube videos are not getting open properly in ie9 and possibly in ie11 too .. works well for IE8 and IE10 ...
http://demo.dev7studios.com/nivo-lightbox/
click Other Types - Youtube in ie9/ ie11 .. its not opening properly ...
Noticed in your code across all browsers that there is an inconsistency when u attempt to close the popup image (when u click outside the image area). The problem is in your js script...you forgot to include something like this in the area when it destroys the popup:
if (t.target === this || e(t.target).hasClass("nivo-lightbox-content") || e(t.target).hasClass("nivo-lightbox-image") || e(t.target).hasClass("nivo-lightbox-wrap")) {
a.destructLightbox()
Notice the end part of the if statement has e(t.target).hasClass("nivo-lightbox-wrap")
When i used firebug to inspect i notice randomly all the major browsers seem to get confused and makes the wrap higher in the z order and so clicking cant happen..you have to click further away. When you include e(t.target).hasClass("nivo-lightbox-wrap") it now works consistently.
The lightbox won't open on iOS devices.
It did well the first days and now, without any reason it doesn't work anymore :/
Even on the official website.
I could be wrong, but there doesn't seem to be any provisions for preloading images either side of an open image in the Lightbox when viewing the gallery.
This is causing this lightbox to function quite slow when navigating between images in a gallery.
light box did not work in
....there is any soloution???
There is a slight problem that makes image preview appear with scrollbars on Chrome. It occurs e.g. on Drupal when you choose to have scaled image displayed instead of the original one.
The problem is that url looks like this "blah.jpg?some-stuff".
Simple fix - change this:
href.match(/\.(jpeg|jpg|gif|png)$/
To this:
href.match(/\.(jpeg|jpg|gif|png)($|\?)/
i want to disable nivo lightbox pop up overlay by clicking anywhere outside the image.
i want to close it just by close button.
Hi
I want to use the NivoLightbox with Paul Irish Infinite Scroll. After new content is loaded, the lightbox is not working on the new items.
It look like the lightbox does not know that there are new elements and should be initialized again. On this page (-> http://www.infinite-scroll.com/lightbox-compatibility-code/) I found some code for other lightboxes. What do I have to do for the NivoLightbox to work with the inifinite scroll plugin?
Thanks
Regards
Martin
Today I discovered that Nivo Lightbox didn't open my YouTube videos on iOS7 Safari and Chrome..
I changed line 164 and 168 from:
youtube.com/v/[ID]
To
youtube.com/embed/[ID]
After that it played fine..
The YouTube and Vimeo examples on your demo page are not responsive - the same on my own site in development. Is there a way to fix this please?
Just a quick bug report. It looks like the the lightbox will not trigger if there are parameters on the end of the image file. For example, this image link will open just fine in a lightbox:
http://www.dwellus.com/wp-content/uploads/2014/12/creighton-1.jpg
However, this will not work:
http://i2.wp.com/www.dwellus.com/wp-content/uploads/2014/12/creighton-1.jpg?resize=1200%2C800
I believe the resize parameter is causing the issue since I was able to get an image in a lightbox to open with this url:
'http://i2.wp.com/www.dwellus.com/wp-content/uploads/2014/12/creighton-1.jpg'
Thanks for the great plugin!!
As title indicates when opening a lightbox for the first time even if this does not have a gallery data tag the arrows are shown
WebM displaying error
Hi,
Thanks for the effort and this grate piece of software. I have noticed a problem while viewing my images on mobile, using nivo-lightbox.
Images are stuck on the top of the window, I have tried to find a fix but so far the only solution that works is if I add this property to the class: .nivo-lightbox-image {display: list-item;}
http://edmondvarga.com/demo/catering/galerie.php
What could be wrong?
Thanks!
How to use on angular???? it's working for angular???
Hi just to let you know the following issue and a possible correction:
When loading external images from services like Instagram and using Nivo Lightbox to display some images with urls not ending in .jpg or .png or etc are not loading correctly in the ligthbox. I've modded the regex to allow for those cases:
Example url from instagram API:
https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/12383353_1705428166401484_523509799_n.jpg?ig_cache_key=MTIxODExMjEwNTk0MjMzMjg3Mw%3D%3D.2
in the line:
https://github.com/gilbitron/Nivo-Lightbox/blob/master/nivo-lightbox.js#L164
if (s.match(/\.(jpeg|jpg|gif|png)$/i)
Used instead:
if (s.match(/\.(jpeg|jpg|gif|png)(?=[?#])|(\.)(?:[\w]+)$/i)
Even with this mod there's some corner cases when images that doesn't have extensions will be left out too.
like: https://socialmediasite.com/img/34jefsedf34
Other lightbox plugins uses an option called type to let the plugin know we are going to load images.
Maybe is a good addition:
$(".fancybox").fancybox({
"type": "image"
});
See here:
http://stackoverflow.com/a/6582227/1891792
And here
http://stackoverflow.com/a/13986775/1891792
for related info
Would be cool if there was a built-in option to enable the cursor to be a Magnifying Glass with the Zoom + in it like they have when you hover over an img on Pinterest for example.
I use the Nivio Lightbox on my client's website and when you open it on a monitor (browser) smaller than the lightbox space it throws a second vertical scrolling bar on a browser. Do you have any clue as what's causing it? Here is the screenshot.
My problem occured when trying to "popin" inline content via
nivo-lightbox. My initial content's behaviour was really strange when
being displayed via nivo-lightbox and not without.
Then some investigations showed me that you clone initial content into a
nivo wrapper without removing initial content. Thus if initial content
may be accessed via other parts of code (for example via html ids),
things are getting bad.
Thus replacing this line of code within the inline section:
wrap.append($(href).clone().show());
with these two others
wrap.append($(href).clone(true).show());
$(href).empty();
everything then plays well.
Hi, I've seen that you can force the plugin to autoplay all videos by changing lines 164/168 to add +'?autoplay=1'; at the end of each link (http://stackoverflow.com/a/22048327/107244).
I'd love it if the autoplay parameter in the link itself were simply respected so we didn't have to force all videos to autoplay or not. Possible?
Thanks!
I'm using Google Chrome Version 28.0.1500.95.
On the Demos page I can't click on any links after I've closed a lightbox containing a video.
I can see that the link is still active (cursor turns to hover icon, status bar shows link) but it just won't open anything.
nivo-lightbox.js misses a ; at the end. This causes problems if nivo-lightbox.js is automatically combined with other JavaScript files and some other function definitions come after it. Error message could be TypeError: (intermediate value)(...) is not a function for example.
When a link is clicked and shows an image it uses the
This is fine but if one wanted to apply some different css settings for inline popups but need access to the main parent holder (the one that has the class: nivo-lightbox-wrap) it makes since the css wont know which is popped up.
Right now i added code in your js file that adds "inlined" as another class on the same
http://docs.dev7studios.com/jquery-plugins/nivo-lightbox has been down for a while now.
I notice there is no feature to close the inline lightbox besides the "X" at the top right corner. If someone wanted to have a button in the popup then it is impossible since the "X" uses a class that draws the "X" image, etc. Have an indepenent class that the user can use on their own anchors so when clicked it closes the lightbox.
When referencing a YouTube URL for a movie within Nivo Lightbox, it does not seem to consider the No Related Content Parameter, for example;
http://youtube_url.com/12345abcde?rel=0
It seems that rel=0 is ignored in all cases.
Did anyone else discover this, and is there a resolve?
The videos from YouTube and Vimeo play beautifully but I need to embed a video from on.aol.com
Is it possible?
Here is the video and it shows up off center: http://on.aol.com/video/simple-invoice-presents---disrupt-sf-2014-hackathon-518403996
Line 125 if(href.match(/.(jpeg|jpg|gif|png)$/) != null){... should match with no case like so: if(href.match(/.(jpeg|jpg|gif|png)$/i) != null){...
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
