Archive for the ‘Gallery’ Category

Here is one really best way to show your portfolio photos in camera shutter effect with the help of jQuery and canvas of HTML5. This looks really very nice and is really very easy to use. I am damn sure that you all will like this very much as me.

Demo | Download | View Tutorial

Resource : Tutorialzine

Shutter Effect Portfolio with jQuery and Canvas

Looking for a flash gallery with XML control?

Your search ends here… Here is a very nice and beautiful flash gallery with XML control having very nice and smooth effects. This gallery is having other controls like Pause, Play, Next, Previous, Next Page, Previous Page, Autoplay options.

This gallery is absolutely free and having no watermark anywhere. Enjoy this gallery…

Demo | Download | Details

Resource : instantshift.com

Free Flash XML Gallery

Here is a tutorial for designers who are going to design a portfolio with many categories and want to filter their gallery by the category. Yes, absolutely right! You can now create gallery with filtering by their categories and the best part of it, this doesn’t use any PHP, ASP of dotnet type language.

This just use jQuery and you will be able to create your Filterable Portfolio gallery. So designers, go and good luck..

Demo | Download | View Tutorial

Resource : net.tutsplus.com

Creating a Filterable Portfolio with jQuery

Image or content slide is a very common use in the websites. And all the times we stuck with very complicated and lengthy js plugins.

Now here I am introducing a very featured slider with looped effect with never seems ended. And it is having many other featured like :

  • Looping
  • Auto Play
  • Fade or Slide transition effects
  • Crossfading
  • Image Preloading
  • Auto Generated Pagination
  • User defined Next, Previous and pagings
  • Controlled Fade and Slide Speed
  • Set which slide you’d like to start with
  • Set Pause on Hover
  • AutoHeight
  • and many more…

View Demo | Download

Resource: Nathan Searles

jQuery LoopedSlider

Sometimes we need to display few points in a whole design with some highlighted style, so that the things we want to target is more visible in the whole surface. Here is a simple way to do this with jquery in overlay effect.

In this way, we will be able to highlight the marked specific points in the portfolio design and we can use this for many other purposes too.

In the tutorial, this is quite easy to understand the way of doing this Annotation Overlay Effect with jquery. I hope you must like this jquery beautiful effect.

Demo | Download | View Tutorial

Resource : codrops

Annotation Overlay Effect with jQuery

In this tutorial we can create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

Demo | Download | View Tutorial

Resource : Codrops

Sliding Panel Photo Wall Gallery with jQuery

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

Demo | Download | View Tutorials

Resource : Codrops

Beautiful Photo Stack Gallery with jQuery and CSS3

Here is tutorials of 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.

Demo | Download | View Tutorial

Resource : Codrops

<Fullscreen Gallery with Thumbnail Flip

In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.

Update: If you are interested in integrating the thumbnails preview slider you might want to check out the new post on how to use only the preview part.

Demo | Download | View Tutorial

Resource : Codrops

Sweet Thumbnails Preview Gallery

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.

For this gallery we will be using the 2D Transform plugin to animate rotations.

The beautiful photos used in the demo are by talented Tetsumo.

Demo | Download | View Tutorial

Resource : Codrops

Polaroid Photobar Gallery with jQuery