FancyBox - Fancy jQuery Lightbox Alternative. What's new Version 2 is completely rewritten with new features and updated graphics.
Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (shadows, round corners) Updated plugin options (not compatible with previous versions) Now licensed under Creative Commons Attribution-NonCommercial 3.0 Instructions Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag).
Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. Attach fancyBox when the document is loaded. jQuery PageSlide Demo by Scott Robbin. Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. Advertisement a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element by Scott Robbin Download Backstretch Now link to a hosted copy on cdnjs.com or download the entire project, including examples.
Do you see the full-sized background image on this page? In a nutshell, that's what Backstretch does. It will stretch any image to fit the page or block-level element, and will automatically resize as the window or element size changes. Cloudfour/hideShowPassword. Magnific Popup: Responsive jQuery Lightbox Plugin. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js).
Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS.
Building an interactive map with jQuery instead of Flash - New M. At the end of last year, we launched a website for Coastal & Marine Sciences in North Carolina with one of our Agency Partners, Liaison Design Group.
As a part of the project, the website was supposed to have an interactive map that showed some information and the location of the various Marine Science outposts across the state. The locations would be represented by dots and upon clicking one an info box would pop up and display information about the location. To make the map as engaging as possible, there needed to be smooth animations and crisp graphics. Traditionally such a project would require the use of Flash. We try to avoid Flash whenever possible, so I began to consider how the project could be accomplished in jQuery. There were a number of advantages of using jQuery over Flash for the project: Updates were Easy: Since the map was going to be a visual representation of html, it would be easy to update the data with our Content Management Software. The Five Locations. jQuery.ScrollTo. jQuery.ScrollTo by Ariel Flesler Links Table of contents (try these) Ways to specify the target Click an option, to see it in action Options The examples shown here, are summarized for brevity, check the source for real code.
Navigation menus have really important role in any website.
For big sites full with a lot of pages and articles, drop down menus and tabs are popular because they can make it a lot more easier to navigate and move through site, also you can save space on website displaying content on dynamic tabs. Also if you want to create a navigation menu, that really stands out of the crowd, jQuery could be the right choice to choose offering bunch of customizable options. That’s why I present to You 36 really good jquery navigation menu examples for every need. 1.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development.
jQuery Quicksand plugin. Quicksand Reorder and filter items with a nice shuffling animation.
Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Ketchup Plugin. Ketchup is a small (3.4KB minified & gzipped) jQuery Plugin that helps you to validate your forms.
Out of the box it has 18 basic validations and a bubble like style. But truly this Plugin wants to be hacked to fit your needs. Easily write your own validations and overwrite/extend the default behaviour. Bubbles are not for everyone... Default Behavior If you like the style of the bubbles and all validations you need are already included you can get this Plugin up and running like so: Your HTML Header Include the default stylesheet (located in .