Quasimo/jQuery.getJSON() with fancybox

## jQuery.getJSON() with fancybox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>FancyBox 1.3.1 | Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(document).ready(function() {

			$("a.fancy").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a#example6").fancybox({
				'titlePosition'	: 'over'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>
</head>
<body>
<div id="content">

<script>$.getJSON("http://api.dribbble.com/shots/everyone/?callback=?",
        function(data){
          $.each(data.shots, function(i,shots){
          	var link = $("<a>").attr("class", "fancy").attr("id", shots.id).attr("href", shots.image_url).attr("title", '<h2>' + shots.title +'</h2>')

            var image = $("<img/>").attr("src", shots.image_teaser_url).attr("alt", shots.id)

            link.append(image);
    		$("#content").append(link);

            if ( i == 2 ) return false;
          });
        });</script>

        <script type="text/javascript">
            $(function() {
                $('#activator').click(function(){
                    $('#overlay').fadeIn('fast',function(){
                        $('#box').animate({'top':'160px'},500);
                    });
                });
                $('#boxclose').click(function(){
                    $('#box').animate({'top':'-200px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                });

            });
        </script>


</div>
<div><p>&nbsp;</p></div>


</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>FancyBox 1.3.1 \| Demonstration</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
	$(document).ready(function() {

	$("a.fancy").fancybox({
	'titlePosition' : 'inside'
	});

	$("a#example6").fancybox({
	'titlePosition' : 'over'
	});

	$("a[rel=example_group]").fancybox({
	'transitionIn' : 'none',
	'transitionOut' : 'none',
	'titlePosition' : 'over',
	'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
	return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
	}
	});

	/*
	* Examples - various
	*/

	$("#various1").fancybox({
	'titlePosition' : 'inside',
	'transitionIn' : 'none',
	'transitionOut' : 'none'
	});

	$("#various2").fancybox();

	$("#various3").fancybox({
	'width' : '75%',
	'height' : '75%',
	'autoScale' : false,
	'transitionIn' : 'none',
	'transitionOut' : 'none',
	'type' : 'iframe'
	});

	$("#various4").fancybox({
	'padding' : 0,
	'autoScale' : false,
	'transitionIn' : 'none',
	'transitionOut' : 'none'
	});
	});
	</script>
	</head>
	<body>
	<div id="content">

	<script>$.getJSON("http://api.dribbble.com/shots/everyone/?callback=?",
	function(data){
	$.each(data.shots, function(i,shots){
	var link = $("<a>").attr("class", "fancy").attr("id", shots.id).attr("href", shots.image_url).attr("title", '<h2>' + shots.title +'</h2>')

	var image = $("<img/>").attr("src", shots.image_teaser_url).attr("alt", shots.id)

	link.append(image);
	$("#content").append(link);

	if ( i == 2 ) return false;
	});
	});</script>

	<script type="text/javascript">
	$(function() {
	$('#activator').click(function(){
	$('#overlay').fadeIn('fast',function(){
	$('#box').animate({'top':'160px'},500);
	});
	});
	$('#boxclose').click(function(){
	$('#box').animate({'top':'-200px'},500,function(){
	$('#overlay').fadeOut('fast');
	});
	});

	});
	</script>



	</div>
	<div><p> </p></div>




	</body>
	</html>