Best Javascript Image Galleries!!!!

Best Javascript Image Galleries!!!!

There are a large number of Flash image galleries but sometimes Flash is not equired or cant be used so we turn to Javascript and CSS. Here is a roundup of some of the better Javascript and Ajax based solutions to our gallery requirements …

Modified Hoverbox Image Gallery - This following is a modified version of Nathan’s incredible Hoverbox Image Gallery. This version uses a single image for thumbnail/larger view and partially supports :active and :focus states for keyboard only users


FrogJS Javascript Gallery - FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries
slideViewer - slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

(E)2 Photo Gallery Made With Mootools - (E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP

jqGalViewIII - Here we have yet another photo / image gallery, except at this point it is only a proof of concept. I see a ton of photo galleries in Flash and see a lot of effects that just can’t be done in JavaScript, but a ton of effects that can be achieved

Zenphoto - Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense

Imago - Imago is a small, simple and easy to use Ajax Image Gallery. Its plain JavaScript (using mootools) and uses no server side scripting

Hope you find these links useful.

How to Create a Ajax Based Style Switcher?

Unobtrusive Degradable Ajax Style Sheet Switcher!

Boy are you in for treat today ‘cause we’re gonna have a whole lotta Ajaxifida Unobtrucitosity CSS swappin’ Fun!

Okay are you really kidding? Nope. I’ve even impressed myself on this one. Unfortunately, I don’t have much time to tell you the ins and outs of what I actually did to get this to work. We’re talking JavaScript, CSS, PHP...Ajax. But don’t worry about that. I’ve always believed that a good A.P.I. is an invisible A.P.I… and this I felt I achieved. The only thing you need to know is how it works and what to do.

What I did to achieve this was used server-side cookies instead of JavaScript cookies. Hence, PHP. However this isn’t a “PHP style switcher” – which is where Ajax comes in. For the extreme technical folks, no, there is no xml involved here, or even a callback response. I only say Ajax because everyone knows what ‘it’ means. With that said, it’s the Ajax that sets the cookies ‘on the fly’. Got it? Awesome!

Continue Reading

How To Use Ajax and Flash together?

Aflaxtm stands for Asynchronous Flash and XML. Defined simply, Aflax is a development methodology which combines Ajax and Flash to create more dynamic web based applications.

Developed by Paul Colton, the Aflax technology is available as a library that enables developers to use JavaScript to fully utilize all of the features of Adobe's Flash runtime -- including graphics, networking, video and camera support.

Continue Reading The Library

How to : Make SlideShows using Ajax!!!!

Introduction

I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless.

The idea came to me because I wanted a lightweight slideshow based on HTML, CSS and JavaScript, but I also wanted to separate the data of each page from the actual code that presents it. Therefore, I decided to move the data into an XML file and then use AJAX to retrieve it. The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to).

Continue Reading Further

How To: Upload Files in Java using Ajax

Introduction

Browser-based file uploads, in particular those involving the HTML <input type="file"> tag, have always been rather lacking. As I am sure most of you are aware, uploading files exceeding 10MB often causes a very poor user experience. Once a user submits the file, the browser will appear to be inactive while it attempts to upload the file to the server.

While this happening in the background, many impatient users would start to assume that the server is "hanging" and would try to submit the file again. This of course, only helps to make matters worse.

In an attempt to make uploading of files more user-friendly, many sites display an indeterminate progress animation (such as a rotating icon) once the user submits the file. Although this technique may be useful in keeping the user distracted while the upload being submitted to the server, it offers very little information on the status of the file upload.

Another attempt at solving the problem is to implement an applet that uploads the file to the server through FTP. The drawback with this solution is that it limits your audience to those that have a Java-enabled browser.

Continue Reading The Article

Drag and Drop with Symfony Project. Coool Video Tutorial!!!!

Adding items to a shopping cart in common e-commerce applications isn't very close to the actual "add to cart" metaphor, since it requires clicking an "add to cart" button, watch a new page (the shopping cart), and then go back to the shop or checkout with buttons.

Ajax allows to get closer to the cart metaphor, by enabling drag-and-drop interactions and giving immediate visual feedback, without leaving the shop.

Check this cool video and learn how to make your own Drag-n-Drop script using PHP Framework, Symfony Project.
Drag and Drop Tutorial (with a cool video)

How to Upload Files using Ajax and Progress Bar!!!!

Check this tutorial for more on how to upload files along with a Progress bar.

CakeTimer - An Ajax File Uploads Progress Bar
This is a demonstration of an AJAX powered progressbar to monitor file uploads with (Cake)PHP

HowTo add Ajax in-progress indicators
Ok, so my little del.icio.us app (click link to read about how I added Ajax functionality to a simple Rails app) is pretty cool, but it was missing one big thing. When the user clicks the "Get Results" link she has no idea that the page is communicating with the server.

IF you know of any more Uploading file scripts, please drop in a comment.

MooTools – A Review

MooTools – A Review

MooTools is an open source JavaScript framework that evolved from the simple function called moo.fx. The developers of moo.fx have slowly expanded this simple function into a fully functional framework. As of this writing, the framework is on its 1.2.0 version and has been enjoying a good following along with other JavaScript frameworks.

