Youtube Instant Search: Un plugin pentru JQuery

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!

Read More

O galerie de imagini diferita - Spacegallery -

Exista mai multe tipuri de galerii de imagini care se gasesc pe Internet, dar rar vezi unul care afişează imaginile într-o manieră atat de diferita cum este aceasta.Sunt sigur că vă veţi bucura de acest tip de efect pentru a vizualiza imagini.

Este vorba de Spacegallery si este o galerie de imagini realizata cu jQuery în care imaginile apar unul după altul făcând clic pe ele.

Poti vedea un exemplu aici.

Pentru a folosi aceasta galeria prima data trebuie sa descarci urmatorul fisier ZIP, il descomprimi si gazduiesti cele 3 script intr-un servitor online de exemplu in DropBux Dupa aceia adaugi inainte de </head> urmatorul cod JavaScript:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL fisier eye.js' type='text/javascript'/>
<script src='URL fisier utils.js' type='text/javascript'/>
<script src='URL fisier spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

inlocuieste ce apare in culoare rosie cu url care il ofera serverul unde ai gazduit respectivele fisiere script - ATENTIE! respecta exact ordinea fiecarui script cum apare mai sus, altfel nu o sa functioneze.

In continuare inainte de ]]></b:skin> adaugi efectul urmator CSS:

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEYb6SdaQdau-yAJYxyq4U-kNlzXzkUqE6Wi8kC_qoLOtsOeqIVmi9eBTNSphrXO1GmqhcAXhpmuR4mzgqPaowjB6jSpgRAtpOFc89hkQ2Ejwm3D8ZCRRiAC8BK2_DffJAT5V_1EzxzYc/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Salvezi modificarile, si acum intr-o postare noua adaugi codul HTML urmator:

<div class="spacegallery" id="myGallery">
<img src="URL imagine"/>

<img src="URL imagine"/>

<img src="URL imagine"/>

<img src="URL imagine"/>

<img src="URL imagine"/>

</div>

schimba URL imagine cu url-ul imagini care doresti sa apara in postare. SUCCES

Read More

jQUERY efect deplasare link sau imagine

Cei care folosesc jQuery în blog-uri, pot da un aspect diferit pentru link-uri sau imagini cu Nudging.js efect de miscare subtilă cand trece cursorul pe este ele.

Pentru a folosi acest efect mergem la sablonul de editare HTML si inainte de linia </head> se adauga urmatorul script:

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '45px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '1px' }, 400);
});
});
//]]>
</script>

Daca nu ai folosit pana acum jQuery si doresti sa instalezi acest efect pe blog-ul tau ai nevoie de urmatorul cod pe care il adaugi exact deasupra celui de mai sus:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Salveaza modificarile si acum intr-o postare noua sau intr-un nou gadget html/javascript poti creea un linck sau o imagine cu efect deplasare.

Pentru link text folosim:

<a class="nudge" href="url-enlace">AICI VEZI EFECTUL</a>

Si rezultatul.
AICI VEZI EFECTUL
Acum sa vedem acelas efect cu o imagine, se foloseste urmatoarea linie.

<a href="#"class="nudge"><img src="Url-imagine" /></a>

Si rezultatul:

Se inlocuieste Url-imagine cu url-ul imagini tale.

Read More