Beruflich Dokumente
Kultur Dokumente
An experimental image gallery with a realistic touch: the images are displayed in a 3D room with walls.
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<div class="gr-main"> <figure> <div><img src="images/11.jpg" alt="img01" /></div> <figcaption> <h2><span>Penn. Station, Madison Square Garden and Empire State Building</span></h2> <div><p>New York City, 2009, by <a href="http://www.flickr.com/photos/thomasclaveirole">Thomas Claveirole</a></p></div> </figcaption> </figure> <figure>
<!-- -->
</figure>
<!-- -->
</div>
20</div>
We will first transform it into the following structure that will contain a room with a main wall:
1<div id="gr-gallery" class="gr-gallery"> 2 3 4 5
<!-- -->
</div>
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25</div><!--
<div class="gr-room"> <div class="gr-wall-main"> <div class="gr-floor" style="width: 3382px;"></div> <figure></figure> <figure></figure>
<!-- -->
</div> </div> <nav> <span class="gr-prev">prev</span> <span class="gr-next">next</span> </nav> <div class="gr-caption"> <span class="gr-caption-close">x</span> </div>
/gr-gallery -->
The main wall will get a width so that a certain amount of images fits inside. The default number of images per wall are the total number divided by four since we have four walls to spread them on. We can also set the number of items per wall by initializing the layout array, as see in the demos:
1Gallery.init( { 2
layout : [3,2,3,2]
3} );
Now, when we reach the end of a wall and rotate to see the next one, well add another wall dynamically and set the right transforms so that its in the right angle towards the main wall.
Lets take a look at some screenshots. The gallery starts by looking at the first image which will be centered in the viewport. With a very large screen, we will be able to see the neighboring images as well, depending on the wall size of course:
When clicking on the little description, a larger version will slide in from the bottom of the screen:
When clicking on a navigation arrow (we click to go to the right) we will move to the next or previous picture. When the end of the wall is reached, well give a turn:
When we turn fully, the walls will be reset and well again have only the main wall:
The biggest problem for these kind of extreme experiments is the different handling of 3D transforms in the browsers and of course the performance. When playing with extreme widths and perspective, there can be
glitches in viewing because an element might be rotated right into your face :) The larger the element is in width, the higher the perspective value needs to be (at least for Firefox). Sadly, the performance suffers when adding something like a box shadow, so we have stripped the demos down to their bare style and not added too much fanciness. It does look a bit ugly, but we simply wanted to show the 3D effect and the smoothness is more important for us in this experiment. Anyway, we hope you enjoyed this little experiment and find it inspiring!