In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.
We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality.
That’s why the demo is best viewed in Webkit browsers like Google Chrome or Apple Safari.
We will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth script!
Again, we will be showing some amazing photography by Mark Sebastian. Please visit his Flickr page or his homepage for more information on his work. The images that we will be using are from “The IT Factor” photo set on Flickr.
So, let’s begin!