Posts

HTML5 Slideshow with Canvas & jQuery

HTML5 Slideshow – a progressively enhanced HTML5 slideshow with a fancy transitional effect and the new canvas element & jQuery, which is perfectly functional in older browsers as well.

The canvas element opens a whole new way of building rich internet applications, it allows us to create and modify graphics, we can also use it like any other element on the page like apply jQuery animations on it or listen for events.

View DEMO

HTML5 slideshow with canvas and jQuery

Panel Gallery 2.0 – jQuery Plugin

Panel Gallery 2.0 – a simple way to take a group of images and transition from one to the other in a smooth, visually appealing way.

Version 2.0 comes with a huge amount of new effects to apply, and with multiple ways to apply them.

You can apply specific effects on any image, create an array of effects, of let the plugin pick effects for you. This, combined with the plugin’s options gives you an unlimited amount of combinations to use.

Panel Gallery 2.0

Version 2.0 has the following transition effects:

  • Fade – a simple total image fade
  • Box (5 variations) – transitions by dividing up an image into small squares. Transitions can be random, or wipe diagonally from top left to bottom right, top right to bottom left, …
  • Panel (44 variations) – some effects are, zipper, teeth, reveal, north/south, east/west.
  • Overlay (8 variations) – original Panel Gallery effects, with the ability to add a blinds effect for any overlay option.
  • Jackpot – divides an image up into three pieces and transitions them like slot machine wheels.

jQuery Fullscreen Image Gallery – SIDEWAYS

SIDEWAYS – a smooth and impressive jQuery fullscreen image gallery.

After selecting the image via thumbnails, sideways gallery automatically slide into the browser full screen view, hovering the prev button reveal image thumbnails again.

It utilizes the jQuery User Interface, jQuery Easing and jQuery mousewheel plugin. Images can be in fullscreen mode or to fit browser window.

View DEMO.

jQuery fullscreen image gallery

jQuery Image Slider Plugin – Orbit

Orbit – a lightweight (2.8kb) jQuery Image Slider plugin with a clean markup and several easy to set-up options.

CSS is kept to a minimum so you can style it any way you like. Images can be browsed using play-pause button or with the prev-next buttons which appear on hover.

Orbit support image captions, images can be faded, horizontally or vertically slided, all the timings between transitions can be easily set, and much more.

jQuery image slider plugin - Orbit

Orbit slider will dynamically determine the height and width of your set of images and scale accordingly, but you need to make sure all your images are the same size or the larger images will peek out on the sides.

Unobtrusive & Highly Customizable Lightbox Clone – TopUp

TopUp Lightbox – Unobtrusive & highly customizable jQuery/jQuery UI driven pop-ups with fancy layouts, animations and transitions.

With TopUp you can display images (image galleries), flash content from sites like Youtube, SWF files and FLV video, QuickTime movies, Windows Media and Realplayer, iframes, DOM elements and raw HTML.

Advanced lightbox clone - TopUp pop-ups

With a current release 1.7.2 it is possible to specify which jQuery libraries to auto-include or not to auto-include at all, enable fast mode and override the assets (host, images_path and players_path) variables.

A few features:

  • TopUp is absolutely free, also for commercial use
  • A very easy setup process: only one include
  • Using TopUp presets keeps your HTML code 100% clean
  • TopUp can be used along with Prototype
  • Usage of CSS sprites to reduce the amount of image requests
  • Cross-browser compatibility
  • It’s open source
  • and many more…

A Lightweight Content Switcher with jQuery & CSS3

Content Switcher – a lightweight jQuery & CSS3 content switcher inspired by MLB.com Flash content switcher.

The only thing currently missing from the switcher in comparison to the MLB.com Flash version is the play/pause and autorun functionality.

View DEMO

jQuery and CSS3 MLB.com like content switcher

Content Switcher uses several of CSS3 features like border-radius, RGBA colors, opacity, gradients, and still looks acceptable in non-supportive browsers.

JavaScript file used in this content switcher contains extensive commenting, you can see exactly what each line does.

Photo Stack Gallery with jQuery, CSS3 & PHP Tutorial

Beautiful Photo Stack Gallery – Tutorial (with source code) on how to create a nice and fresh image gallery using jQuery, PHP & CSS3, with multiple albums support.

The idea is to show the albums as a slider, and when an album is chosen, images are shown in the photo stack view with a slick animation and reflection (reflections only work in Webkit browsers, Google Chrome or Apple Safari).

View DEMO

jQuery, CSS3 image stack gallery

PHP is used for getting the images for each album from albums folders.

Photo Stack Gallery is fully functional in all latest browsers like Firefox and IE, just without some beautiful properties supported only by Chrome and Safari.

Attractive Dual Animated Slider – DualSlider jQuery Plugin

dualSliderjQuery Plugin aims to provide jQuery users with attractive Dual Animated Slider. Easily highlight recent articles, images, or even a video … basically anything you need.

Sliding content can either be static or come out of a database. If it’s out of a database, the paging is built dynamically by the plugin. View DEMO.

DualSlider comes with all standard options like auto sliding -true/false, autoDelay, durationCarousel and more.

dual slider jquery plugin