Looking for a responsive 'mobile friendly' jquery lightbox

Levi

Levi

Ultimate Member
So I'm looking for a lightbox/modal box that I can use on my site....

It needs to support images and html (aka ajax) for a text popup and for any video's I'm likely to add. Video's need to be on html due to being responsive html5 video with fallback to flash (which is a pita)

I thought I'd found one in royal slider but it's got an annoying little 'bug' in that it moves content when it loads (it removes the scroll bar...)
Tried colorbox but it's not mobile friendly or responsive... the images don't rescale if you size the screen.
All the 'original' lightboxes only support images
Looked at vanillabox and again it isn't responsive so the images don't change when you resize the screen.

So do you know of any others I haven't come across that might fulfil my needs :)

I'm just going straight up html/jquery, I'm not using anything like bootstrap/foundation.
 
yeah thats the sort of thing, I'd seen that too but I begrudge paying for something (commercial license) that's readily available for free... I just need to find it :)
 
Sean... they don't do the ajax bit...

If it comes to it I will split them up and just use a modal box on the ajax/iframe one but I'd like matching ones if possible as they're coming from the same page :)
 
What do you mean they don't support ajax? Ajax simply allows you to load new content without having to reload the entire page.

Nivo Lightbox:

"So no matter if you are trying to show images, image galleries, AJAX, Flash, Youtube or Vimeo videos, another website or just inline HTML, Nivo Lightbox has you covered."
 
that's closer but that's missing the responsive bit, it doesn't rescale the image when you resize (or rotate the phone) the image :(

This is what I hate about responsive design... you can get it to work properly until you need to view it on a phone lol
 
Nivo only requires a commercial license for their WordPress plugin: http://i.imgur.com/4zqz85k.png <-- Click that. Yes, quite a shoddy piece of design there, the page doesn't make it very obvious at all.

You didn't expand any further on the points I raised, can I assume that this solves the problem? :)
 
looks like it should do, will play around with it later.... I had looked at nivo but saw the commercial 'buy button' and was like meh... a few others 'free' ones were sneaky and hid the commercial license requirement so just assumed this was the same... but yes it is poor design or you could argue good design, it makes people buy it when it's not needed lol
 
Sean Nivo seems to be doing the job for images, ajax loading html is broken (still looking into why... likely me, I never read the docs properly lol) but it does work.

Had/Having to do a few tweaks to the css to suit my site but that's easy enough.

Thanks for all the help everyone :)

Now onto my jobs for tonight.... finish configuration of slideshow (should be easy I say confidently lol) then it's fixing nivo....
Yes Sean you read that right I am gradually working my way down the list of things to do on my site lol
 
Good luck with it all mate, let me know if you need any more help :) It's unlikely Nivo is broken, it's a massive plugin that is well documented ;)
 
well I'll get there with Nivo (see I've still got confidence lol), on one page the ajax isn't showing the dark background and the pop up is at the top of the page, the other page isn't showing the link and just says "The requested content cannot be loaded. Please try again later." I know the page is there lol

The other bits are done, slideshows doing what I want and I've sorted out the theme for nivo... well they're ok until I get to media queries anyway lol

I've only really got to sort out Nivo, deal with my mobile menu and media queries. Then I can focus on the good bits... content :blink:
 
Ok... Sean (or anyone else :)) you got any idea what might be going on .... do I need to set something magical somewhere as I'm following the documentation :)

The documentation says
Code: 
<a href="demo.html" data-lightbox-type="ajax">Load via AJAX</a>
for Ajax (ie remote html page) and
Code: 
<a href="image1_large.jpg" data-lightbox-gallery="gallery1"> <img src="image1_thumb.jpg" alt="" />
for galleries and then use the standard script at the bottom to fire off the lightbox.

So by my thinking for an ajax which links into a gallery I would use a layout like this
Code: 
<a    href="http://webaddress.co.uk"  data-lightbox-gallery="gallery1"  data-lightbox-type="ajax"> <img src=".....

Now the imagery works fine, pops up, moves to the next etc, but the ajax is giving the popup but no loading of the link just giving the error text.

Initialisation code which should fire it off but....
Code: 
$('a').nivoLightbox({
    effect: 'fade',       
    keyboardNav: true,                         
    theme: 'default',  
    clickOverlayToClose: true             
});
 
Sorted it, well almost.... it now pop ups :)

In case anyone else has the issue

It's down to the 'data-lighbtbox-type' being bleeding daft. I need to use iframe to bring up an ajax (external page...as it is with every other lightbox) link. Why have an 'ajax' option if it's not going to work!!!

Now I've just got to get it to centre the page... that will be fun lol
 
Sorry for not replying sooner, didn't check the forums until now. Send us a link?
 
I don't want to send a link yet, I want it to be a surprise when it's done, plus it's working except for the centring of the iframe when it's a 'small page' :p

Besides I'm working on my media queries and sorting out ie8 compatibility (pita - do you know of any accurate tools for checking this other than the screenshot ones?)
 
You must log in or register to reply here.
Back
Top