3D Wall Gallery

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality. For seeing the 3D […]

View demoDownload source

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

For seeing the 3D effect, please try the demo in Safari.

Summarized, you can do the following things in this gallery:

  • Hover an image to see a description
  • Slide through the images using the jQuery UI Slider at the top
  • Use the mouse wheel to scroll through the images
  • Use the thumbnail previewer at the bottom to choose an image
  • Use the hash anchor for the image in the URL to get to it directly
  • Click on an image to slide it to the left (notice the hash anchor in the URL)
  • Turn it into a 3D wall when scrolling/sliding (Safari users)
  • Flipping the perspective when changing the slide/scroll direction (Safari users)

We are using the jQuery hash change plugin by Ben Alman:
jQuery Hashchange Plugin

And we are also using the jQuery Mousewheel Plugin by Brandon Aaron:
jQuery Mousewheel Plugin

The beautiful photography is by Alan Antiporda from Illusive Photography and you can find his Flickr Photostream here: Illusive Photography Photostream


When viewed in the Safari browser, you will see the perspective happening while scrolling or sliding. When changing the direction of scrolling, you will notice that the perspective will tilt to the other side.


You can navigate through the images by either using the jQuery UI slider at the top or your mousewheel.


You can also use the thumbnails previewer to click on an image and get to it directly.


When hovering over an image you can see a little description at the top.

We hope that you enjoy our little experiment and find it useful!

View demoDownload source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 50

Comments are closed.
  1. 2

    Jesus, I hate all these buggy and extremely slow rendering CSS3 demos. People keep saying CSS3 is the replacement for Flash, but all the demos fall short of basic usability. Flash is a medium that has been designed for years to provide a smooth frame rate on any platform. These CSS3 animations imply that the people building you browser now need to be experts in graphics programming as well. Maybe that’s where the problem is. Regardless, if you want any kind of “3d” image manipulation, I say stick with Flash.

  2. 4

    I really like this.

    When you click on the right side of the screen i.e to view the next picture, it slides across perfectly. Can anyone make it do it the other way (back) I just like the simplicity of it sliding from left to write by clicking on the image, not the slider or thumbs. I’d be really greatfull if someone could help. Pretty new to this.

    Tom

  3. 7

    Very nice work.
    Sorrily it’s behavior depend on the current path of the url, so in portals which have dummy addresses in the url, it simply does not work ๐Ÿ™

  4. 8

    Hi Mary Lou,

    Very nice work , but i just installed internet explorer 9 and doesn’t work.
    How can I fix the problem?
    thx a lot

  5. 9

    Hi Stero, I fixed it and it should work properly in IE9 now. It’s the jQuery version, it just needs to be updated to the current one (1.5.2).
    Thank you,
    cheers,
    ML

  6. 10

    Hi Mary Lou, I have fixed in IE9, but how can avoid that the gallery strech out when I minimize the browser?

    thanks a lot

  7. 11

    Hi Mary
    I have a problem with IE8.
    If I put the zoom at 125%, the last image of the gallery jump to a 2ยบ line and broke the layout.
    Can you tell me what I must do to fix this problem.
    Regards

  8. 13

    Does this example provide loading function? I found there is loading triggered in another example(sweetthumbnail)

    I try to use this script to find the image but it return length=0.

    var loaded = 0;
    $nav_elems.each(function(i){
    var $nav_elems = $(this);
    if (loaded==0)
    alert($($nav_elems.find(‘a’)).find(‘img’).length);
    loaded++;
    });

  9. 14

    Hi there, excellent looking gallery! I seem to have stumbled upon a javascript conflict with regards to a Statcounter script. Once inserting the webstats script, a message appears in the gallery that the code is corrupted. Is there a way to avoid the conflict?

    Cheers,
    Dave

  10. 15

    Hi Mary Lou,

    Really great script. This is just what I’ve been looking for, for some time now!

    My question is: Can you have the slider align to a DIV rather than the BODY – I have a left-margin of 200px – the slider seems to overide the CSS and go to absolute 0 left.
    Any ideas?

    Your help would be very much appreciated.
    Thanks,
    Chris

  11. 16

    I absolutely love this gallery. However, I noticed that the iPad doesn’t. Is there any way to make this work in the iPad?
    Thanks again for a great tutorial.

  12. 17

    it’s wonderful! very nice. it wil be perfect using ajax dynamic loading the picture

Comments are closed.