Best jQuery Popup Window Plugins & Tutorials with Demo

FrameWarp : jQuery plugin for displaying pages in a neat overlay

FrameWarp : jQuery plugin for displaying pages in a neat overlay

There is the option of using one of the numerous lightbox plugins to do this, but the plugin we will be creating in this tutorial has a lot of advantages over a generic lightbox script:

  • Lightweight – it is created specifically for showing pages, not images;
  • No UI, so the page feels like a dialog window;
  • The page can close itself, and can also send messages to the parent window;
  • Can optionally use a cache for faster subsequent page loads;
  • Uses a neat CSS animation with a JavaScript fallback.

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!

FBModal : Facebook like Modal Dialog jQuery plugin

FBModal : Facebook like Modal Dialog jQuery plugin

FBModal is a jQuery plugin that is the first Facebook replica modal dialog.FBModal provides a simple ways to invoke a modal dialog.

Here is an example of how you can use FBModal in your project. Simply include the latest jQuery library, the plugin file and the css file.Then call the fbmodal() function on a jQuery element and a modal dialog will be displayed using the contents of that element. It’s that simple.

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.

jQuery.event.move : Drag event plugin

jQuery.event.move : Drag event plugin

Custom events ‘movestart’, ‘move’ and ‘moveend’ for jQuery.Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.

Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making responsive interfaces. That said, movestart, move and moveend events deliberately echo dragstart, drag and dragend events, with one significant difference: where the drag event fires continuously whether you have moved the pointer or not, the move event fires only after the pointer has been moved.

Facebook like photo gallery with comments with jQuery and PHP

Facebook like photo gallery with comments with jQuery and PHP

Have you thought about own facebook-style photo gallry system with comments? I think – yes. Today I made up my mind to prepare it for you. Main idea – when we click at images – they popup (ajax) with bigger image at the left and comments section at the right. All images are in the database (mySQL). And, of course, we will use PHP to achieve our result. Also, our comment system will prevent accepting more than 1 comment per 10 mins (to avoid spam).

Pageguide.js : Interactive guide for web page using jQuery and CSS3

Pageguide.js : Interactive guide for web page using jQuery and CSS3

pageguide.js is an interactive visual guide to elements on web pages using jQuery and css3.Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

OmniWindow : extremely customizable modal plugin for jQuery

OmniWindow : extremely customizable modal plugin for jQuery

Extremely customizable modal window plugin for jQuery with 139 lines of code, written specially for programmers.If you want to use your own names for modal and overlay classes, you can set them as options.OmniWindow uses two events to show and hide windows. You can trigger this events any time you need.OmniWindow uses this event name as trigger value to emulate mouse click on overlay.OmniWindow uses this event name to subsribe to ESC keyup.