'Cause JavaScript is easy :)

22Jul jQuery Picbox gallery using Picasa JSON feed

I’m running small website for my friend and there always be an issue with updating the gallery, because I had to manually upload photos and then change JavaScript code as well.

Fortunately he’s using Google Picasa Web Albums which we’ll use as a JSON feed and show on our site using JavaScript only – specially jQuery Picbox gallery.

CHECKOUT DEMO »»

Let’s consider example gallery at Picasa:
http://picasaweb.google.com/114870412886981821775/FIFAWORLDCUPGIRL2010

At the right there is RSS link which looks like this:
http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=rss&kind=photo&hl=pl

Due to Picasa Web Albums query parameters reference we change alt param to json and add imgmax and callback in which we pass the name of the function to invoke after the feed is loaded.

In the head section jQuery and Picbox must be included:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.picbox.min.js"></script>
<link href="picbox.css" media="screen" rel="Stylesheet" type="text/css" />

And all is needed in body section:


<a href="#" id="gallery"><h1>FIFA WORLD CUP GIRLS 2010</h1></a>
<img id="gallery-loader" src="ajax-loader.gif"  style="display: none;"/>

and then JS:


var Gal = {
	//Max image width form Picasa
	// 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
	imgMax:800,
	//Array of photos
	photos: [],
	//Loader image
	loaderImg: $('#gallery-loader'),
	init: function() {
		if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
			$('#gallery').bind('click',function(e){
				//Prevent default click event
				e.preventDefault();
				//Show loader
				Gal.loaderImg.show();
				//Add JSON feed from Picasa with parameter callback = Gal.prepare to BODY
				$('BODY').append('<script src="http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=json&kind=photo&hl=pl&imgmax='+Gal.imgMax+'&callback=Gal.prepare">'+'</sc'+'ript>');
			});
		}
	},
	//data array with photos from Picasa
	prepare: function(data){
		var i = data.feed.entry.length;
		//Start with random photo
		var start = Math.floor(Math.random()*i+1)
		//Define vars at once
		var item,title,imageurl;
		//Iterate thru data
		while (i--) {
		    item = data.feed.entry[i];
			title = item.title.$t;
			imageurl = item.media$group.media$content[0].url;

			//Other possible data
			//var width = item.media$group.media$content[0].width;
			//var height = item.media$group.media$content[0].height;
			//var description = item.media$group.media$description.$t;
			//var link = item.link[2].href;

			//Add photo to photos array
			Gal.photos.push([imageurl,title]);
		}
		//Show gallery
		Gal.show(start);
	},
	show: function(start){
		//Start picbox gallery
		$.picbox(Gal.photos,start,{'loop':true});
		//Hide loader
		Gal.loaderImg.hide();
	}
}
$(document).ready(function(){ Gal.init(); });

And that’s it!

I think this solution has two major advantages: photos can be changed directly in Picasa by 3rd party admin and they are served via Google CDN.

Tags: , , , , ,

Comments (6)
Bez kategorii

18Mar QR Code from hCard using Sumo! parser and Google Chart API

jane-qrcode

QR Code stands for Quick Response and was created by Japanese corporation in 1994. It became more popular among end users since mobiles have cameras which are able to read those codes. In my Nokia E51 I use I-nigma Reader, but there’re lots of others.

In this post I’d like to present a piece of JavaScript which generates QRCode from hCard using Google Charts API which after scanning by mobile enables easy adding contact to your contacts’ list.

Look at the DEMO to see what’s all about.
(more…)

Tags: , , , ,

Comments (6)
Javascript

18Nov Simple HTTP Streaming design pattern

If you want to stream server data in the response of a long-lived HTTP connection you can use HTTP Streaming design pattern.

Check out simple DEMO »


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head id="my-head">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>keemor.com - Simple HTTP Streaming design pattern</title>
	</head>
<body>
	Counter: <span id="counter"></span>
</body>
</html>


<?php
for ( $counter = 0; $counter <= 10; $counter++) {
	?>
	<script type="text/javascript">
		document.getElementById('counter').innerHTML = "<?= $counter ?>";
	</script>
	<?
	flush();
	sleep(3);
}
?>

Comments (0)
Bez kategorii

19Aug Simple Edit In Place feature using ierange library

Recently I found ierange library which is a great implementation of W3C DOM Ranges for Internet Explorer.

Using it and PrototypeJS I’ve created edit in place feature to easily change the content of a div element.

Check out the DEMO »


<head>
...
<!--[if IE]>
<script type="text/javascript" src="ierange-m2.js"></script>
< ![endif]-->
...
</head>

<body>
	<div id="eip">
		<div id="start">Click to edit and start typing. <br />Enter to confirm. ESC to reset.</div>
		<div id="text">This is some simple text which you can easily change if you want this is some simple text which you can easily change if you want</div>
	</div>
</body>

(more…)

Comments (0)
Javascript, Prototype
« Older Entries