Best jQuery Gallery Plugins & Tutorials with Demo

    jQuery Dynamic Grid: XML Gallery

    jQuery Dynamic Grid: XML Gallery

    With Dynamic Grid: XML Gallery you can create the image gallery that you want. The script gives you huge control over the layout and animations, and the possibilities are endless. Literally endless – the script is smart enough to generate unique layouts every time it launches, which means a unique experience for your visitors on every page load.

    With the Dynamic Grid engine you have the power to create exactly the layout you need. And if you don’t know what you need, the script comes with solid default settings that create a beautiful and random layout on every page load!

    Expo360º : 360º Product Viewer in jQuery

    Expo360º : 360º Product Viewer in jQuery

    With Expo360° you take showcasing products on your website to the next level. Your customer not only gets a better look and feel of the product that you are presenting, it also is a cool feature on your website that will blow everyone away!.Opposite to existing 360° viewers available online, this viewer doesn’t use Flash and offers great interaction on mobile devices such as iPad and iPhone. What makes it even more unique is the extensive set of configurations possible. It allows you to create a look and feel that will match your online presence perfectly.

    Features :

    • Easy 360° views of your products;
    • Easily change the width and height of the viewer;
    • Loads external images;
    • 100+ XML configurations;
    • Add hotspots to show details;
    • Custom grabhand cursor;
    • Smart zoom functionality with mousewheel support;
    • Optional zoom navigation window;
    • Use as a fancy zoom/pan viewer with a single image.

    Polar Gallery in jQuery

    Polar Gallery in jQuery

    This item is an interactive, animated, Polaroid alike gallery. You can use this plugin to easly build a cool-looking gallery or a stand-alone nice photo.

    • User can navigate throught the gallery using arrow keys.
    • Navigation can be turned off if You do not want it.
    • Photos can be rotated by the given or by the random degree.
    • You can define maximal photo rotation and it’s zoom scale (to do not show the image which doesn’t fit the browser window).
    • Every photo can have it’s title and subtitle.
    • You can define an URL on which user will be redirected after clicking a zoomed photo.
    • Photo’s subtitle can be a link as well.

    RefineSlide : jQuery 3D Transform Slides

    RefineSlide : jQuery 3D Transform Slides

    A 3D transform/CSS transition-enabled jQuery plugin for displaying responsive, image-based content with shiny animations.

    Features :

    • A few transitions to play with
    • Responsive down to mobile scale
    • CSS transition & 3D transform support
    • Javascript fallback fade transition
    • Auto-formatted, responsive thumbnails
    • Good browser support (IE7+)
    • HTML captions
    • Hardware acceleration on supported browsers
    • Free to use and abuse as you like
    • Simple, semantic markup

    3D Thumbnail Hover Effects with CSS3 and jQuery

    3D Thumbnail Hover Effects with CSS3 and jQuery

    Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.

    In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.

    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.