info.michael-simons.eu

I’m using jQuery FancyBox on dailyfratze.de. I still use version 1.3.4 which is released under MIT and GPL license, if i remember correctly version 2 has not been always available under an open license but i’m maybe wrong. But nevertheless, version 2 also lacks touch support like 1.3.4 does.

This can be changed if you’re using Modernizr for detecting HTML5 and CSS3 features and also very small jQuery Touchwipe Plugin (there maybe more feature rich plugins but for the given goal, this is enough).

The change is pretty simple and the core of it is:

if(Modernizr.touch)
	content.touchwipe({
	     wipeLeft: function() { $.fancybox.next(); },
	     wipeRight: function() { $.fancybox.prev() },		     
	     min_move_x: 20,
	     min_move_y: 20,
	     preventDefaultEvents: true
	});

On wipe left show the next picture in a gallery, on wipe right the previous. There’s some more to disable the default click handlers, but i don’t want to bore you.

Here is a version of FancyBox already patched: jquery.fancybox-1.3.4.with_touch_support.js and here is a unified patch: jquery.fancybox-1.3.4.touch_support.patch.

Don’t forget to include modernizr with touch event support and jquery-touchwipe. To see how it works, visit dailyfratze.de and touch one of the the little magnifiers.

Share This

I’m using jQuery FancyBox on dailyfratze.de. I still use version 1.3.4 which is released under MIT and GPL license, if i remember correctly version 2 has not been always available...

I’m using the Atmosphere framework to implement server push (a.k.a. Comet) in a Spring 3 application.

Atmosphere includes a fine jQuery plugin to handle the client side code. The plugin works quite well and Jean-Francois, the author, has a good tutorial in his blog: Using Atmosphere’s JQuery Plug In to build applications supporting both Websocket and Comet.

The code works but causes webkit browsers (Chrome and Safari) to show the throbber (that little spinning thingy in tab or address bar). In iOS browsers that loading progress bar will not disappear.

I found some suggestions to get rid of the “throbber of doom” but none of them worked for me.

So here is my solution which is tested with jQuery 1.4.2 and jQuery.atmosphere 0.6.3:

<script>  	
	// See https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
	if(!Function.prototype.bind) {
		Function.prototype.bind = function( obj ) {
			var slice = [].slice,
			args = slice.call(arguments, 1), 
			self = this, 
			nop = function () {}, 
			bound = function () {
				return self.apply( this instanceof nop ? this : ( obj || {} ), args.concat( slice.call(arguments) ) );    
			};
 
			nop.prototype = self.prototype;
			bound.prototype = new nop();
			return bound;
		};
	}
 
	var subscribe = function() {		 	
		$.atmosphere.subscribe(
			'/subscription/url',
			function(response) {				
				$('body').append(response.responseBody + '<br>');						
			},
			$.atmosphere.request = {								
				transport: 'websocket',
				fallbackTransport : 'long-polling'
			}
		);
	};
 
	$(window).load(function() {				
		setTimeout(subscribe.bind(document),500);
	});
</script>

The trick is: Wait for the whole page to be loaded (including all resources) by using $(window).load instead of $(document).ready. Then set a timeout to your subscription function. The timeout will change the execution context of the function to the global object (in most cases window). This needs to be corrected to the document for the atmosphere jQuery plugin to work. Here comes bind() to the rescue. This is a Javascript 1.8.5 function and it is not available in all browsers (see bind) and therefore added to the prototype.

So far i’ve tested this in Firefox 3.6, Chrome 8, Safari 5 and Internet Explorer 8 and had no problems.

Share This

I’m using the Atmosphere framework to implement server push (a.k.a. Comet) in a Spring 3 application. Atmosphere includes a fine jQuery plugin to handle the client side code. The plugin...