Visual-Blast Magazine

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.

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…

Inset Border Effect - jQuery plugin that puts a border around the images, when the image is hovered, the border animates to the sides, revealing the whole image.

In plugin options you can easily set animation speed, border color, border type e.g. solid, dashed and more.

View DEMO

Easy to use, just:

$("img").insetBorder();

All Plugin options:

$("img").insetBorder({
  speed          : 1000,           // 1000 = 1 second, default 250
  borderColor    : "orangered",    // Default white (#ffffff)
  inset          : 10,             // Border width, default 10px
  borderType     : "solid",        // Border type, e.g. dashed
  outerClass     : "ibe_outer",    // Class name of outer wrap
  innerClass     : "ibe_inner"     // Class name of inner border
});

Zoomer – a simple and nice jQuery image zoom class (1.4kb gzipped) that shows zoomed image inside original. In case you don’t need any ‘fancy’ zooming, this script comes very useful.

It’s easy to implement – html: <img id=”girl” src=”girl-thumb.jpg” alt=” ” />
and javascript:

new Zoomer('girl', {
    big: 'girl.jpg',
    smooth: 10
});

View DEMO

Custom HTML5 Video Player – great tutorial with source files from Dev.Opera on how to create Easily Customizable HTML5 video player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation.

View DEMO

Created jQuery plugin allows you to easily apply custom theme (child theme) as desired and call it using:

$('#video1').gVideo({
  childtheme:'MyChildTheme'
});

From Dev.Opera …

… Google recently releasing the VP8 codec, and the WebM project coming into existence. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8.

This means that we will soon be able to create a single version of the video that will play in the <video> element in most browsers, and the Flash Player in those that don’t support WebM natively.

Poshy Tip – a full-featured jQuery tooltip plugin that allows creating stylish tooltips in a unique and easy way.

Poshy Tip supports asynchronous loading of the tooltip content. By using callback, you can easily update asynchronously the content of the tooltip after it has been displayed. At demo page there is an example of loading  Flickr images in tooltip content.

View DEMOS

Poshy Tip uses a single background image for scalable tooltips. It detects when a background image has been set for the tooltip container DIV and creates a scalable frame from it that wraps the inner contents of the tip.

Also support advanced positioning options, you can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically, tooltips are always displayed in the browser viewport.

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

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.

Colortip Tooltip – a simple jQuery tooltip plugin which is going to convert the title attributes into a series of colorful tooltips.

6 color themes are available, red, blue, green, yellow, white and black, so you can easily match it with the rest of your design, or you can create your own colors in the plugin stylesheet.

View DEMO

You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jquery.js

Bubble Engine - impressive jQuery plugin to create animated soap bubbles anywhere on your site.

Plugin allows you to easily change the size, the look of the graphic, position, particle lifetime, minimum and maximum particle size, and more.

View DEMO with controls.

Bubble Engine support multiple instances, you can easily configure each instance as you like.

Tested in Internet Explorer ver.6,7,8, Firefox 3, Google Chrome 4, Apple Safari 5 and Opera 10

SooperFish is a lightweight (2.01kb minified) & highly configurable jQuery plugin for animated dropdown menus with a ton of features and configurable show and hide custom easing animation.

View DEMO

Feature List:

• Automatic dual or triple columns based on number of child menu items
• Optional delay before hiding menu on mouse-out
• Optional automatic indicator arrows (in black or white)
• Configurable show and hide animations
• Custom easing supported
• Works fine with Javascript disabled
• 2.01kb minified
• and more

Slide Down Box Menu - jQuery  & CSS3 tutorial (source files included) on how to create a unique sliding box navigation.

The idea behind this tutorial is to make a box with the menu item slide out, while a thumbnail pops up. The submenu will slide to the left or to the right depending on which menu item we are hovering.

View DEMO