Friday, 28 March 2014

Display YouTube Video From Its URL Using PHP & Ajax

How to display YouTube video by pasting its URL in text box? This is what I have done using PHP and Ajax. I will explain in simple way. Place a text box and write Ajax code to pass the YouTube URL to PHP script. PHP script will process and passes the embed code back to Ajax and Ajax will display the content in DIV container. That’s it.
HTML file

<body onload="text = document.getElementById('url');text.focus();" style="text-align:center;background-color:white;color:grey;">
<script>
function url(){
//taking text field value into variable
url = document.getElementById('url').value;

//checking if value is empty
if(url ==""){
//then do nothing
return 0;
}
//taking 0 to 23 characters from YouTube URL
yurl = url.substring(0,23);

//checking those 23 characters with string
if(yurl =='https://www.youtube.com' || yurl =='http://www.youtube.com/'){

//Ajax starts here
//checking if browser is internet explorer
if(navigator.appName=="Microsoft Internet Explorer"){
//creating object for Internet Explorer
obj = new ActiveXObject("Msxml2.XMLHTTP");
}else{
//creating object for Firefox and other browsers
obj=new XMLHttpRequest();
}
//opening connection passing url variable to PHP script 
obj.open("GET","youtube.php?"+url,true);
obj.send();
obj.onreadystatechange=function(){
//if readystate is completed ie 4 get the PHP script
if(obj.readyState==4){

//get the Div tag
div = document.getElementById("preview");
//place the content we got from PHP script in Div tag
div.innerHTML=obj.responseText;
}}

}
else{
alert("Please enter youtube url");
}

}
</script>
<div style="margin-top:130px;">
Enter YouTube URL <input type="text" name="url" size="50" id="url" onblur="url()">
<div id="preview" style="padding-top:20px;"></div>
</div>
</body>

PHP file

<?php
if(isset($_SERVER['QUERY_STRING'])){
//capture the url variable  and store it in $url
$url = $_SERVER['QUERY_STRING'];
//divide the url we got into 2 parts using "=" sign
$text = explode("=",$url);
//take the second part
$value = $text[1];
//add that value to YouTube embed code
$t=<<<str
<iframe width="560" height="315" src="//www.youtube.com/embed/$value" frameborder="0" allowfullscreen></iframe>
str;
//display YouTube embed code with value
echo $t;
}
?>

Want to test on your local xampp server here is the zip file link Download rar file

Friday, 14 March 2014

How to add Lokesh Dhakar’s Color Theif Jquery to your projects

Hari 14:40 No comments Edit

Finding it difficult to add Lokesh Dhakar’s Color Thief Jquery plugin to your project? Don’t worry I am here to help you. I am not going to tell you how this script is going to work. That is programmer’s duty to understand the script and if possible modify it accordingly. I will simply tell you how to make it work on your project the easy-way like simply copy and paste. I will also tell you some important changes that you can make to this Color Thief script.

At first I too found it hard to make it work on one of my project. But after digging into it I found it easy. Lets get started.

Color Thief Demo
Download Color Thief Files

Easy way of getting things done:

Paste the following code before </body>


<div id="main" role="main"></div>

<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="js/libs/jquery.imagesloaded.js"></script>
<script src="js/libs/jquery.lettering.js"></script> <!-- this library may not be required -->
<script src="js/libs/mustache.js"></script>

<script src="js/libs/quantize.js"></script>
<script src="js/color-thief.js"></script>

<!-- Using Mustache templating -->
<script id='template' type='text/x-mustache'>
  {{#images}}
  <div class="imageSection clearfix {{class}} ">
    <div class="imageWrap">
      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
    </div>
    <div class="colors">
      <div class="function dominantColor clearfix">
        <h3>Dominant Color</h3>
        <div class="swatches clearfix"></div>
      </div>
      <div class="function medianCutPalette clearfix">
        <h3>Palette</h3>
        <div class="swatches clearfix"></div>
      </div>
    </div>
  </div>
  {{/images}}
</script>

<script>
$(document).ready(function(){

  // Use mustache.js templating to create layout
  
  var imageArray = { images: [
    {"file": "3.jpg"},
    {"file": "4.jpg"},  
    {"file": "5.jpg"}, 
    {"file": "logo1.png"},
    {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}  
  ]};

	var html = Mustache.to_html($('#template').html(), imageArray);
	$('#main').append(html);

  // Use lettering.js to give letter by letter styling control for the h1 title
  $("h1").lettering();

	
  // Once images are loaded, loop through each one, getting dominant color
  // and palette and displaying them.
  $('img').imagesLoaded(function(){
	
    $('img').each(function(index){

      var imageSection = $(this).closest('.imageSection'),
          swatchEl;

      // Dominant Color
	    var dominantColor = getDominantColor(this);
	
			swatchEl = $('<div>', {
				'class': 'swatch'
			}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
			imageSection.find('.dominantColor .swatches').append(swatchEl);



      // Palette
      var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
	    var medianPalette = createPalette(this, colorCount);

			var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
      $.each(medianPalette, function(index, value){
				swatchEl = $('<div>', {
					'class': 'swatch'
				}).css('background-color','rgba('+value[0]+','+value[1]+ ','+value[2]+', 1)');
				medianCutPalette.append(swatchEl);
			});

		});

	});
});
  
</script>

Change the paths for all JS files and make sure images are in img/images.jpg folder. Run the script and there you go. The script works like charm.

Lets look deeper into the code:

In the Jquery code ( which starts with $(document).ready(function(){ ) you can see that images are added in array. Place your own image names there.

The below div tag is where the whole content (images and color palettes) is displayed. So place this div tag where ever you want in your page to display images and color palette.

<div id="main" role="main"> </div>

This is it guys if you are have any doubts, or you are unable to implement this in your PHP project just leave a comment below.