The images used in the demo are by Davidd. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

How it works

The locations for the images are saved in the album.xml file which has the following stucture:

<album>
	<name>Thailand 2011</name>
	<description>Some description</description>
	<places>
	...
	</places>
</album>

Inside of the places, we’ll have the information of each place with its name and location and all the single photos in that place:

<place>
	<name>Bangkok</name>
	<location>
		<lat>13.696693336737654</lat>
		<lng>100.57159423828125</lng>
	</location>
	<photos>
		<photo>
			<thumb>photos/Bangkok/thumbs/1.jpg</thumb>
			<source>photos/Bangkok/1.jpg</source>
			<description>Some description</description>
			<location>
				<lat>13.710035342476681</lat>
				<lng>100.52043914794922</lng>
			</location>
		</photo>
		<photo>
			...
		</photo>
	</photos>
</place>

Besides the path to its thumbnail and the full image, every photo has a location in latitude and longitude as well.

Note, that we are using some PHP here in order to load and retrieve the XML data, so you’ll need a server environment to run this.

Initially, a map with all the places is shown:

In our example it is Bangkok, Phuket and Myeik. In the bar under the map and the preview area, we will have the name and the description of the whole album. In this stage we can already go fullscreen in order to see the full map with the places.

Back in the normal mode, when choosing a place, all the images of that place will show on the right side while we zoom the map in on the left side. As you can see, whenever you hover over a photo, you will see its location on the map and vice versa:

When clicking on a thumbnail or the camera icon on the map, we open the preview for the images, through which we can also navigate:

Clicking on the zoom icon of the preview image will open the large lightbox-like view of the full image:

When we are in the second level and open the fullscreen mode, we can see the thumbnails in the map:

Hope you find it useful, feedback is welcome!

View demo Download source

jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while back while developing my FormBuilder I needed a good solution for storing cookies via JavaScript. As a result of the work down for that project I built jCookies.

The following will demonstrate the methods for storing and retrieving data using jCookies and will show how to retrieve data using server side code such as C# and PHP.

Note: Data is stored in the cookie as JSON data then Base64 encoded to enable the survival through transport layers that are not 8-bit clean. JSON and base64 functions are included in the script and if trimmed out, provided they exist elsewhere, would reduce the size by 70%.

Creating Cookies

To create a cookie you call jCookies and must pass two properties, name and value.

$.jCookies({
    name : 'Listening To',
    value : { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}
});

As you can see you can store pretty much anything. By default cookies are set to expire after 27 days. You can edit the expiration by settings one of the following properties: seconds, minutes, hours, days. The value entered for these properties must be a valid number or they will be ignored.

$.jCookies({ name : 'User', value : { username : 'Bob' , level : 5 }, minutes : 60 });

Note: If you plan on retrieving data from the server side via ASP.net keep the cookie data very simple. More on this later.

Retrieving Cookies

To retrieve a cookie you call jCookies and pass a single properties, get.

var listening_to = $.jCookies({ get : 'Listening To' });
    // response: { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}

var rutabaga = $.jCookies({ get : 'Rutabaga' }); // (cookie was set by another proces)
    // response: false

Data is returned just as you would expect it to. If there was no cookie stored with that name, the cookie has expired, or there was an error then the response would be false. If you want to see if there was an error with the cookie you can set the optional property error. By default this property is set to false.

var rutabaga = $.jCookies({ get : 'Rutabaga', error : true });
    /* response:
        Error : {
            arguments : undefined,
            message : "Invalid base64 data",
            stack : "—",
            type : undefined
        }
    */

This is an error response from Chrome. Depending on your browser your results may vary.

Erasing Cookies

To erase a cookie you call jCookies and pass a single property, erase.

var erased_listening_to = $.jCookies({ erase : 'Listening To' });
    // response: true

var rutabaga = $.jCookies({ erase : 'Rutabaga' });
    // response: false

If a cookie existed and was erased successfully true is returned. If the cookie never existed false is returned.

jCookies Server Side

Dealing with HTTP Cookies created by jCookies on the server side is a cinch you simply need to Base64 decode the data then JSON decode the data.

Setting cookie in JavaScript

$.jCookies({name:'user',value:{name:'brian',level:'awesome'}});
    // response: true

Retrieving the cookie in PHP

<?php print_r(json_decode(base64_decode($_COOKIE['user'], true))); ?>
    /* response:
        stdClass Object
            (
            [name] => brian
            [level] => awesome
            )
    */

With PHP it couldn’t be easier. In the demonstration above I am printing out the entire cookie.

Retrieving the cookie in C#

Dictionary<string,object> user =
  new JavaScriptSerializer().Deserialize<Dictionary<string,object>>
  (Encoding.UTF8.GetString(
	Convert.FromBase64String(Page.Request.Cookies["user"].Value)
  ));

Page.Response.Write("user : name  = " + (string) user["name"]);

With C# its a bit more difficult. You have to set the type of each bit of data that comes back before you can use it. That is why I am storing the data as Dictionary<string,object>. We set the property to string to make it accessible and set the value to object for casting later. If you knew exactly the format of the cookie beforehand you could always create your own class and store that data in that class.

