Ajax Updates |
- Mapbox – Zoomable jQuery Map Plugin
- Autosave – Flexible Jquery Plugin
- CJ Image Video Previewer
- jQuery Before-After Plugin
| Mapbox – Zoomable jQuery Map Plugin Posted: 27 Dec 2009 11:50 AM PST The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from being able to zoom in and pan to get a better view. The code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/js/mousewheel.js"></script> <script type="text/javascript" src="/js/map.js"></script> Then, some CSS. This is how I styled the map in this example, though you may use any rules you like (the Middle Earth map has an odd proportion): <style type="text/css"> #viewport { width: 469px; height: 400px; cursor: move; margin: 20px auto; overflow: hidden; /*keep map contents from spilling over if JS is disabled*/ } </style> Then, some HTML. The structure of your map must be almost exactly like this. Every layer DIV must have a height and width set to it. I did it inline in this example only for ease of understanding. IMG tags must be used for every layer except the starting one, which you should notice is structured much differently than the other layers. You currently must include the .mapcontent class on the inner layers, even if you aren’t planning to add additional content to the map: <div id="viewport"> <div style="background: url(images/layer1.png) no-repeat; width: 469px; height: 400px;"> <!--top level map content goes here--> </div> <div style="height: 1097px; width: 1286px;"> <img src="images/layer2.jpg" alt="" /> <div class="mapcontent"> <!--map content goes here--> </div> </div> <div style="height: 1794px; width: 2104px;"> <img src="images/layer3.jpg" alt="" /> <div class="mapcontent"> <!--map content goes here--> </div> </div> <div style="height: 2492px; width: 2922px;"> <img src="images/layer4.jpg" alt="" /> <div class="mapcontent"> <!--map content goes here--> </div> </div> </div> The jQuery: <script type="text/javascript"> $(document).ready(function() { $("#viewport").mapbox({mousewheel: true}); }); </script> That is all! (requires mousewheel plugin: http://plugins.jquery.com/project/mousewheel). If you don’t require the mousewheel, the map may be created simply as $(”#viewport”).map(). Of course, there are some more advanced settings. Here are all of the settings and their defaults: <script type="text/javascript"> $("#viewport").mapbox({ zoom: true,//is the map zoomable? pan: true,//is the map draggable? defaultLayer: 0,//this is an array type of number (zero being the first layer), which indicates which layer is shown by default layerSplit: 4,//this is how many zoom levels each layer has. The higher this number is, the smoother the transition will be between each layer mapContent: ".mapcontent",//this is the class that goes on the layer which holds any content you will manually place onto the map defaultX: null,//if not set, the map will be centered on the x-axis. If set, the left side of the map will be here defaultY: null,//defaultY is the same as defaultX, but for the y-axis callBefore: function(layer, xcoord, ycoord, viewport) {},//callback which happens when the left mouse button is held down, and gives access to the layer node, the x and y coordinates, and the viewport node. callAfter: function(layer, xcoord, ycoord, viewport) {},//callback which happens when the left mouse button is released beforeZoom: function(layer, xcoord, ycoord, viewport) {},//callback which occurs before the map zooms in either direction. afterZoom: function(layer, xcoord, ycoord, viewport) {},//callback which occurs after the map zooms in either direction. mousewheel: false //false by default only because it requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel } ) </script> In addition to the settings, there are some methods that may be passed to any map once it has been created: <script type="text/javascript"> $("#viewport").mapbox("zoom");//zooms in 1 level (determined by layerSplit option) $("#viewport").mapbox("zoom", 2);//zooms in 2 levels $("#viewport").mapbox("back");//zooms out 1 level $("#viewport").mapbox("back", 2);//zooms out 2 levels $("#viewport").mapbox("zoomTo", 2);//zooms to the default size of the third layer (0 being the first) $("#viewport").mapbox("left");//move the current layer left 10 pixels $("#viewport").mapbox("right");//move the current layer right 10 pixels $("#viewport").mapbox("up");//move the current layer up 10 pixels $("#viewport").mapbox("down");//move the current layer down 10 pixels $("#viewport").mapbox("left", 20);//move the current layer left 20 pixels $("#viewport").mapbox("right", 20);//move the current layer right 20 pixels $("#viewport").mapbox("up", 20);//move the current layer up 20 pixels $("#viewport").mapbox("down", 20);//move the current layer down 20 pixels $("#viewport").mapbox("center");//centers current layer $("#viewport").mapbox("center", { x: 200, y: 400 });//centers current layer at positions 200px, 400px on the x and y axis </script> Here’s an example using some of these methods to implement a control panel for the map: jQuery(document).ready(function() { $("#viewport2").mapbox({ mousewheel: true, layerSplit: 8//smoother transition for mousewheel }); jQuery(".map-control a").click(function() {//control panel var viewport = $("#viewport2"); //this.className is same as method to be called if(this.className == "zoom" || this.className == "back") { viewport.mapbox(this.className, 2);//step twice } else { viewport.mapbox(this.className); } return false; }); })  Related Listings:
|
| Autosave – Flexible Jquery Plugin Posted: 27 Dec 2009 11:35 AM PST Autosave is a flexible autosave plugin for jQuery. If yo want to autosave a form use this simple code. Features * Send entire form when one element changes $("input.autosave").autosave({ url: url, // Defaults to parent form url or window.location.href method: "post", // Defaults to parent form url or get grouped: true, // Defaults to false. States whether all "input.autosave" should be sent in the request or only the one it was triggered upon success: function(data) { console.log(data); }, dataType: "json", // Defaults to JSON, but can be XML, HTML and so on send: function() { // Do stuff while we wait for the ajax response, defaults to doing nothing console.log("Saving"); }, error: function(xmlReq, text, errorThrown) { // Handler if the ajax request fails, defaults to console.log-ing the ajax request scope console.log(text); } }); // Submits entire form each time one of the // elements are changed $("form#myForm").autosave(); Todo: Related Listings:
|
| Posted: 27 Dec 2009 08:05 AM PST CJ Image Video Previewer is meant to mimic the video preview boxes you see on many Video sites. It displays a block that contains an image thumbnail and when the user moves their cursor of the box, it dynamically loads and then displays a group of images in sequence. Kind of like a flip-book. This is an excellent way to provide an preview of the video, without the user actually downloading the video file. The plugin has a few options you can pass to it. You can set the delay amount and determine if you want to show the “image loading” progress bar. I’m currently in the middle of re-writing my blog site, so I’m not going to bother posting detailed instructions just yet. Just take a look at the demo source. I’ve provided three different examples that should help you figure things out. If not, give me a shout out below. Enjoy! Related Listings:
|
| Posted: 27 Dec 2009 07:19 AM PST To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here's the result:
Pretty slick no? The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page. * Slick effect, no Flash needed How to Use First, your before and after images must be the same size. Each image must be inside its own div, and both of those within a containing div which must have an ID. See this example. <div id="container"> <div><img alt="before" src="before.jpg" width="600" height="366" /></div> <div><img alt="after" src="after.jpg" width="600" height="366" /></div> </div> All images *MUST* have the width and height declared otherwise the plugin won't work in Safari, Chrome, and any other webkit-based browsers. To use the plugin you'll need to have a copy of jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.beforeafter.js"></script> <script type="text/javascript"> $(function(){ $('#container').beforeAfter(); }); </script> That's it! You can apply the before/after plugin to any number of elements on a page. The following options are configurable: * animateIntro – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default false) Options are added when calling the script: $('#container').beforeAfter({ animateIntro : true, introDelay : 2000, introDuration : 500, showFullLinks : false }); 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.