Horizontal slider with jQuery: 100% height, auto width for the images/children

[S S0DEN]

I've been trying to find a solution to my issue for the past few days, but really couldn't find it anywhere, and Google literally hates me, so here I am. This is a big request and my conscience is eating at me for asking, but I don't know where else to turn.I am building a gallery for a photographer, and while I'm at ease with HTML and CSS, my jQuery skills are taking a beating (in short, they're not good) - surprise, surprise.The task becomes even more complex since it's a 100% height kind of gallery, and 100% heights don't play nice. I manage to set some of it up, but its functionality is really impaired.After digging here on Stack and Google I found this great Plugin/Fiddle by William Moynihan:http://jsfiddle.net/wdm954/8GKz6/11/It contains exactly my markup and CSS, as well as the functionality I was looking for: a slider which centers the main image when sliding, and is infinite.However, it doesn't play well with \[code\]height: 100%;\[/code\] because of the \[code\]width: auto;\[/code\] property on the images. The following line:\[code\]$(content).width(w * $(section).length);\[/code\]Doesn't appear to calculate the width of the container at all (sets it to zero) because of the auto property in the CSS. When I set the width via the jQuery .css property to \[code\]('width', 'auto')\[/code\], it works fine, but the sliding function is imperfect, causing images to skip/jump when moving right and left.I didn't resort to a slider, because this is a nice way to actually have the content layed out, in a horizontal manner, which is something that looks great on a photographer's website. And of having \[code\]width: 100%;\[/code\] will make the vertical images stretch past the browser window, and the horizontal ones to "hang" at the top with plenty of white space below. So, I am convinced that \[code\]width: auto;\[/code\] and \[code\]height: 100%\[/code\] is the correct, responsive way to go about it, but if someone manages to "unconvince" me, I will definitely follow your lead.While I'm here, maybe someone could be polite enough to point me in the right direction to make this gallery finite - ending at the start and end of the slider, with the left/right buttons disappearing accordingly.Any help is greatly appreciated. Here is the code itself, just in case the fiddle isn't enough:\[code\]<div class="container"> <div class="gallery"> <img src="http://stackoverflow.com/questions/img/1.jpg" alt="Image" /> <img src="http://stackoverflow.com/questions/img/2.jpg" alt="Image" /> <img src="http://stackoverflow.com/questions/img/3.jpg" alt="Image" /> <img src="http://stackoverflow.com/questions/img/4.jpg" alt="Image" /> <img src="http://stackoverflow.com/questions/img/5.jpg" alt="Image" /> </div></div><nav id="navigation"> <a href="http://stackoverflow.com/questions/15794381/#" class="left"><<</a> <a href="http://stackoverflow.com/questions/15794381/#" class="right">>></a></nav><script>/* jQuery Ghost Carousel * Copyright (c) 2011 William Moynihan * http://ghosttype.com * Licensed under MIT * http://www.opensource.org/licenses/mit-license.php * May 31, 2011 -- v1.0 */$(function() { var content = '.container .gallery'; var section = content + ' > img'; function ghostCarousel() { var v = $(window).width(); var w = $(section).width(); var c = (w * $(section).length - v) / 2; $(content).width(w * $(section).length); $(content).css('margin-left', -c); $(content).css('width','auto'); $('#navigation a.left').click(function(e) { e.preventDefault(); if ($(content).is(':animated')) return false; $(content).animate({ marginLeft: '-=' +w }, 1000, function() { var first = $(section).eq(0); $(section).eq(0).remove(); $(this).animate({ marginLeft: '+=' +w }, 0); $(this).append(first); }); }); $('#navigation a.right').click(function(e) { e.preventDefault(); if ($(content).is(':animated')) return false; $(content).animate({ marginLeft: '+=' +w }, 1000, function() { var end = $(section).length - 1; var last = $(section).eq(end); $(section).eq(end).remove(); $(this).animate({ marginLeft: '-=' +w }, 0); $(this).prepend(last); }); }); } ghostCarousel(); $(window).resize(function() { var v = $(window).width(); var w = $(section).width(); var c = (w * $(section).length - v) / 2; $(content).css('margin-left', -c); }); });/* end "jQuery Ghost Carousel" */</script>\[/code\]Along with the CSS:\[code\]html, body { padding: 0px; }.container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }.container .gallery > img { position: relative; float: left; height: 100%;}\[/code\]