Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.
View demo Download source
Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.
Check out the Sweet Thumbnails Preview Gallery where me make use of the thumbnails slider idea.
The images are by talented tibchris and you can find them on his Flickr photostream:
tibchris’ photostream
So, let’s start with the markup.
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:
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!
In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
We will be using Flip!, a jQuery plugin by Lucca Manno that flips elements.
And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron.
The beautiful images are by talented Polina Efremova. Visit her website and check out her profile on Behance.
Let’s get started with the markup!
10:42 PM
Riddhi Siddhi Infotech