That about does it. If you want to know more visit my site or the jQuery plugin page.

Download jCookies

The revised version of AJAX-ZOOM supports 360° object rotation. Integration has been substantially simplified. Some additional UI controls have been added as optional features for zooming and spinning. Moreover, it now works on iPhone / iPad and other touch devices. Magento integration guide will be released shortly.

Source

http://www.ajax-zoom.com/

Demo

http://www.ajax-zoom.com/examples/example15.php

It’s time to give something back! In our first Giveaway we want to give you the opportunity to win a free copy of the PHP invoicing system Rocket Invoice!
Update: This giveaway ended on 18th of January 2011, the winner was announced at the end of this post. Thank you all for participating!

About Rocket Invoice

Rocket Invoice is packed with dozens of vital features for your business, and others that are more subtle (such as on-file credit cards for added customer convenience) — without having to pay a monthly subscription fee. Pay once and it’s yours.

Why you’ll love Rocket Invoice

• Never pay a monthly subscription fee. Pay once and it’s yours.
• No limits on clients or invoices.
• Customize the look-and-feel with CSS, and if that’s not enough, you’ll have full access to the source code powering Rocket Invoice for complete control.
• Migrate your company’s customers and invoices from existing monthly invoicing applications with a few clicks.
• Accept online payments with Authorize.Net and PayPal (or roll with your own payment gateway plugin—because you can).
• Email invoices and estimates to as many contacts as you’d like—you’re not limited to the primary contact’s email address.
• Quickly update to the latest version with a few clicks; no need to manually update files through FTP.
• JSON and PHP-based API

You can find more screenshots here: http://rocketinvoice.com/tour/ (under the sidebar)

Try out a demonstration

To try out a demonstration of Rocket Invoice, just follow the instructions and the link on this page:
Rocket Invoice Online Demo

How to participate

To participate, simply comment and tweet. We’ll announce the winner on 18th of January 2011 as an update of this same post.

Become a fan of the developers of Rocket Invoice, Becker Web Solutions, on Facebook!
Becker Web Solutions on Facebook

Good Luck and thank you for all your support! Thanks to Becker Web Solutions for this great giveaway!

Update: And the winner is…

Thank you all for participating! For those that did not win, there will be a special offer:
Rocket Invoice officially goes on sale January 20 and pre-order pricing will be extended to Codrops readers for five days after launch!

A simple MVC framework using jQuery Mobile.

Current Features:

• MVC Architecture
• Simple Database (MySQL) and Authentication Classes
• Custom routing for clean URLs
• Apache (.htaccess), NGINX and Lighttpd support

Configuration:

...
// Be sure to set these!
define("BASE_URL","http://localhost/jqmobile/");
define("COOKIE_DOMAIN","localhost");

// Database Config
$database = array (
    "user"  => "root",
    "pass"  => "",
    "host"  => "localhost",
    "dbname" => "jqmobile"
);
...

Source

http://devgrow.com/jquery-mobile-php-mvc-framework/

Demo

http://demos.devgrow.com/jquery-mobile-mvc/

AJAX-ZOOM is a image zoom & pan gallery based on jQuery and PHP. It features over 250 options and is very flexible for integration. Supports GDlib and ImageMagick to generate image pyramid (image tiles), which is done on-the-fly or by batch process.

Source

http://www.ajax-zoom.com/

Demo

http://www.ajax-zoom.com/

These days every website must contain a section that is called “Share This”. Youtube style rating and share system is very attractive and nice. So after creating the rating system I have now come to share button. I have created Youtube style share button with a URL shortening script. Try the demo and use this awesome tutorial on your web pages. Hope you will like this.

Source

http://www.99points.info/2010/07/youtube-style-share-button-with-url-shortening-using-curl-jquery-and-php/

Demo

http://demos.99points.info/youtube_like_share_button/

Today I have created Youtube style rating system which is also called thumbs up/down rating. It is 99% identical to the original youtube rating system. I have tried my best to give you a stylish and the same youtube look rating system. I have implemented IP address checks so that a single user can rate only once.

Source

http://www.99points.info/2010/07/youtube-style-ratingvoting-system-using-jquery-ajax-and-php-ever-best-tutorial/

Demo

http://demos.99points.info/youtube_style_rating/

Facebook style wall posting and commenting system. Try a new reloaded version of demo which is almost similar to Facebook style.
My previous Facebook style posting system was not so much like the original Facebook posting style and also there was no commenting system. So I created this tutorial again to complete the commenting system and I tried my best to give my dear users a complete posting script with comments.

Source

http://www.99points.info/2010/07/facebook-style-wallpost-and-comments-system-using-jquery-ajax-and-php-reloaded/

Demo

http://demos.99points.info/facebook_wallpost_system/

Here is a simple script for you to create dynamic loading of drop downs from categories to get child categories.

Source

http://www.99points.info/2010/06/ajax-tutorial-dynamic-loading-of-combobox-using-jquery-and-ajax-in-php/

Demo

http://demos.99points.info/dynamic_dropdown/