2017 altex.ro

Youtube Instant Search: Un plugin pentru JQuery

cautare video sau muzica direct de pe blog
Youtube Instant Search este un mic plugin jQuery care permite sa cauti video si afiseaza rezultatele în timp real, profitand de Youtube API si de lectura de feed-uri în format JSON. Este usor de adaugat si personalizat. In primul rand, daca nu ai instalata biblioteca jQuery copiaza codul urmator si adaugal inainte de </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
daca deja ai instalat codul treci la urmatorul pas, adauga sub el urmatorul script cu plugin:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".search_input").focus();
$(".search_input").keyup(function() {
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response){
if(response.data.items){
$.each(response.data.items, function(i,data){
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_frame="<iframe width='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
//]]>
</script>
Pentru a utiliza plugin este nevoie de doua DIVs: primul este controlul pentru a face cautarea si al doilea celcare va arata rezultatele. Se adauga intr-o postare noua sau unde doresti sa fie vizibil pe blogul tau.
Codul DIVs;
<div id="input_box">
<input type="text" class='search_input' />
</div>
<div id="result"></div>

ultimul pas, adaugare de stil CSS pentru armare script video si se adauga inainte de linia ]]></b:skin>.
<style>
#input_box {
text-align: center;
width:500px;
}
.search_input {
font-size: 20px;
padding: 5px;
text-align: center;
width: 400px;
}
#result {
background-color: #91D0A1;
margin-top:25px;
min-height:380px;
width:500px;
}
#no { text-align: center; }
#title {
font-size: 18px;
height: 40px;
line-height: 1;
padding-bottom: 10px;
text-align: center;
}
#count {
height: 20px;
padding-top: 10px;
text-align: right;
}
</style>

salveaza modificarile si asta este tot, vezi exemplul de mai jos scrie numele unui artist sau melodie si in cateva secunde poti viziona video-ul cautat.

BARA DE CAUTARE




Un comentariu la acest post este binevenit!

8 comentarios:

  1. Da este foarte util pentru un blog ce prezinta video de YouTube si nu numai.

    RăspundețiȘtergere
  2. Sa-ti de Dumnezeu sanatate ca am cautat de am obosit !!!

    RăspundețiȘtergere
  3. Mersi si tie la fel cranner, ma bucur ca ti-a fost utila acesta informatie.

    RăspundețiȘtergere
  4. Salut Constantin .Am incercat sa fac si eu asa cum ai explicat tu insa la mine nu stiu care poate fi problema insa uite cum apare la mine
    http://ordin.ucoz.com/publ/you_tube/1-1-0-15
    daca nu poti deschide te rog intra pe site-ul meu si arunca o privire poate afli greseala fiindca eu am facut exact asa cum ai explicat insa la mine nu apare decat bara de cautare iar acea fereastra unde ar trebui sa fie rezultatul nu imi apare deloc .Multumesc mult de tot si scuze ca deranjez iar cu problemele mele.

    RăspundețiȘtergere
  5. Salut Marius,acest plug jQuiery nu functioneaza in codul HTML de pe blogul tau pentru simplu motiv ca nu exista aceasta linie ]]></b:skin> eu nu am gasito???

    RăspundețiȘtergere
  6. Acest script functioneaza si pe Ucoz ?

    RăspundețiȘtergere
  7. Salut Devil, din pacate acest script nu functioneaza pe plataforma Ucoz.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc