how to make lightbox2 responsive

jquery responsive-design lightbox2
camcam picture camcam · Jul 22, 2012 · Viewed 11.9k times · Source

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.

Answer

Mister Oh picture Mister Oh · Jan 17, 2013

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;
}

Related questions

Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More
jQuery: How to detect window width on the fly?

I have a scrolling element on my page (with the jScrollPane jQuery plugin). What I want to accomplish is a way to turn off the scrolling window by detecting the width of the browser window. I am doing a responsive …

Read More
Responsive Bootstrap Datatable not collapsing columns at the correct point

I'm using Datatables.net latest, with datatables and bootstrap. I suppose my question is: What does Datatables Responsive Bootstrap use to detect overflow, because it clearly isn't the parent width. Here is my result: It's a pretty straight forward problem. …

Read More