I would like to introduce you my last web project: http://www.palmstudios.com

For this project I have developed a sort of MVC (Model View Controller) over the RedBeanPHP DB library (PHP 5.3.2).  This project even though it looks quite simple it has a very power CMS (Content Management System) on its backend that allows the model agency to control most of the aspects of its business:

1. - Clients Management
2. - Models Management (Men, Women, Children & Extras) -contact details, measurements, pictures, and so on…
3. - Promotional Packages Management – this is a special addon which allows the agency to create model promotional bundles to send to its clients

There is a ton of client and server libraries that this application makes use of, such as:

• JQuery FancyBox
• JQuery Livequery
• JQuery AjaxQ
• PHPMailer
• RedBeanPHP
• Savant3 Template Engine
• PHPThumb
• TinyMCE

The CMS has a configuration section where site administrator can configure:

• Web site languages (has multiple language support)
• Web site translations (you can even ask GOOGLE about a translation depending of the languages installed on the system)
• Model properties (size, height, waist, etc…)
• Hair Colors
• Eye Colors
• Users

Here is a snapshot gallery of the Site and its CMS

I am open for Freelance Jobs

If any of you would like to create a model agency application like this, let me know, I will be more than happy to collaborate with you on it. I will also sell the source code of its panel for any of you who is interested.

This plugin loads the images of a web page as the user scrolls to their position, that is, images wont load until they are not within the visible viewport margins of the window.

How to use

First we need to insert the following references into our code

<!-- insert a reference to jquery and the jquery.lazyload plugin -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

And now this few lines of code in our document.ready function

<script type="text/javascript">
$(function() {
          $("img").lazyload({
              placeholder : "img/grey.gif",
              effect      : "fadeIn"
           });
       });
< /script>

And that’s it! Easy right?

Bruno Casablanca Restaurant and Pizzeria

Another site finished: www.brunocasablanca.com

Yeah, is a restaurant business, located in one of the most beautiful places in the Balearic Islands: Betlem, in La Colonia de San Pedro, Majorca, Spain. The site uses a web panel to control:

• Picture Galleries
• Web site content
• Translations
• Events
• Suggestions

In this site I make use of one of the greatest galleries around Pirobox, boxen -to display the menu, and FlippingBook HTML Edition for the menu viewing. You can check the website and see how I implemented these three cool tools, feel free to ask me any doubt related to them in case you wish to use it in any of your sites.

VisualLightBox is a free application that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code.

Just drag&drop your photos to VisualLightBox wizard window, press “Publish” and your own css web site album with beautiful LightBox effects will open in the browser instantly!
No css, image editing, javascript, html coding, just a click to get your cool web page album ready.

It takes less than a minute to have your own image gallery.

For full documentation please go to http://lightbox2.com/

Newbies, now there is no excuse to have your featured lightbox on your site!

The jQuery programmers not happy with a new release has also created a new  jQuery API site. Check what they have done on their API site here.

John Resig will announce 1.4 release details tomorrow but meanwhile, you can download it and see for yourself.

• Download jQuery 1.4 from Google CDN
• Download jQuery 1.4 from Official jQuery website

Also, if you want to learn more about what is new in jQuery 1.4 then you might find the following resources useful:

1. 14 Days of jQuery
2. Official jQuery Blog
3. jQuery 1.4 Cheatsheet
4. jQuery on Tweeter

Check what is new or changed on this new release here.

Happy birthday jQuery! Thanks for the good work!

The code

Remember than this plugin works in conjunction with my JSON jQuery Plugin, also on this blog.

jQuery.cookie = {

set : function(name,value,options){

options = $.extend({}, options);

if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}

value = options.json ? encodeURIComponent($.JSON.encode(value)):encodeURIComponent(value);

var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';

document.cookie = [name, '=', value, expires, path, domain, secure].join('');
},
get : function(name,json){

var cookieValue = null;

if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = $.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = json ? $.JSON.decode(decodeURIComponent(cookie.substring(name.length + 1))):decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}

return cookieValue;

},
unset: function(name){
this.set(name,'',-1);
}
};

How to use

Note that you have to insert the jquery library on your head section and also the JSON jQuery Plugin -they are all included into the zip file below. Please, also refer to the example provided on my last article ‘cookies on roids’ to view more cookie options.

var obj = {json:'this is a test json property',xml:'this is a test xml property'};
var arr = ['A','B of 2 index array','C','D'];
var str = 'This is a string test';
var num = 123;

