I looked here: http://drupal.org/node/1630630 but this is only for Drupal sites. Does anybody know how to tweak the regular lightbox2 library to make it responsive and display on small mobile screen?
by "responsive" I mean that the picture should display depending on screen size. Right now, it has always the same size and on small screens needs scrolling.
Well, this is super late but I came across this wanting assistance as well. The two snippets of code in the answers "sort of" work but they look TERRIBLE!
This works much better, IMO:
.lb-image, .lb-dataContainer {
max-width: 100%;
height: auto !important;
width: 100%;
}
.lb-outerContainer {
max-width: 100%;
height: auto !important;
}
You should just be able to set max-width:100% on the image (using CSS). This is all that's required to make an image responsive. If lightbox2 sets styles on the image, just look at the selector specificity and override it
I used:
.lb-image, .lb-dataContainer, .lb-outerContainer {
max-width: 100%;
height: auto !important;
width: auto !important;
}
thanks for the pointers...used some previous suggestions as a starting point and have a fiddle thereafter.
I'm working on a site with an existing install of LightBox2 v2.0, rather than a new install (and having to re-code the images etc) I've decided just to have a fiddle...
My CSS is below. It's now fully responsive.
The main points are changing the width, max-width, height and max-height & !important. I found that once I'd got the width responding to the viewport the #outerImagecontainer was becoming very long, hence the max-heights or fixed heights. I've also limited the width to 768px, that the width of the site and also the images too, scaling them up was obviously lossy.
#lightbox{ position: absolute; max-height:700px; left: 0; width: 100%; z-index: 100; text-
align: center; line-height: 0;}
#lightbox img{ width:100%; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; max-width: 760px; width:80% !
important; max-height:50%; height: auto !important; margin: 0 auto;font-size:11px !important; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 25%; text-align: center;
line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; max-height:50%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA);
/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/assets/lightbox2/images/prevlabel.gif)
left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/assets/lightbox2/images/nextlabel.gif)
right 15% no-repeat; }
#imageDataContainer{ font: 85% arial, sans-serif; background-color: #fff; margin: 0 auto; line-
height: 1.4em; overflow: auto; max-width: 760px; width: 80% !important; max-height:50px;}
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: auto; background-
color: #000; }
For me it worked as NickW says (thank you by the way you helped me to find this solution) it just needed a little change:
@media only screen and (max-width: 680px) {.lb-dataContainer{
max-width: 80%;
height: auto !important;
width: auto !important; }.lb-outerContainer {
max-width: 80%;
height: auto !important;
width: auto !important;}}
The lightbox doesn't have problem till the particular screen size, so I used media queries for the part that image is starting not fitting in the smaller screen size (in my case it was 680px). And it works best for me when containers are not taking all free width of the screen (it just looks nicer to me) but it is just a choice so just check how it works for you. For the .lb-image just use the code that is written in the post above.
I tried every suggestion on this page, and found none of them worked. So after a few hours I wrote my own based on catching a window resize event.
Here is my solution, it may seem like a lot of effort, but it scales the images brilliantly when the window is resized (this is largely JavaScript based):
In lightbox.js do the following:
Create two global variables:
var preloader_Height;
var preloader_Width;
Populate them in the preloader.onload function as follows
preloader_Height = preloader.height;
preloader_Width = preloader.width;
Then at the bottom of the script (just before the return statement):
//Hack is here, modifying scaling when window resize event handler is fired
$( window ).resize(function() {
//Grabbing the padding (if there is any)
containerTopPadding = parseInt($('.lb-container').css('padding-top'), 10);
containerRightPadding = parseInt($('.lb-container').css('padding-right'), 10);
containerBottomPadding = parseInt($('.lb-container').css('padding-bottom'), 10);
containerLeftPadding = parseInt($('.lb-container').css('padding-left'), 10);
//Calculating max image width and height to prevent the image going outside of screen
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
maxImageWidth = windowWidth - containerLeftPadding - containerRightPadding - 20;
maxImageHeight = windowHeight - containerTopPadding - containerBottomPadding - 120;
//Checking for a fitting issue and also defining imageHeight and imageWidth
if ((preloader_Width > maxImageWidth) || (preloader_Height > maxImageHeight)) {
if ((preloader_Width / maxImageWidth) > (preloader_Height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader_Height / (preloader_Width / imageWidth), 10);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader_Width / (preloader_Height / imageHeight), 10);
}
}
//Forcing internal image to be 100% so it scales with its external container
$(".lb-image").css("width", "100%");
$(".lb-image").css("height", "100%");
//Forcing the external container to match the new required image width and height
$(".lb-outerContainer").css("width", imageWidth);
$(".lb-outerContainer").css("height", imageHeight);
//Scaling the information at the bottom showing image number and little cross
$(".lb-dataContainer").css("width", imageWidth);
//Defining width for the navigation buttons
$(".lb-nav").css("width", imageWidth);
//Centering vertically
var center_offset = (maxImageHeight - imageHeight) / 2.0;
var top = $(window).scrollTop() + 10 + center_offset;
$(".lightbox").css("top",top);
});
Additionally, in lightbox.css add:
left:50%;
transform: translateX(-50%);
to .lb-nav.
And finally, add
$(".lb-nav").css("width", imageWidth); //Setting image width for the lb-nav
var center_offset = (maxImageHeight - imageHeight) / 2.0;
var top = $(window).scrollTop() + 10 + center_offset;
$(".lightbox").css("top",top);
to the sizeContainer function in lightbox.js.
Now you should be able to scale your window at will in real time and your images will scale accordingly.