Advantages
MooTools is a lightweight framework. But do not think MooTools is another lightweight framework that would eventually stack-up. This framework is as lean as they could be. Instead of stacking up the functions and lines, MooTools divide the codes by developing functions in small code bases.

Expect to have a fully working function in 28kb or less. You can even compress it to make it even smaller. Another function that made it lean is the idea of modularity. Since functions could be laid out as modules, you will basically have an application that is lightweight. The modules built with MooTools are also lightweight in themselves and because of the modularity property of these functions; they are already optimized for performance.

Since moo.fx is originally an effects function, it is no wonder that MooTools is one of the best frameworks if you wanted to have a good looking application with all the effects on it. An Ajax based application will run faster even though there effects are bombarded in the application.

Everything you need to know about SAJAX!!!!

Everything you need to know about SAJAX!!!!

Since Ajax has become the focus of today’s web and application development. A lot of tools have been developed to cater to this programming technique. Although it has been dubbed to be a very challenging technique to master, it all goes down to three languages to build an efficient Ajax website: JavaScript, HTML and XML.

Some have preferred to use JSON instead of XML but an efficient mark-up language is all that Ajax needs to perform well. The efficiency it brings is almost second to none and the interface an Ajax application could do is beyond par.

If you are a developer who already has an advanced idea on JavaScript, building an Ajax based application could be very easy. But it does spell trouble when a developer who is proficient in other languages. Other frameworks and functions based on other languages will never be used in an Ajax based application as it is.

Technically, it could be integrated in any Ajax based website but the website or the application will not look good. An ideal Ajax based application could refresh parts of the webpage – and only those that have been changed will be activated. Other languages could be integrated but they will just look bad in the website.

Continue Reading The Tutorial Here

Build Powerful Web Applications using Prototype.js

Build Powerful Web Applications using Prototype.js

Planning to develop an efficient Ajax based application is easier with Prototype.js. This framework was developed specifically to simplify almost any Ajax based function. It is MIT licensed framework could easily be integrated to other frameworks.

To start using the framework it has to be referenced first in your webpage. The following code is used to activate prototype.js. Usually this is referenced in an HTML webpage:

<script type="text/javascript" src="prototype.js"></script>

It is fast becoming the preferred library by different developers. With prototype.js, almost every function could be used with three main objects only. So it does not need a lot of training and familiarity to get along with this simple yet highly efficient framework. The three objects in proptype.js are Ajax.Updater, Ajax.Request and Ajax.Responders.

Continue Reading the Tutorial

Ingrid jQuery based Rich & Advanced Datagrid !!!!

Ingrid jQuery based Rich & Advanced Datagrid !!!!

Datagrids don't have to be difficult to use anymore - say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

If you thought Datagrids can be a messy part of your application? Here comes Ingrid for your rescue.

I suggest one should use it since, it is free and above all based on lovely JQuery and comes handy for any web start-ups.

Read more and download the source from the below link.

http://www.reconstrukt.com/ingrid/

fValidator - AJAX Validation Script

fValidator - AJAX Validation Script

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.

if you are considering building forms and want to make them robust, then I must tell you. You should use fValidator.

Read more and download the source from the below link.http://zendold.lojcomm.com.br/fvalidator/

Tutorial on How to learn Javascript Animation using JQuery???

Tutorial on How to learn Javascript Animation using JQuery???

Here's a JQuery based implementation that gives us that effortless page flick feeling using Javascript

Want to know more and download the source follow the link below.http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

Free Charts and Graphs using XML SWF Charts

Free Charts and Graphs using XML SWF Charts

Here's another cool web chart making tool.It uses SWF to produces the graphs with the data sourced from XML files.

For more details and information, please visit

http://www.maani.us/xml_charts/index.php

Mocha - Mootools UI Library Introduction!!!!

Mocha - Mootools UI Library Introduction!!!!



Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with canvas tag graphics.

Read more and download the source from the below link.http://greghoustondesign.com/demos/mocha/

Get Started with Ajax and jQuery Tutorials For Begineers!!!!!

Get Started with Ajax and jQuery Tutorials For Begineers!!!!!

In this video tutorial, we shall see how to quickly get started with JQuery library and Ajax.

If you are new to this dont worry or panic, coz this would lead to a step-by-step guide as well.

Check out this video and Drop in your comments.

About CodeIgniter: A Powerful PHP Framework

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.


Its on the likes of CakePHP and other PHP based frameworks which work on MVC concepts.

Details of the Project:

Name: CodeIgniter

URL: http://codeigniter.com/

License: Free

Go check out the library.

About Mootools

mootools is a very compact, modular, Object-Oriented javascript framework. Its unique design makes it extremely crossbrowser, easy to use, and a snap to extend with your own code.

It comes with a choice of more than fifteen scripts, plugins and add-ons, including Effects, based on (moo.fx) Ajax, based on (moo.ajax), Dom Navigator, based on (moo.dom), Drag and Drop, Sortable lists, cookies Manager and many more.

Details of the Project:

Name: Mootools

URL: http://mootools.net

License: Free

For more details about the project please visit the URL.