$.cookie.set('testobject',obj,{json:true});
$.cookie.set('testarray',arr,{json:true});
$.cookie.set('teststring',str);
$.cookie.set('testnumber',num);

var a = $.cookie.get('testobject',true);
var b = $.cookie.get('testarray',true);
var c = $.cookie.get('teststring');
var d = $.cookie.get('testnumber');

$.cookie.unset('testobject');
$.cookie.unset('testarray');
$.cookie.unset('teststring');
$.cookie.unset('testnumber');

alert('object:'+a.xml);
alert('array:'+b[1]);
alert('string:'+c);
alert('number:'+d);

DOWNLOAD
The zip file includes the JSON jQuery Plugin and Cookie jQuery Plugin together with an example page on how to use them.

download: jQuery Cookie Plugin (23.84KB) added: 02/01/2010 clicks: 426 description:

As you all know jQuery do not have a JSON encode function. I truly do not know the reason why but to implement it was quite easy -maybe the guys from jQuery thought that it wasn’t really necessary and I agree with them. Most of us use JSON on the server side through PHP or whatever the server tech we use but sometimes, and I repeat, sometimes, we require to develop client applications that by using JSON (thanks David Crockford) we can reduce our server resources and the amount of data transmitted between client and server. But this is a subject that I will treat in the next posts.

Here is the plugin code:

jQuery.JSON = {
useHasOwn : ({}.hasOwnProperty ? true : false),
pad : function(n) {
return n < 10 ? "0" + n : n;
},
m : {
"\b": '\\b',
"\t": '\\t',
"\n": '\\n',
"\f": '\\f',
"\r": '\\r',
'"' : '\\"',
"\\": '\\\\'
},
encodeString : function(s){
if (/["\\\x00-\x1f]/.test(s)) {
return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
var c = m[b];
if(c){
return c;
}
c = b.charCodeAt();
return "\\u00" +
Math.floor(c / 16).toString(16) +
(c % 16).toString(16);
}) + '"';
}
return '"' + s + '"';
},
encodeArray : function(o){
var a = ["["], b, i, l = o.length, v;
for (i = 0; i < l; i += 1) {
v = o[i];
switch (typeof v) {
case "undefined":
case "function":
case "unknown":
break;
default:
if (b) {
a.push(',');
}
a.push(v === null ? "null" : this.encode(v));
b = true;
}
}
a.push("]");
return a.join("");
},
encodeDate : function(o){
return '"' + o.getFullYear() + "-" +
pad(o.getMonth() + 1) + "-" +
pad(o.getDate()) + "T" +
pad(o.getHours()) + ":" +
pad(o.getMinutes()) + ":" +
pad(o.getSeconds()) + '"';
},
encode : function(o){
if(typeof o == "undefined" || o === null){
return "null";
}else if(o instanceof Array){
return this.encodeArray(o);
}else if(o instanceof Date){
return this.encodeDate(o);
}else if(typeof o == "string"){
return this.encodeString(o);
}else if(typeof o == "number"){
return isFinite(o) ? String(o) : "null";
}else if(typeof o == "boolean"){
return String(o);
}else {
var self = this;

var a = ["{"], b, i, v;
for (i in o) {
if(!this.useHasOwn || o.hasOwnProperty(i)) {
v = o[i];
switch (typeof v) {
case "undefined":
case "function":
case "unknown":
break;
default:
if(b){
a.push(',');
}
a.push(self.encode(i), ":",
v === null ? "null" : self.encode(v));
b = true;
}
}
}
a.push("}");
return a.join("");
}
},
decode : function(json){
return eval("(" + json + ')');
}
};

How to use

Copy and paste the above code onto a file and name it whatever you like, for the sake of the example we will call it jquery.json.js. And then configure your head section like this:

<!-- jquery library (if you dont have it, then download it   -->
<script language="javascript" src="jquery.1.3.2.js" ></script>
<!-- our plugin file -->
<script language="javascript" src="jquery.json.js"></script>

That’s it, now we can call our plugin like this:

// test variables
var obj = {json:'this is a test json property',xml:'this is a test xml property'};
var arr = ['A','B of 2 index array','C','D'];

// encoding an object
var a = $.JSON.encode(obj);
alert('json encoded object:'+a);

// decoding an object
var b = $.JSON.decode(a);
alert('json decoded object property:'+b.json);

// encoding an array
a = $.JSON.encode(arr);
alert('json encoded array:'+a);

// decoding the array
b = $.JSON.decode(a);
alert('json decoded array:'+b[1]);

On future posts we will make use of this plugin to show what we can do with it.

Any feedback is highly appreciated.