I am in the process of building a dynamically resizing image gallery for the ipad. I have an unordered list that is comprised of several thumbnail images along with a short description.
Eventually I am going to incorporate slide capabilities so the user can swipe left to right through the image gallery, because of this feature I need the extra images that don’t fit within the view port to expand the unordered list to the right. The problem is I can not get the unordered list to expand horizontally, it will only expand vertically even though I have explicitly set a max height (using javascript).
Code so far:
<style type="text/css">
span {
display:block;
width:160px;
}
#content {
display:block;
position:relative;
overflow: hidden;
margin:0em 2.34em;
text-align: left;
}
ul {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
width: auto;
display:block;
text-align:center;
list-style: none outside none;
}
li {
display:inline-block;
padding:1.47em 0.78em 0.78em;
text-align:center;
height:auto;
vertical-align: top;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var articleY = $(window).height();
$('#content').css({'height':articleY});
$('#gallery').css({'max-height':articleY});
});
</script>
<div id="content">
<ul id="gallery">
<li><img /><span>text</span></li>
<li><img /><span>text</span></li>
etc...
</ul>
</div>
The images have a set width of 162px.
Any ideas on how to get the unordered list to expand horizontally instead of vertically?