Full Page Image Gallery with jQuery shows us how 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.

Published under: Gallery | License Free

Thumbnails Navigation Gallery with jQuery tell us how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style.

The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right. When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

Published under: Gallery | License Free

jQueryRotate is a lightweight, cross browser jQuery plugin that allows you to rotate images by specifying any angle. It uses HTML5 canvas element and VML for Internet Explorer. You cna use it to rotate user generated images and animate them using your own functions.

jQueryRotate is very easy to use in your own projects. All you need is to select an image element and call “rotate” or “rotateAnimation” function. To simply rotate an image, you can directly specify an angle or pass parameters in this function. The rotateAnimation function enables you to add rotating animation programmatically.

Published under: Gallery | MIT License

ColorBox is a customizable lightbox plugin for jQuery. The appearance is completely controlled through CSS so users can restyle the box in order to create a customized lightbox that is unique to their Website.

Feel free to check out the example Style 1, Style 2, Style 3 and Style 4.

ColorBox supports photos, photo groups, ajax, inline, and iframed content. It is completely unobtrusive, requires no changes to existing HTML, plus it degrades gracefully, all content displayed can be accessed without JavaScript. And it generates W3C valid XHTML and CSS.

Published under: Gallery | MIT License

Feature List is a simple jQuery plugin that enables simple and easy creation of an interactive “Featured Items” widget. Feature List size is less than 2k, and it is reusable on multiple containers also it works as a slideshow. Feature List can be styled easily with custom HTML/CSS too.

Feature List is managed to implement quite quickly. The script requires two arrays of items – for tabs and output. When user clicks on one of tab the script finds corresponding output item by index and starts fading.

Published under: Gallery | MIT License

The idea behind the ShineTime is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

ShineTime is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass)  and the best part is, it’s not that difficult to achieve.

Published under: Animation | Gallery

YoxView is a free image viewer for websites. It’s written in javascript using jQuery and is available as a jQuery plugin. YoxView is inspired by Lokesh Dhakar’s Lightbox. Like it, YoxView displays images above the website’s content, as a separate layer.

YoxView Provide many great features including:

  • FREE to use under the  MIT license and open-sourced.
  • Extremely easy to integrate.
  • Video support - play YouTube/Vimeo/Hulu/etc.
  • Images and video are resized to fit inside the browser's window.
  • Plugins to display images from Flickr/Picasa.
  • Content can be pre-cached.
  • Multiple instances in the same page may be used.
  • Multilingual and bidirectional - tooltips and button names may be in any language (language packs available!)
  • Slideshow-enabled - play images automatically.
  • Keyboard access - navigate content using the keyboard.
  • Search engine friendly - large images are indexed.
  • Cross-browser - compatible with all major browsers.
  • Developer's API - call using simple Javascript.
  • Integration: YoxView module for Drupal & Wordpress plugin.

Published under: Gallery | MIT License

The following tutorial will show you how to create a simple slideshow with MooTools; the script will also preload the images and feature a progress message.

Why preload images? They make the slideshow more elegant and you can avoid an onLoad mess. For more information click here.

Published under: Gallery | License Free

If there’s one thing that never seems to go out of style, it’s a good jQuery slideshow.

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

Published under: Gallery

Codrops has shared a great tutorial of how to create Sliding Panel Photo Wall Gallery with jQuery. 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.

In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically.

Published under: Gallery | License Free