Ajax Updates |
- AD Gallery, gallery plugin for jQuery
- FireQuery – a collection of Firebug enhancements for jQuery
- ClearField : jQuery Plugin
- UITableFilter – jQuery Plugin
- Jquery Plugin – Feedback
| AD Gallery, gallery plugin for jQuery Posted: 09 Oct 2009 11:25 AM PDT A highly customizable gallery/showcase plugin for jQuery. * Choose effect, should the image slide in, or fade in? Browser compatibility The script has currently been tested in Firefox 3/Win, Firefox 3.5/Mac, IE6+7+8/Win, Chrome 2/Win, Safari 3/Win, Safari 4/Mac, Opera 9/Win, Opera 9/Mac. If you have seen it working correctly in some other browser, or on some other platform, please let me know. Example code Don’t worry, all of these options are optional. var galleries = $('.ad-gallery').adGallery({ loader_image: 'loader.gif', width: 600, // Width of the image, set to false and it will read the CSS width height: 400, // Height of the image, set to false and it will read the CSS height thumb_opacity: 0.7, // Opacity that the thumbs fades to/from, (1 removes fade effect) // Note that this effect combined with other effects might be resource intensive // and make animations lag start_at_index: 0, // Which image should be displayed at first? 0 is the first image animate_first_image: false, // Should first image just be displayed, or animated in? animation_speed: 400, // Which ever effect is used to switch images, how long should it take? display_next_and_prev: true, // Can you navigate by clicking on the left/right on the image? display_back_and_forward: true, // Are you allowed to scroll the thumb list? scroll_jump: 0, // If 0, it jumps the width of the container slideshow: { enable: true, autostart: true, speed: 5000, start_label: 'Start', stop_label: 'Stop', stop_on_scroll: true, // Should the slideshow stop if the user scrolls the thumb list? countdown_prefix: '(', // Wrap around the countdown countdown_sufix: ')', onStart: function() { // Do something wild when the slideshow starts }, onStop: function() { // Do something wild when the slideshow stops } }, effect: 'slide-hori', // or 'slide-vert', 'resize', 'fade', 'none' or false enable_keyboard_move: true, // Move to next/previous image with keyboard arrows? cycle: true, // If set to false, you can't go from the last image to the first, and vice versa // All callbacks has the AdGallery objects as 'this' reference callbacks: { // Executes right after the internal init, can be used to choose which images // you want to preload init: function() { // preloadAll uses recursion to preload each image right after one another this.preloadAll(); // Or, just preload the first three this.preloadImage(0); this.preloadImage(1); this.preloadImage(2); }, // This gets fired right after the new_image is fully visible afterImageVisible: function() { // For example, preload the next image var context = this; this.loading(true); this.preloadImage(this.current_index + 1, function() { // This function gets executed after the image has been loaded context.loading(false); } ); // Want slide effect for every other image? if(this.current_index % 2 == 0) { this.settings.effect = 'slide'; } else { this.settings.effect = 'fade'; } }, // This gets fired right before old_image is about to go away, and new_image // is about to come in beforeImageVisible: function(new_image, old_image) { // Do something wild! } } }); // Set image description some_img.data('ad-desc', 'This is my description!'); // Change effect on the fly galleries[0].settings.effect = 'fade'; HTML: <div class="ad-gallery"> <div class="ad-image-wrapper"> </div> <div class="ad-controls"> </div> <div class="ad-nav"> <div class="ad-thumbs"> <ul class="ad-thumb-list"> <li> <a href="images/1.jpg"> <img src="images/thumbs/t1.jpg" title="Title for 1.jpg"/> </a> </li> <li> <a href="images/2.jpg"> <img src="images/thumbs/t2.jpg" longdesc="Description of the image 2.jpg"/> </a> </li> </ul> </div> </div> </div> These are the only elements required for it to work. If you want, you can add all sorts of crazy elements inside those elements, but I would advice you not to put stuff into .ad-image-wrapper for the simple reason that it’s emptied on start up. You can alter the way it looks by editing the CSS file, or overriding the default CSS rules. You probably want some other image size than the one in the demo above, and the only thing you need to do for this is to add this pice of CSS. .ad-gallery { width: YOUR-IMAGE-WIDTHpx; } .ad-gallery .ad-image-wrapper { height: YOUR-IMAGE-HEIGHTpx; } Or you can specify it in the settings.width and settings.height. If you do that though, the gallery might flicker on page load, since it might take a while before that code runs, so I would suggest that you set it with CSS. If you want bigger thumbnails, the height of the thumb list adjusts itself to that, but you might want to position the arrows next to the list of your thumbs. You do that by adding this CSS and modifying to fit your needs. .ad-gallery .ad-back { left: -20px; width: 13px; background: url(your_back_button.png) no-repeat; } .ad-gallery .ad-forward { right: -20px; width: 13px; background: url(your_forward_button.png) no-repeat; } Animations // The first argument is the name of your animation, which you then set in // galleries[0].settings.effect // The second argument is the function that handles the animation and it takes // three arguments. The first is a jQuery object to the div that holds the image // element and the image description element of the image that should be displayed // The second is the direction, either 'left' or 'right' // The third is the jQuery object that holds the description // Your function should return an object like this: // {old_image: {}, new_image: {}, speed: 100, easing: 'swing'} // 'speed' and 'easing' are optional // 'old_image' and 'new_image' are sent to the jQuery animate-method // so use it just like you would use the $.animate-method // This function gets executed with the gallery instance as its context // so 'this' points to the gallery instance galleries[0].addAnimation('wild', function(img_container, direction, desc) { var current_left = parseInt(img_container.css('left'), 10); var current_top = parseInt(img_container.css('top'), 10); if(direction == 'left') { var old_image_left = '-'+ this.image_wrapper_width +'px'; img_container.css('left',this.image_wrapper_width +'px'); var old_image_top = '-'+ this.image_wrapper_height +'px'; img_container.css('top', this.image_wrapper_height +'px'); } else { var old_image_left = this.image_wrapper_width +'px'; img_container.css('left','-'+ this.image_wrapper_width +'px'); var old_image_top = this.image_wrapper_height +'px'; img_container.css('top', '-'+ this.image_wrapper_height +'px'); }; if(desc) { desc.css('bottom', '-'+ desc[0].offsetHeight +'px'); desc.animate({bottom: 0}, this.settings.animation_speed * 2); }; img_container.css('opacity', 0); return {old_image: {left: old_image_left, top: old_image_top, opacity: 0}, new_image: {left: current_left, top: current_top, opacity: 1}, easing: 'easeInBounce', speed: 2500}; } ); You can now add your own animation, by doing something like this.  Related Listings:
| |||||
| FireQuery – a collection of Firebug enhancements for jQuery Posted: 09 Oct 2009 10:59 AM PDT FireQuery is a Firefox addon integrated with Firebug. jQuery expressions are intelligently presented in Firebug Console and DOM inspector. jQuerify enables you to inject jQuery into any web page. Features: * jQuery expressions are intelligently presented in Firebug Console and DOM inspector Compatibility * v0.3 works with official Firebug 1.3 and official Firebug 1.4 (Firefox 2.0 – 3.5) Installation The best way is to install the addon from addons.mozilla.org or you can go wild and build this on your own. This extension may be insecure! So please don’t browse porn sites with this enabled. I still don’t fully understand Firefox extension security model. The reality is that I’m interacting with naked HTML page from privileged code which may be insecure. Good solution is to have dedicated Firefox profile for development and use it only for safe sites. If you want to install latest addon from sources, you need to build it. It should be simple, but make sure you have these tools on your paths: Build steps: git clone git://github.com/darwin/firequery.git cd firequery rake After that your XPI should be available in build/firequery-X.Y.xpi. You should be able to install XPI file into Firefox: File -> Open File … and browse for firequery-X.Y.xpi Related Listings:
| |||||
| Posted: 09 Oct 2009 10:39 AM PDT This plugin takes care of your input fields. Often used by opt-in input fields where the default value of the field is something like “Your e-mail address”. If you click the field the text disappears so that you can type your e-mail address. The plugin depends on the jQuery framework and is very simple to implement. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.clearfield.js"></script> Add this function somewhere on the page: $(document).ready(function() { $('.clearField').clearField(); }); Your input field might look like this: <input type="text" class="clearField" value="What's your name?" /> Setting: .clearFieldBlurred { color: #666; font-style: italic; } .clearFieldActive { color: #000; } You probably only need the .clearFieldBlurred class, style it to your needs! $(document).ready(function() { $('.clearField').clearField({ blurClass: 'myBlurredClass', activeClass: 'myActiveClass' }); }); Related Listings:
| |||||
| Posted: 09 Oct 2009 10:17 AM PDT A simple and easy to use jQuery plugin for filtering table rows. Options : * off : turns off table editing $(function() { var theTable = $('table.food_planner') theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){ $(this).prev().find(":checkbox").click() }); $("#filter").keyup(function() { $.uiTableFilter( theTable, this.value ); }) $('#filter-form').submit(function(){ theTable.find("tbody > tr:visible > td:eq(1)").mousedown(); return false; }).focus(); //Give focus to input field }); Related Listings:
| |||||
| Posted: 09 Oct 2009 09:51 AM PDT Feedback is a jQuery plugin that lets you send Feedback messages to a user after any event you choose. You can use it for custom error message handling, for example. So if you write some custom script to perform either a client or server-side validation, you can use Feedback to send an error message. Or, you can send informational messages. It uses the jQuery UI plugin to determine the default styles of the informational and error messages, so it is dependent on that plugin. It has properties that make it easy to position a feedback message next to an existing page element. For example, to place it to the right of an input field, just specify a property of right: true. Here's a sample implementation: $("#msg_btn").click(function() { $(this).feedback("This is an informational message!", {duration: 3000, right: true}); }); This example uses a button with an id of 'msg_btn'. When you click it, the info message appears to the right of the button and stays there for 3 seconds, then fades out. Property Default Value Valid Values Purpose This plugin depends on the jQuery UI, so you can use it with any page designs that take advantage of all the other jQuery UI components to have a consistent look. If you don't know how to use or configure jQuery UI, go to Themeroller for info. Here is an example implementation, which includes the appropriate stylesheet for the jQuery UI Lightness theme, the jQuery core, the jQuery UI core, and the plugin source: <link href="jquery/ui/css/ui-lightness/jquery-ui-1.7.1.custom.css" type="text/css" rel="stylesheet" /> <script src="jquery/core/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery/ui/jquery-ui-1.7.1.custom.min.js" type="text/javascript" ></script> <script src="jquery/plugins/feedback/jquery.feedback-1.0.js" type="text/javascript" ></script> Related Listings:
|
To style the field depending on it’s status, just add these stylesheets to your layout:| 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.