ckdesign — 2011-04-18T18:59:18-04:00 — #1
This is project is for the iPad.
What I am trying to make is a gallery that I can swipe from right to left. This gallery will consist of a grid of thumbnails that have different heights but all have the same width. The number of visible thumbnails varies depending on if you are looking at the gallery in portrait mode or landscape mode.
In landscape the grid is 2 X 6 in portrait the grid is 3 X 3.
The total number of images is unknown and will keep growing, so this needs to be fluid.
What I have right now is a parent container with a set height and width (it changes with screen orientation only) and overflow is set to hidden so anything that does not fit on screen is hidden.
The unordered list has a set max-height and width set to auto. Even though the list has an auto width and max-height, the height expands when I add more list items and I can not force the list to expand horizontally.
In order to do a left to right swipe, I need the list to expand horizontally.
Any ideas on how this can be done with CSS?
I need to make the width fluid for a CMS template so hard coding the width in the style sheet is not an option.
here is the mark-up so far:
list-style: none outside none;
padding:1.47em 0.78em 0.78em;
var articleY = $(window).height();
rayzur — 2011-04-18T23:47:57-04:00 — #2
Try adding white-space:nowrap; to your UL, that will stop your inline-block LIs from wrapping.
You can also do away with width:auto on the UL and height:auto on the LI, those are defaults and you don't have to declare them.
The absolute positioning on the UL will cause it to shrinkwrap to the width of it's contents when a width or a right offset is not declared. Have you tried just leaving the UL as an inflow block or is there some reason you need the AP to remove it from the flow.
ckdesign — 2011-04-19T12:13:49-04:00 — #3
Thanks for the tips, for this project white-space:nowrap; will not work as I want to preserve some of the rows and if I set the <ul> to no wrap the <li> will render all the thumbnails on one line, which sort of works but I would like to preserve the grid layout.
The point of setting absolute is so I can move the <ul> with the swipe gestures by adjusting the left positioning. I suppose I could use negative margins to accomplish the same thing but that just feels dirty..
I'm open to idea's, I have studied other image gallery's a and most of them seem to operate in this way so I'm just mimicking some of the things I have seen other people do, unfortunately none of the plug-ins will work because none of them will adapt to a fluid layout. I thought it might be faster to make my own then hack up some one else's plug in.
EDIT to add: