Ajax Updates |
| Posted: 23 Sep 2009 12:39 AM PDT I guess I needed to exercise the geek part of my brain after all that art recently. Last Friday and today I dove into upgrading CeeBox to 1.2. This release includes a bunch of fixes and uses the swfobject jquery plugin instead of the normal swfobject.js which allows it to be much smaller and cleaner. As a result, with the use of the jquery plugin and with the new minified version of ceebox.js it saves 13KB which is huge. The new version supports vimeo and daily motion along with all the others it did before. Also, it allows for flexible auto sizing of the modules (video or html) based on the browser window or you can set a static base size for either. There are also a bunch of little bug fixes and code cleanup. CeeBox may be based on a mashup of Thickbox and Videobox but most of the code is radically changed and I feel improved. You can download the new version and find more details at: CeeBox – Thickbox/videobox mashup for jquery. My next step with this is that I'd like to make a wordpress plugin version of ceebox. Not any time soon though. How To Install On Your Site 1. Firstly, you must be using the jQuery framework (one of the better frameworks in my opinion)* 2. Secondly, you will also need the swfobject jquery plugin which is used for embedding the flash video players.* 3. Thirdly, you will need to the ceebox.js and ceebox.css and the loading animation files (download CeeBox-1.3.1.zip). I have included a minified version of the ceebox.js (10KB) as well as the full uncompacted version (16KB). 4. Link all this javascript up with your site and have at it. *I have included all the dependent js files in the CeeBox 1.3.1 archive. However, you may want to check to make sure you are using the most current versions. How CeeBox Works Once the scripts are installed, no knowledge of javascript is required to use CeeBox. 1. Any link on a page can be automatically turned into a CeeBox overlay popup link by adding "ceebox" as a class to the link. 2. Add optional caption content to the Title attribute of the link. 3. Images automatically size themselves to fit the browser window 4. Flash videos and html pages also size themselves to fit the browser window; however, they can be set to use a static base size (see ceebox.js file) 5. Optional Parameters: Some modifications to the CeeBox functionality can be added by using the rel attribute on the link.** Displaying images Images can be displayed in an overlay popup by creating a link directly to an image file and adding the "ceebox" class to the tag. The tag's title attribute is used to display an optional caption. Optionally, Multiple images can be linked together with next/prev links by adding a shared gallery name to the rel attribute for each of the CeeBox image links on the page: i.e., you will need to add "gallery-flowers" (or whatever name you want) to the rel attribute for each of those links. Displaying a flash movie The most useful aspect of CeeBox is the ability to automatically embed the flash movie player of your choice by only linking to the page it is hosted on. CeeBox currently supports Google Video, YouTube, Metacafe, Vimeo, Dailymotion, iFilm and self hosted swf files.. Other players will load as an HTML page on an iFrame (see below) which sometimes works ok and sometimes fails. All you need to do is link to the YouTube (or Google Video, etc.) page for the movie you want to embed and add the "ceebox" class to the link — the CeeBox script will do the rest. Captions can be added using the title attribute. Individual swf files can also be embedded by linking directly to the file. Optionally, you can change the size of the overlay popup by adding width and height to the rel attribute: i.e., to create a 600×480 popup add rel="600 480″to the link tag. Displaying an HTML page using an iframe Entire html pages can be shown in an overlay popup simply by adding the "ceebox" class to the link tag. CeeBox uses an iframe in the overlay popup to display any external link, including any absolute links to your own site. Note, relational links are loaded as AJAX; you can override this by adding "iframe" to the rel attribute for the link. Optionally, you can change the size of the overlay popup by adding width and height to the rel attribute: i.e., to create a 600×480 popup add rel="600 480″ to the link tag. Displaying an HTML page using AJAX HTML pages on your own server can be loaded via AJAX. If the link url is a relational link, it will be loaded this way automatically; absolute links will be loaded as iframe unless otherwise specified by adding "ajax" to the rel attribute of the link. Note, if you add "ajax" to an external link you will get nothing as AJAX calls don't work to pages outside your own server. Displaying only a portion of a page via AJAX You can display only a select portion of a page (as long as it is a page located on the same server). To target a specific section of the page you must know the id tag of that section. The rel attribute for the targeted CeeBox link is then added as follows rel="ajax #idtagname". For instance, you might want to use this to display the content of a page ignoring navigation. Like the iframe version, you can change the size of the overlay popup by adding width and height to the rel attribute. The size can be added to any old place in the rel (i.e., rel="400 300 ajax #idtagname" or rel="ajax 400 300 #idtagname") as long as width precedes height. Modal popups HTML Popups (either iframe or AJAX) can be made to require a button press to proceed. This is useful for login popups or disclaimer text. To create a modal popup for an iframe page add modal to the rel attribute and add a onclick to the button with a "self.parent.cee_remove()" function. To create a modal popup for ajax add modal to the rel attribute and an onclick to the button with "cee_remove()". Demo: http://pedsurg.ucsf.edu/conditions–treatments/magnetic-mini-mover-procedure.aspx Download: http://catcubed.com/stuff/ceebox-1.3.1.zip Source: http://catcubed.com/tag/jquery/  Related Listings:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Posted: 23 Sep 2009 12:17 AM PDT As the web grows and becomes more dynamic (”Web 2.0″), more and more websites have user-generated content and boast tools to let users sumbit text, images, videos, and more, providing content for entire web networks. Most of the time, people submit photos straight from their camera because they don’t have photo editing programs or they don’t know how to use them. This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful too for any site that provides image hosting, for example. Features: * NEW! From simple to advanced: In our first version of UvumiTools Crop, we bragged about how simple and easy it was, but the community wanted more advanced functionality. It was too simple and lacked some features other cropping tools offered. We listened to you and started work on a more sophisticated version. But we also like having the option of simplicity. So we decided that any new advanced feature would be optional and can be switched on or off easily. Now, you can configure the cropper to be as simple as before, or you can turn it into one of the most advanced free image cropping tools available. * Set minimum sizes: If you know the thumbnails on your website will be 120*90 pixels, just set those values as minimums, and your users won’t be able to select any smaller area than this. Why? Because if a smaller area is submitted, you have three potential outcomes: o The cropped image may not fill containers designed for a specific size. o The server script will automatically expand the area before cropping to match the minimum size, surprising the user with a thumbnail not matching what was actually selected. o The server script will crop the image to this smaller size first, then resize the thumb by stretching it to the minimum size, resulting in image quality loss, especially if the user selected a very small area. By defining a minimum size, you can avoid these problems. * Keep aspect ratio (or not): If you want all the thumbnails on your website to be squared or 4:3 and nothing else, you can lock the aspect ratio to the dimensions you specified as minimums (see above). The selection’s height and width will grow and shrink together, maintaining proportions. NEW: Now you can disable the forced aspect ratio option, but users can still maintain it on demand by holding the Shift key when resizing. * Real time preview: You can set an element of your document to render a preview of the thumbnail. It might not look as good as an actual resampled image, but it definitely gives your users a good idea of what the resulting image will look like. NEW: Now the preview can be displayed directly over the image instead of inside an element. The preview will be displayed in a small box which follows the selection. No need for reserved space in the document anymore. You can still use the old fashioned way if you want. * Support HTML resizing: If the image has been resized to fit in the document, with * Callback function: This feature is very important, because without it this tool would be useless. Making selections on top of a image is fun, but if you can’t do anything with it, what’s the point? Once you’ve created a selection, you must communicate the coordinates to your server-side script so it can perform the actual crop. It will need need two pieces of data: position and dimensions. That’s why the cropper has a callback function, fired after every drag on the selection. By default, this function does absolutly nothing, but you can set it do anything when you initialize the script. The callback function recieves four arguments: top, left, width, height. It’s up to you to grab those values, and put them in a form to submit to the server-side script. The demo shows how to do that. Ideally you would put them into hidden inputs, with another one referencing the image file to be cropped. * Can be toggled on and off: UvumiTools Crop offers tools to completly remove itself from the document (ideal once the the coordinates have been submited to the server) or to hide it so you can show it again later, without regenerating a new one. Good for memory management. * Modify style with CSS: Style is not hard-coded–you can modify the mask’s color, the selection’s border color, its thickness and style, with basic CSS. Use the downloadable sample to get started. Some important properties are overwritten by javscript to ensure the script will work, but they don’t affect the way it looks. There isn’t much you want to modifiy beside the mask and the border colors anyway. * Fast, even on slow computers: This one is for advanced CSS users: the other cropping scripts I’ve seen use a four-DIVs trick to display a mask around the selection. And that’s how we initially coded ours–Everytime the selection is moved or resized we had to recalculate the positions and dimentions of the four Div elements. That meant 4 css properties for each div, except the first one which always stayed in the top left corner. But that’s still 14 properties to calculate and update on every mouse move. If you add the preview at the same time, it can slow things down a bit. Then we found a blog article about the little-known CSS cliping property. It almost does what this mask does: you specify four coordinates within an element (top, right, bottom, left) and it only renders this area, everything else is masked out. It took us a while to figure how to use it in the cropper context, because at first it was doing the opposite of what we wanted: it was rendering the mask only inside the selection, not outside. So in the end we duplicated the image, and superimposed everything in four layers from bottom to top: original image, mask, image clone, selection. Then we applied the clipping property on the image clone, while keeping the mask as a single div covering the original. Now when modifiying the selection, all we do is update the clip property on the image clone–just one CSS property to update instead of fourteen. * Change image inside the Cropper on the fly: We got several questions in the forum asking how to change the image source without breaking the cropper (the image would update but the cropper would still “think” it’s dealing with the old one). We never really thought about this possibility and the cropper was not designed support it. With a little bit of extra work we have been able to whip up a special function to take car of this. Just pass the url to the new image, and that’s it. * New! From 0 to 8 resizing handles: You can decide which resizing handles should be displayed. You can have only one in a corner, like the old school UvumiCrop, or you can have one in each corner, or one on each side or all of them or even weird combinations or three or five handles. It’s in your hands now, just pass an array of handles to the script and it will only generate those. * New! Maximize selection on double-click: You already know you want to select the biggest area possible? No problem, just double click in the middle of the selection and it will automatically expand to its maximum size. If there is no proportion constraint, it will simply select the entire image, else it will create the biggest selection with those proportions that can fit in the image. * New! Edit the selection dimensions and position with text inputs: UvumiTools Crop now offers a multi-function box which follows the selection on the image. This box contains four text inputs to edit the top, left, width and height values of the selection. You can see those values being updated automatically as you move or resize the selection. But it also works the other way: you can modify those values and see the selection being updated. The script makes sure the typed in values are valid, and maintains the aspect ratio if necessary. This is useful for advanced users who know exactly what size they want the image to be. This box can be styled with CSS. * NEW! BUILT-IN SERVER SIDE CROPPING SCRIPT: Awww yeah. UvumiTools Crop used to come with a PHP sample script to crop the image. But some of you had some trouble to make it work with the client side cropper. Now you get two PHP scripts which can be called directly from the javascript object. One script generates the thumb and returns the image for direct download, while the other one, for advanced users, saves it into a designated folder. Using those scripts is as simple as calling the cropSave() or cropDownload() functions. No more missing parameters or wrong input names, everything is taken care of. All you need to do is make sure the image path in the script matches the one on you site, that’s all. You can even set a callback function for the saving script, to execute once the thumbnail has been generated (advanced users). Even better, you can add a Download and Save button directly into the coordinate box described in the previous point, it just takes one option. Oh, the cropping script handles file formats and keep trnasparency in GIF and PNG files. *Requires GD Library for PHP Requirements * A server-side script: Unlike other UvumiTools scripts which are mostly client-side only tools, UvumiTools Crop must be paired with a server-side script that will actually be able to so something with the coordinates. We are now providing two sample PHP scripts to crop images on the server side. They are available in the downloads section below. * Mootools 1.2: To use this plugin you’ll need Mootools 1.2, but if you are already using another javascript framework like Prototype or JQuery, you may have to decide which one you want to keep because those frameworks were not designed to work together, and they ofen conflict with each other. Mootools might be a little heavy for only one plugin, but it’s one of the best frameworks around, so it’s a good occasion to start learning. And yes, you actually do need version 1.2 of Mootools. If you are already using a previous version of Mootools then the Crop will not work unless you upgrade. Sure, upgrading is a slight hassle, but trust us, it’s worth it in the long run. * Mootools Dependencies: If your website already contains some Mootools 1.2 stuff (from this wesite or elsewhere), then you’re stoked because you can use a single Mootools library for everything. All you’ll need is the UvumiTools Crop script, and to make sure your library contains the following classes: How To Initialization new uvumiCropper(image,options); Arguments * Image: Can be the ID of an image HTML element, or the element it-self, if grabbed the mootools way with the $() function. If you don’t understand what it means, just pass the image ID. * Options: an object that will allow you to modify some properties of the script. Options are optional (of course). If you just want to keep default value, you don’t need this second parameter. Options * maskOpacity: Number between 0 and 1, defining the opacity of the masked overlayed on top of the image. Default is 0.5. To change its color, use the attached CSS file. If set to 0 or false, the mask will simply not be generated at all. * maskClassName: The css class you want to be applied to the mask, to modify its style with css. Default is cropperMask which corresponds to the name used in the sample CSS file that comes with this plugin. * moverClassName: The css class you want to be applied to the middle area that lets you drag the cropping region. You shouldn’t have to modify this style. Default is cropperMove which corresponds to the name used in the sample CSS file that comes with this plugin. * resizerClassName: The css class you want to be applied to the outter area of cropping region. If you want to overrride the default red dashed border, this is the class you will alter. Default is cropperResize which corresponds to the name used in the sample CSS file that comes with this plugin. * wrapperClassName: The css class you want to be applied to the image wrapper. You shouldn’t have to modify this style. Default is cropperWrapper which corresponds to the name used in the sample CSS file that comes with this plugin. * handleClassName: Each handle receives this css class. this allows you to set common style for every hange. Default is cropperHandle. Then each handle receives extra classes corresponding to its possition: top, left, bottom, right. A corner will have two of those, while the sides one will have only one. Using those class you can set various background images and cursors to each handle. * coordinatesClassName: The coordinate input, the preview, and the save/download buttons can be displayed in a box which follows the selection over the image. This box can be styled and so can be its content (inputs, labels, buttons) thanks to this css class. Default is cropperCoordinates. See the attached css file to learn how to style the box elements. * mini: An object with two values, x and y, defining the size of the thumbnail. These coordinates are used to generate the preview and as minimum size for the cropping region. Default is {x:80,y:60}. * handles: An array of variable size. Each element correspond to a handle. An element can be ‘top’, ‘left’, ‘right’, ‘bottom’ or an array containing two of those. ‘top’ will generate a handle in the middle of the top segement, ‘left’ in the middle of the left segment and the ['top','left'] array will generate a handle in the top left corner. Default is [ ['top', 'left'], ‘top’, ['top', 'right'], ‘right’, ‘left’, ['bottom', 'left'], ‘bottom’, ['bottom', 'right'] ], which represents all the possible handles. If an empty array or false is passed, no handle will be generated, making the selection movable but not resizable. * onComplete: Event function fired when when you stop dragging/resizing. recieves four parameters: top, left, width, height (of the selection). By default, it’s empty, but you can write a function to update a form that contains one hidden input for each coordinate (or one input with a json string, it’s up to you). Then by submitting this form to a server script, you should be able to crop your image on the back-end (eg with GD library in PHP, just as we do in the sample script you can download below). * keepRatio: Boolean value, if the width/height ratio of the selection should be maintained or not. Default is false. When disabled, user can still lock the selection aspect ration by holding the Shift key while resizing. the user might not guess this feature, it will be your job to write some instructions. * doubleClick: by default, when the user double-clicks the selection, it expands to its maximum size. While this is a nice feature, we hought you might want to disable it for some reason. Default is true. * handleSize: Size of the handles in pixels. Default is 16, even if the images we used are 12 pixels big, because we thought it would be more user friendly to have a bigger draggable area. * coordinates: If the coordinate manual adjustment inputs should be displayed or not. Default is false. * preview: if you want to display a preview of the cropped image, you must specify a target container by its ID or true. Default is false, which means no preview will be generated. If anything is passed, the script will try to select the element with the corresponding ID. If it fails, it will display the preview in the coordinates box. In other words, if you only pass ‘true’ instead of an id. * downloadButton: If set to true, a button is added to the coordinates box to download the cropped image. Default is false. If a string is passed instead of true, it will be used as text for the button. If you pass an object, it will be passed as extra parameters to the download request. * saveButton: If set to true, a button is added to the coordinates box to save the cropped image on the server. Default is false. If a string is passed instead of true, it will be used as text for the button. If you pass an object, it will be passed as extra parameters to the save request. * cancelButton: If set to true, a button is added to the coordinates box to destroy the cropper. Default is false. If a string is passed instead of true, it will be used as text for the button. * adopt: You want to put something else than a preview or a submit button in the toolbox? it’s possible: if you set this option with a string, a reference to an element or a collection of element, it will be injected in the box. * coordinatesOpacity: This coordinates box might be annoying when you are dragging the selection. That’s why we offer to reduce it’s opacity when not hovered. Default is 0.25 and it will automatically raise to 1 when the mouse hovers the box. Set it to false or 1 to disable this effect and leave the box allways fully visible. * serverScriptSave: The cropSave() performs an ajax request on a server side script. This script must be located, relatively to the document or absolutely thanks to this option. Default is ’save-thumb.php’, which corresponds to the downloadable script. * serverScriptDownload: The cropDownload() function will call the download script. This script must be located, relatively to the document or absolutely thanks to this option. Default is ‘download-thumb.php’, which corresponds to the downloadable script. * parameters: If you already know which extra parameter you want to submit with the request when you create the cropper (an pointer to an image id in the database?), you can pass an object of parameter-value here. Default is an empty object{}. You can add parameters later thanks to a public function described next. * onRequestFail: This callback function is triggered when the save request fails, in case of unexpected error. By default the function just alerts a warning message. * onCropFail: This callback function is triggered when the save request fails on an expected error. By default the function just alerts a type of error. * onCropSuccess: This callback function is triggered when the save request is successful. By default the function just replaces the image with the new thumbnail. It will be your job to modify this function (and the server side script) to fit into your website architecture. * onDestroyed: Event function fired when the cropper is destroyed. Implementation First, you simply import the files provided in the zip archive into your document. While you can insert < script > tags anywhere, we recommend you put them inside the tag:
Then you must prepare the HTML code. You need one image. Let's just give it the id "myImage".
"my_image.jpg" is just a random image file name, we just assume it exists. Then we initialize the cropper object with this image's ID. Don't forget to wrap the ID with quotes when passing it to the object (double or single, doesn't matter);
In the end, if we put everything together. Mootools requires a strict Doctype to work properly. Use something like this:
Demo: http://uvumitools.com/crop.html Download: http://www.ziddu.com/download/6612347/crop.zip.html Source: http://uvumitools.com/crop.html Related Listings:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Moving Boxes using jQuery Plugin Posted: 22 Sep 2009 10:19 PM PDT We've been down the jQuery "sliders" path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider. Many of the concepts presented in those tutorials are the same with this slider, so I'm not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun! UPDATED Features: * Issue with double clicking fixed. Next animation can only start when current animation is complete. UPDATED Feb 17, 2009 (Noah Hendrix): * Keyboard support added, arrow keys, spacebar, and enter key * Code cleaned up, number of panels and initial widths/sizes are no longer hard coded, so easier to build upon * Clicking on non-active left or right panels also triggers animation Demo: http://css-tricks.com/examples/MovingBoxes/ Download: http://css-tricks.com/examples/MovingBoxes.zip Source: http://css-tricks.com/moving-boxes/ 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.