Ajax Updates |
- prettyPhoto using jQuery Plugin
- NyroModal : jQuery Plugin
- jQuery Flot, Plots, Canvas, Charts
- DamnIT – JS error notification
| prettyPhoto using jQuery Plugin Posted: 05 Sep 2009 10:17 AM PDT prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)! Usage: First include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.
Then, initialize prettyPhoto. Put the following code before the closing tag of your body ()
And...you're set! To customize prettyPhoto, you can pass the following parameters
Version 2.5 introduced an easy to use API. You can now open prettyPhoto from anywere. The public API functions are the following
You can also open galleries using the API, just pass arrays to the open function.
You can now open prettyPhoto from Flash or launch is from anywhere, anytime! PcbtalkRapidxHTML - You Design We CodeAre My Sites Up? Demo: Download: Source:  Related Listings:
 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Posted: 05 Sep 2009 09:59 AM PDT Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design. The big problem I experienced with every plugin I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not fully true. The default CSS works fine, but most of time it’s a mix between required elements and optional. That mean you have to be very careful when editing it. The other problem is the animation. That’s the worst point. I never found one plugin allowing to redefine easily the animations. I tried to solve these problems with my plugin. I documented everything possible. The default CSS contains only optional rules. Without it, the plugin will works perfectly —but will also looks very sad. Regarding the animations, you can simply redefine them from A to Z. Thanks to the useful jQuery function like animate, fadeTo or the future enchant, it’s pretty simple. Moreover, I added the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need. Features * Ajax Call * Ajax Call with targeting content * Ajax call can change the modal size * Single Image * Images Gallery with arrow navigating * Gallery with any kind of content * Form * Form in iframe * Form with targeting content * Form with file upload * Form with file upload with targeting content * Dom Element * Manual Call * Iframe * Error handling * Modal will never goes outside the view port * Esc key to close the window * Customizable animation * Customizable look * Modal title * Ability to block only one element * W3C valid HTML (Transitionnal) Usage The plugin provide some function to work with it: * nyroModal(); is the basic function to set the click or submit function. To add the nyroModal functionnality to all links containing in #container, you’ll do:
Pretty long, right? As all jQuery plugin, the chain is not broken. That mean you can use it like all other jQuery functions. You can also set the settings as an object paramter to overwrite the default parameter. * nyroModalManual(); will execute the same action like a click in a real link. You can simulate an user click or create your modal content. See demos to better understand. * $.nyroModalSettings(settings); could be used to change the default settings if no modal are started or the current settings if a modal is currently shown. For example, it will be pretty useful to change the modal size or background color from an Ajax request. If you call this function with the width, height, and/or bgColor parameters while the modal is already shown, the related animation function will be called. * $.nyroModalRemove(); will simply remove the modal. Could be useful if you need to close after a time or something else. When using the gallery modal, you can also use these functions: * $.nyroModalNext(); Go to the next image. Return the link which opened the image if successful or false if nothing was done * $.nyroModalPrev(); Go to the previous image. Return the link which opened the image if successful or false if nothing was done When you open a modal using an Ajax request, the scripts included in the loaded page are executed folowing these rules: * If the modal is a targeting content, only the scripts inside this element are executed * If the modal isn't targeting: o All the inline script are executed o The scripts with a src attribute to load a javascript file are loaded only if they are the attribute rel="forceLoad". This avoid the reload of jQuery for example If you need to investigate what's going on with your modal, you could enable the debug. But sometimes, it's not enough and you want more. You could overwrite the function nyroModalDebug(msg, elts, settings); to do what ever you want! Settings You have 3 different ways to modify the settings: 1. Directly modify $.fn.nyroModal.settings. These settings will be used by default for every modal which will be open 2. Set at first parameter to the nyroModal(); function. Example: $('a.nyroModal').nyroModal({bgColor: '#ffffff'}); 3. Use the $.nyroModalSettings(settings); function Here is the complete usable settings list, with their default values.
Demo: http://nyromodal.nyrodev.com/ Download: http://nyromodal.googlecode.com/files/nyroModal-1.5.2.zip Source: http://nyromodal.nyrodev.com/ Related Listings:
 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| jQuery Flot, Plots, Canvas, Charts Posted: 05 Sep 2009 09:32 AM PDT Fetch and format the data to be processed by Flot to generate the bar chart.  Here is the Javascript using jQuery that fetch and format the data to be processed by Flot.
Sample JSON data
PHP source code Here is the little script I use to grab informations from my old fashioned eXTReMe tracking stats.
Demo: http://blog.shinylittlething.com/workshop/flot_intro/ Source: http://blog.shinylittlething.com/workshop/flot_intro/ Related Listings:
 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| DamnIT – JS error notification Posted: 04 Sep 2009 08:19 AM PDT DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages. Setting up DamnIT with JavaScriptMVC DamnIT is available as JavaScriptMVC’s error plugin. Using JavaScriptMVC’s error plugin lets you easily compress your application with the DamnIT library. To load DamnIT with JavaScriptMVC, all you have to do is include the error plugin. Setup steps: 1. Obtain an application key 2. Include the error plugin Obtaining an application key: 1. Sign up at damnit.jupiterit.com. 2. Click the link in the confirmation email. 3. Get your Application Key on the setup instructions page. Including the error plugin: Assuming you’ve correctly set up your JavaScriptMVC application, the following code includes the error plugin and defines your application key. Make sure you replace _APPLICATION_KEY_ with your application key. APPLICATION_KEY=’_APPLICATION_KEY_’; include.plugins(’error’); Setting up the error plugin The error plugin only reports errors in JavaScriptMVC’s production mode. Setting up DamnIT as a standalone script Setup steps: 1. Obtain an application key 2. Load the DamnIT script Obtaining an application key: 1. Sign up at damnit.jupiterit.com. 2. Click the link in the confirmation email. 3. Get your Application Key on the setup instructions page. Loading the DamnIT script: Insert the following code into your html pages right before the ending body tag (). Replace _APPLICATION_KEY_ with your application key.
Demo: http://javascriptmvc.googlecode.com/files/damnit_demo.html Download: http://javascriptmvc.googlecode.com/files/damnit_demo.html Source: https://damnit.jupiterit.com/home/documentation Related Listings:
 |
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.