Learn how to use jQuery at the Blog

TwiPho - Twitter Photo Search « visit

  • Added 7 months ago
  • 273 Lines of Code shown
  • 2 Links of Interest
http://twipho.net
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to TwiPho - Twitter Photo Search - http://twipho.net

//twitter function time
//from twitters blogger badge
//http://twitter.com/javascripts/blogger.js
function relative_time(time_value) {
   var parsed_date = Date.parse(time_value);

   var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
   var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);

   if(delta < 60) {
       return 'less than a minute ago';
   } else if(delta < 120) {
       return 'about a minute ago';
   } else if(delta < (45*60)) {
       return (parseInt(delta / 60)).toString() + ' minutes ago';
   } else if(delta < (90*60)) {
           return 'about an hour ago';
       } else if(delta < (24*60*60)) {
       return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
   } else if(delta < (48*60*60)) {
       return '1 day ago';
   } else {
       return (parseInt(delta / 86400)).toString() + ' days ago';
   }
}

function setToolTips()
{
   $('.email').each(function()
   {
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="ajax-loader-image.gif" alt="Loading..." />',
            url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
            title: {
               text: 'Email photo to a friend!', // Give the tooltip a title using each elements text
               button: 'Close' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'bottomMiddle', // Position the tooltip above the link
               tooltip: 'topMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'click', 
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 0,
               radius: 4
            },
            name: 'blue', // Use the default light style
            width: 570 // Set the tooltip width
         }
      })
   });
	
}

function runQuery(results, query){
	
	$(".entry").fadeOut(1000);
			
	 $("#loading").ajaxStart(function(){
	   $(this).animate({opacity: 1}, 1000);
	 });
	 
	 $("#loading").ajaxComplete(function(){
	   $(this).animate({opacity: 0}, 1000);
	 });


	$.post("search.php", { searchQuery: query}, function(data){}, "html");


	$.getJSON("http://search.twitter.com/search.json?lang=en&q=yfrog.com OR twitpic.com OR img.ly + "+query+"&rpp="+results+"&callback=?", function(json){
								
					
					
			$("#results").text("");	
			
			if(json.results.length == 0)
			{
				$("#results").append("<h2 class='noResults'>There were no results for that search, try again</h2>");
				
			}
			$("#results").fadeIn(2000);
			
			
			$.each(json.results, function(i, val) {
				
			var imageRegEx = /(http:\/\/(www.|)+(twitpic.com|img.ly|yfrog.com)\/){1}[a-zA-Z0-9]{1,}/g;
			
			//we have to check if an image actually is found in the search
			//if not we skip this entry
			if(val.text.search(imageRegEx) !== -1)
			{
				
			//a quick regex to find twitter and imgly links
			imgFind = val.text.match(imageRegEx);	
			
			var tweet = "<p class='words'>"+val.text+"</p>";
			
				for(i=0; i<imgFind.length; i++)
				{
					ajaxImgId = i;
					if(imgFind[i].indexOf("http://twitpic.com/") > -1)
					{
						tweet = tweet.replace(imgFind[i], "");
						imgId = imgFind[i].substr(19);
						srcLink = imgFind[i];
						src = "http://twitpic.com/show/thumb/"+imgId;
						imgSource = "twitpic.com";
					}
					if(imgFind[i].indexOf("http://www.twitpic.com/") > -1)
					{
						tweet = tweet.replace(imgFind[i], "");
						imgId = imgFind[i].substr(23);
						srcLink = imgFind[i];
						src = "http://twitpic.com/show/thumb/"+imgId;
						imgSource = "twitpic.com";
					}
					if(imgFind[i].indexOf("http://img.ly/") > -1)
					{
						tweet = tweet.replace(imgFind[i], "");
						imgId = imgFind[i].substr(14);
						srcLink = imgFind[i];
						src = "http://img.ly/show/thumb/"+imgId;
						var imgSource = "img.ly";
					}
					if(imgFind[i].indexOf("http://yfrog.com/") > -1 || imgFind[i].indexOf("http://www.yfrog.com/") > -1)
					{
						tweet = tweet.replace(imgFind[i], "");
						srcLink = imgFind[i];
						src = imgFind[i]+".th.jpg";
						var imgSource = "yfrog.com";
					}
				}
				
				var imageInput = '<div class="imageTweet"><div class="hover"><a href="http://twitter.com/home?status=RT '+escape(query+" "+val.text+' from #twipho http://twipho.net')+'"><img src="hover_01.gif" alt="ReTweet" /></a><br /><a href="http://twitter.com/'+val.from_user+'/status/'+val.id+'"><img src="hover_02.gif" alt="Original Tweet" /><br /><a href="'+srcLink+'"><img src="hover_03.gif" alt="Full Size" /></a><br /><a class="email" rel="/email.php?image='+srcLink+'&tweet=http://twitter.com/'+val.from_user+'/status/'+val.id+'"><img src="email.gif" alt="Email a friend"/></a><img src="'+imgSource+'.gif" alt="Uploaded to '+imgSource+'" /></div><a href="'+srcLink+'"><img src="'+src+'" alt="Related to '+query+' from '+imgSource+'" /></a></div>'
				
			}
			
			//swapping the links for thumbnails for each service
			
			//we have to check if an image actually is found in the search
			//if not we skip this entry
			if(val.text.search(imageRegEx) !== -1)
			{
			
				  $("#results").append("<div class='entry'><div class='profile'><img src='"+val.profile_image_url+"' alt'"+val.from_user+"' width='48' height='48' /><h2>"+val.from_user+"</h2></div><div class='tweet'>"+imageInput+tweet+"<p class='time'>"+relative_time(val.created_at)+" from "+html_entity_decode(val.source)+"</p></div></div>");
			
			}
			  
			$(".hover").each(function(i){
				$(this).css("opacity", "0");
			});
			  
			  //alert(val.text);
			});
			$("#results").append("<div class='clear'></div>");	
			
			//setup tool tips
			setToolTips();

			
			//setup cufon text replace
			 Cufon.replace('h2');
			
			$(".hover").mouseenter(function() {
				$(this).animate({
					opacity: 1
				}, 300);			
			});
			
			$(".hover").mouseleave(function() {
				$(this).animate({
					opacity: 0
				}, 300);			
			});

	});
		
}

	var results = 20;


