Ajax Updates |
- Showcase Standard Gallery Script using Mootools
- Lightweight Plotr Solutoire PlotKit
- Blackbird Javascript Logging Utility
- Sexy LightBox 2.3
- Highcharts – Interactive Charts for Web
| Showcase Standard Gallery Script using Mootools Posted: 02 Dec 2009 11:57 AM PST Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website. Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors. And even better, this solutions is very lightweight: The javascript file is only 24kb. * Let’s imagine you want to add a showcase of your last products, or even a showcase of one product on your homepage. Would you want to restrict it only to the users who have Flash enabled ? Just insert those lines of code in the header of your html files: 1. Include those lines in your header: <script src="scripts/mootools.v1.11.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script> 2. Then, include the css: <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" /> Second step: Prepare the meal. Unlike it’s ancestor Smooth Slideshow, JonDesign’s Smooth Gallery uses a standard compliant (and search engine friendly) way to define the slideshow items. So, add a code similar to this one (here I added 2 elements) to define the slideshow elements: <div id="myGallery"> <div class="imageElement"> <h3>Item 1 Title</h3> <p>Item 1 Description</p> <a href="mypage1.html" title="open image" class="open"></a> <img src="images/brugges2006/1.jpg" class="full" /> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 2 Title</h3> <p>Item 2 Description</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="images/brugges2006/2.jpg" class="full" /> <img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> </div> As you see, everything is contained in a container of id “myGallery” that contains several “imageElement” items. Each item is composed of four values: * The first value is enclosed in an h3 tag and defines the title, Please note that the order of the values inside an element is not important, but their classes and type are. You can fully customize how the values are fetched by setting some options.  Related Listings:
| |||||
| Lightweight Plotr Solutoire PlotKit Posted: 02 Dec 2009 11:20 AM PST Solutoire took part of PlotKit and wrote some parts himself, then made Plotr which does not need the Mochikit library to work with. It is also a lightweight charting framework with only 12kb. Some time ago I was looking for a charting framework for Prototype and I couldn't find it, just because there's none. So that's where it all started. I came across PlotKit, a well written piece of javascript that enables developers to use Canvas or SVG elements for rendering bar, line and pie charts. The only thing was that PlotKit needed the Mochikit library to work. So I took some parts of PlotKit and wrote some parts myself. The result is a lightweight charting framework (12kb!) named Plotr. It's released under the BSD license. Plotr makes use of HTML Canvas. Canvas elements are supported by: * Firefox 1.5+ Canvas HTML is emulated by ExplorerCanvas, a javascript that let's you handle VML the same way as HTML Canvas. I'm testing Plotr with the following browsers: Safari 2.0.4, Opera 9.10, Firefox 2.0.0.1, IE6 and IE7. If anyone can see the graph below using a browser different from the browser I'm testing with please let me know.
Download: http://plotr.googlecode.com/files/plotr-0.3.0.zip Related Listings:
| |||||
| Blackbird Javascript Logging Utility Posted: 02 Dec 2009 10:13 AM PST Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them. You might never use alert() again. You can add Blackbird to your page easily, simply download the files and place them on your server or in a local directory on your computer. And then Include blackbird.js and blackbird.css in your page. Blackbird is has been smoke-tested on Internet Explorer 6+, Firefox 2+, Safari 2+, Opera 9.5. Adding Blackbird to your page 1. Download the files and place them on your server or in a local directory on your computer. Your HTML source should look similar to the following code: <html> <head> <script type="text/javascript" src="/PATH/TO/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="/PATH/TO/blackbird.css" /> ... </head> Browser compatibility Blackbird is has been smoke-tested on the following browsers: * Internet Explorer 6+ log.toggle() The default configuration attaches the public API for Blackbird to the global variable log. It is possible to have conflicts with existing variable declarations, and it is possible to redefine the global variable log in other blocks of JavaScript. If you want to define a different variable for Blackbird, such as blackbird, replace the assignment for NAMESPACE with any other string. var NAMESPACE = ‘log’; can be replaced with: var NAMESPACE = ‘blackbird’; or: var NAMESPACE = ‘myCustomLog’; The global API will be affected by this change. If you choose to replace log with myCustomLog, then log.debug will become myCustomLog.debug. If you’re shipping code with logging statements, you might want to capture and cancel commands intended for Blackbird. The following code will do this: var log = { toggle: function() {}, move: function() {}, resize: function() {}, clear: function() {}, debug: function() {}, info: function() {}, warn: function() {}, error: function() {}, profile: function() {} }; |
