Best jQuery Gallery Plugins & Tutorials with Demo

Perfectly Rotate and Mask Thumbnails With CSS3 & jQuery

Perfectly Rotate and Mask Thumbnails With CSS3 & jQuery

Ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard! Learn how to do it right!

Image galleries with rotated thumbnails are somewhat infrequent, but it’s a simple trick to add style to your webpage. However, if not done right, achieving and maintaining this effect can sometimes prove to be a major hassle!

To properly achieve this effect, your first thoughts might turn to creating rotated thumbnails in Photoshop. However, this can prove to be difficult in the long term. Disadvantages to creating rotated thumbnails in this way include: Angle Consistency,CMS Thumbnail Generation,Long-Term Manageability.Wouldn’t it be nice if you could perform this little rotation with one line of code? Well you can! Let’s learn how.

jQuery Image Scroller Plugin

jQuery Image Scroller Plugin

Building websites for PUMA has given me the opportunity to do some pretty cool stuff. The latest feature was dreamed up by Owen, and it turned out to be pretty easy to do with JavaScript.

These large individual product images work great for products like shoes, but when we needed to introduce clothing items we couldn’t fit the entire product in without shrinking the image down until it was too small. Owen’s solution was to have a small thumbnail preview that you could drag over to view different sections of a larger image.

MaxImage 2.0 : jQuery Fullscreen Background Slideshow plugin

MaxImage : jQuery Fullscreen Background Slideshow Plugin

Your site looks impressive when it displays a slideshow background image in the wind and Maximage makes it possible for you.MaxImage 2.0 uses the slideshow power from jQuery Cycle Plugin and allows you to utilize all of the options from Cycle but now for a background slideshow.

MaxImage 2.0 determines whether your browser can use CSS3′s background-size:cover. If it can, it uses it as to limit the amount of heavy lifting that jQuery has to do. That means the majority of your users will have a slim and smooth experience. That is so important with large image animations as it is. (still working on optimizing) If CSS3 is not available it falls back to the old way of sizing and centering background images.

jQuery Awesome Nishtyak Gallery

jQuery Awesome Nishtyak Gallery

Beautiful customizable jQuery carousel.

Features:

  • an unique vertical scrolling mode besides standard horizontal one
  • an adjustable number of strings
  • can adjust to the width of a page
  • supports any content
  • autoscroll
  • much more

Isometric interactive interior guide with jQuery & CSS3

Isometric interactive interior guide with jQuery & CSS3

During browsing internet, I have noticed new interesting thing – it looked like isometric guide. Today I will show you how you can create something similar. We will create isometric interactive interior guide with CSS3 and jQuery.

Showing Image With Bounce Effect in jQuery & CSS3

Showing Image With Bounce Effect in jQuery & CSS3

There are many example out there that using CSS3 transform and animation for enhancing the webpage and today I’m going to share one of them. Using CSS3 transform and animation we will create a bouncing effect when an item (in this case image) is showing or added to our webpage.We will have an image list positioned on the bottom of the page wrapped by a single div, it will be opened by clicking a plus sign. If one of these image is clicked it will be showed on the middle of the page with bouncing, if other image clicked it also be showed next to previous showed image.

To have a bouncing effect is a little bit tricky, we can use transform with playing scale value and helped by animation keyframes. Bouncing like zooming in and zooming out with different scale in some interval, for our bounce effect, the image will be showed bigger than its original size then scaling to smaller, bigger but smaller than the first and back to original size.

FlippingBook WordPress Gallery Plugin in jQuery

FlippingBook WordPress Gallery Plugin in jQuery

FlippingBook WordPress Gallery Plugin is a full integrated image gallery plugin for WordPress with page flipping effect. Allows you to create flash books with page flip effect directly from the administrator panel via a specifically designed interface.

ContentFlow : JavaScript flexible Coverflow Slider

ContentFlow : JavaScript flexible Coverflow Slider

ContentFlow is a flexible CoverflowTM / ImageFlowlike flow written in javascript, which can handle any kind of content.

With ContentFlow it is now possible to have any number of flows within one web-page. Each separately configurable, satisfying different visual needs.

  • It’s easy to implement and to extend.
  • It can auto generate reflections (clientside)!
  • You can add and remove content items on the fly
  • You are free to define your own methods for displaying content and interacting with it.
  • You can control all aspects of the flow without loosing the ease of use.

ContentFlow can handle different kinds of control, like keyboard and mouse, and can be used with and without a reflection. For a complete list of features and compatibilities take a look at the feature list.

Growing Thumbnails Portfolio with jQuery & CSS3

Growing Thumbnails Portfolio with jQuery & CSS3

In this tutorial we will be making a portfolio with HTML5, jQuery and CSS3 that features an interesting growing effect.The important bit to note here is the #carousel unordered list. This element holds a collection of li items that represent your recent works.  The visible class is only added if the thumbnail is to be shown. Only three thumbnails will be visible at a time. The href attribute of the hyperlink can point to the website in question, or a larger version of the image if you plan to use a lightbox together with this example.

Flare Responsive Mobile-Optimized Lightbox Plugin in jQuery

Flare Responsive Mobile-Optimized Lightbox Plugin in jQuery

Flare – a custom responsive, touch enabled, mobile optimized lightbox jQuery plugin, which can be used to display single images/videos or entire galleries.

Image/Video Navigation via:

  • UI buttons
  • Swipe gestures
  • Mousewheel navigation
  • Keyboard arrows

Transitions:

  • Use hardware acceleratation on CSS transforms
  • Fallbacks to standard jquery animation in older browers

Media Support:

  • Images
  • Fullscreen Video (YouTube, Vimeo, Vid.ly and local Video)
  • Automatically retrieves cover image for YouTube, Vimeo and Vid.ly videos