// JavaScript Document
$(document).ready(function(){


	//grab the trending topics
	
	$.getJSON("http://search.twitter.com/trends.json?exclude=hashtags&callback=?", function(json){
		$.each(json.trends, function(i, val) {	
			$(".trendTitle").after('<li class="trend">'+val.name+'</li>');
		});
		
		//once the trends have been written we can grab their data
		$(".trend").click(function() {
			$("#search").attr("value", $(this).text());
			runQuery(results, $("#search").val());				

		});
	});


	//setup some style things
	
	$("#config").css("opacity", "0.5");
	$("#loading").css("opacity", "0");
	$("#results").css("display", "none");
	$("#results").css("display", "none");

	var t;

	$("#reload").click(function() {
		runQuery(results, $("#search").val());				
	});
	
	$("#config").mouseover(function() {
		$(this).animate({
			opacity: 1
		}, 500);			
	});
	
	$("#config").mouseout(function() {
		$(this).animate({
			opacity: 0.5
		}, 500);			
	});
	
	$("#config").click(function() {
		$("#options").toggle("slow");			
	});

	$("#search").keyup(function (event) {

		clearTimeout(t);
		t=setTimeout("runQuery(results, '"+$("#search").val()+"')",1000);
		if (event.keyCode == 13) {
			clearTimeout(t);
		}
	});
	
	//disable the enter key
	$("#search").keypress(function (e) {
		//alert(e.keyCode);
		if (e.keyCode == 13 || e.keyCode == 10) {
			clearTimeout(t);
			runQuery(results, $("#search").val())
			return false;
		}
		//alert(e.keyCode);
    });
	
	$("#tos, #help").click(function() {
        window.open($(this).attr('href'), "tos","menubar=0,resizable=0,width=450,height=600,scrollbars=1");
        return false;
	});

});