From our sponsor: Dora AI - Generate website ideas to Figma designs in seconds, Near-Perfect on first try.
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!
Smooth, Cool and Awesome.
Like This ^_^
Its Perfect… 🙂
_ wow _
ben almen’s plugin – waitng for mini site in which hasher and ajax will b used with inner pages and sections like flash 🙂
maya lou can do it for us 🙂
thanks
What I was talking about – the idea is : http://www.highpointvillage.co.uk/#apartments
Coooool, like this.
😀
Note: 3D does not work in Safari 4 (used 4.0.4).
Does not wok for me in Safari 5.0.3 unter Leopard.
Need safari 5.xx at least, only 5 have 3d
Enorme
As for me, it’s the most beautiful pictures gallery that I’ve ever seen. But I encountered another problem – if I add in this gallery more than 21 image, the gallery will not work.
Please help me solve this problem.
how I can add an unlimited number of images?
thanks
@vol4ikman thanks!
Which jquery version are you using?
Nice Gallery.
Thanks Mary.
I have Safari 5.0.3. on Mac OS X 10.5.8. and there’s no gallery at all. I made a screenshot for you Mary Lou, so that you can see what I mean.
http://www.gentlemedia.nl/images/3Dgallery.png
Thank you for the screenshot Ralph, I have no idea why it looks like that. I have the same version on Windows and it looks and works fine. Did you download the zip and try it locally? The perspective only comes into play once you start scrolling but this seems to be another problem… Cheers, ML
Hey Mary great stuff again!
Would you mind if I use some of your tutorials to create video tutorials about your sliders and the MODx CMS. I will place links of course.
I would like to show a gallery, add it to MODx CMS and show how to make it manageable on the back-end of the CMS using Template variables.
You can see my latest video (as an example) here:
http://designfromwithin.com/video-tutorial-basic-modx-template-setup/
@DESIGNfromWITHIN sure, I don’t mind 🙂 Sounds interesting. Cheers, ML
“Did you download the zip and try it locally?”
Yes, I did and tested it, but the same result.
Seeing Ralphs screenshot I had to say: Same system, same effect. Looks the same to me on my “old” Mac. Online demo or local version. Doesn’t matter.
So I dig out my even older windows based notebook and made a fresh install of Safari 5.0.3. And it works! But it is no real fun on a 1.6GHz Pentium M laptop. Seems to be too slow. Effect is struggeling.
But its an experiment of course, and still a nice tech demo. Keep up the good work!
Very, very good! Thank you.
@Mary Lou
for me…
– Mac, Safari 5.0.1, the 3-D effect does not work, but everything else works.
– PC, Safari 5.0.2, everything works.
Thanks for this wonderful wall
Works fine with (OS PC)
firefox 3.6.13
ie 8.0
chrome 9.0
safari 5.0.3
…even in a popup !
Not working for me on Safari 5.02 Mac.
Oops, should specify that the demo itself isn’t working for me, or at least, the 3-D part of the demo. It does gracefully fall back to 2-D though.
Works on safari, but fails on chrome, 2D work tho’.
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.
it’s awesome and interesting. Good work
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
The script don’t work at IE9.
IE9 fix?
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 🙁
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
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
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
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
Mary,
I see that you fix the IE9 don’t scroll, with the update of the jquery.
If you put the follow on the head:
http://code.jquery.com/jquery-latest.min.js
your code is always updated.
Regards
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++;
});
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
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
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.
it’s wonderful! very nice. it wil be perfect using ajax dynamic loading the picture
can anybody help me
How add jQueryLightBox plugin in this
thx
How can I have auto scroll or slide to this.
How can i desactivate the 3d effect?
Hello,
I would like to have next and previous arrow for thumbnails navigation ? Is there any easy way to achieve it ?
Thanks.
very thanks and usefull
Hi Mary & everybody,
Is there any way to add categories to this beautiful gallery.
Thanks.
Hi Mary Lou,
Would you know how I could add a left and right arrow to navigate through the pictures?
I love this gallery.
HELLO,
I put it in 2 but when i scroll to the end i get a empty page whit just 1 photo dos any body nows how i get the scroll stop at the end of the last photo
Greetings Danko
that was awesome! shows that there’s no longer need in Adobe Flash player! HTML 5 done everything 😉
Al hail the open web!