HTML Layout : Continuous images - html

Question

I have a series of images, which I want to make them showing in a row, i.e.
[img][img][img][img][img][img][img][img][img][img][img][img][img][img][img]
I want the overflow part will be hidden.
My current HTML is as follow:
<div id="gallery">
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg" class="gallery_img" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" class="gallery_img" />
</div>
and this is the CSS:
#gallery {
width: 100%;
height: 200px;
overflow: hidden;
}
#gallery .gallery_img {
width: auto;
height: 200px;
}
Here is the jsFiddle. I would like to show half image in the edge of the screen, like this:
However, I can only manage to show full images only. How should I modify the HTML / CSS codes ?

Answer 1

Just use overwidth in percentage, and a mask div:
DEMO
#gallery {
width: 200%; /* this is the trick */
}
#gallery img { /* and no need to add class="gallery_img" to IMGs anymore */
height: 200px;
}
#wrapper {
height: 200px;
overflow: hidden;
}
<div id="wrapper">
<div id="gallery">
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
<img src="http://www.o2h.com.hk/images/apple_gala.JPG" />
</div>
</div>
EDIT
I'll add the simplest solution too (posted by #RupaliShinde), because it shows the correct use of the white-space attribute, and appearently it is hard to reproduce (reading the comments):
#gallery {
width: 100%;
overflow: hidden;
white-space: nowrap; /* this is the trick */
}
#gallery img {
height: 200px;
}
DEMO

Answer 2

Have a look at this fiddle - http://jsfiddle.net/jQkHp/
I added a wrapper div around gallery:
#gallery {
position: absolute;
left: 0;
top: 0;
width: 1200px;
height: 200px;
overflow: hidden;
}
#gallery .gallery_img {
width: auto;
height: 200px;
}
#wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
You will need to use some javascript to set the width of the gallery div for this to work properly (I'm only guessing at the width at the moment).
Edit - added some js to calculate the width of gallery based on the images inside it http://jsfiddle.net/jQkHp/1/
var galleryWidth = 0;
$('#gallery > img').each(function(){
galleryWidth += $(this).width();
});
$('#gallery').css('width', galleryWidth);

Answer 3

Just add this in CSS
<style>
#gallery {
width: 100%;
height: 200px;
overflow: hidden;
white-space: nowrap;
}
#gallery img {
width: auto;
height: 200px;
}
</style>
Let rest of code be as it is.

Answer 4

I would suggest putting the images in an unordered list within your containing div, with each image in it's own LI and then set them to display: inline-block in the css.
You'll need some way of scrolling through the images, of course, for which you could use some jquery.