Son Eklenenler
javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

YouTube Videolarını Yorumlarda Göstermek (Yeni)


Bir çok blog da rastgeldiğim bir eklenti bu. Fakat benim Redakte'nin vesilesi ile paylaşacağım eklenti çok farklı.

Diğer eklenti de yorum bölümüne [youtube]...[/youtube] kodları arasına video linkini yapıştırıyordunuz. Bu uğraşa gerek kalmadan sizlere vereceğim eklenti ile youtube videolarının linkini direkt yapıştırarak videoyu yorumda gösterebileceksiniz.

Fakat bu sadece YouTube için geçerli diğer video paylaşım sitelerini desteklemiyor.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
//
// if oetag=0, just use video urls like:
// http://www.youtube.com/watch?v=12345678901
// surrounded by white space (video tag can be used, too)
// if oetag=1 (for nerdy blogs?), use syntax:
// [video=http://www.youtube.com/watch?v=12345678901]
// config:
var oetag = 0; // see above
var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?
var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)
//
function oe_loadscript(filename) {
var scr=document.createElement('script');
scr.setAttribute("type","text/javascript");
scr.setAttribute("src",filename);
document.getElementsByTagName("head")[0].appendChild(scr);
}
function oe_jumptohash() { // reposition to anchor
window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);
}
var oe_tid;
var oe_elems = {};
//
function oembed_callback(response) {
var resp = response;
revurl = resp.url.split("").reverse().join("");
html = oe_elems[response.callID].html();
ee = $(resp.html);
w = parseInt(ee.attr("width"));
h = parseInt(ee.attr("height"));
if(oelazy==1) { // convert to lazy load
src = ee.attr("src");
src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
ee.attr("src", src);
ee.attr("style", "vertical-align:top;");
htm = $("<div/>").append(ee).html();
htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');
resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';
}
htmlx = html.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+"\\]"), " " + resp.url + " ");
htmlx = htmlx.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+" \\]"), " " + resp.url + " ");
htmlx = htmlx.replace(new RegExp('"'+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+revurl+'"'); // trick to preserve href="url"
htmlx = htmlx.replace(new RegExp(resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")), '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
htmlx = htmlx.replace(new RegExp('"'+revurl.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+resp.url+'"'); // trick to preserve href="url"
if(html != htmlx) {
oe_elems[response.callID].html(htmlx);
if(window.location.hash.replace(/^#/, "").length > 0) {
if(oe_tid) window.clearTimeout(oe_tid);
oe_tid = window.setTimeout("oe_jumptohash()", 1000);
}
}
}
function oembed_yt(url, width, callID) {
src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);
if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;
oe_loadscript(src);
}
$(document).ready(function() {
det=$('<div class="youtube-lazy-link-div" />');
$("body").append(det);
if(det.css("position")=="absolute") {
if(oelazy != 0) oelazy=1;
}
else oelazy = 0;
det.remove();
window.setTimeout(function() {
var callID=0;
$(".comment-content,.comment-body,.comment-body-author").each(function() {
html = " " + $(this).html() + " ";
if(oetag)
matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));
else
matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);
if(matches && matches.length) {
for(var i=0;i<matches.length;i++) {
url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);
oe_elems[callID] = $(this);
oembed_yt(url, $(this).width(), callID++);
}
}
});
}, 500);
});
//]]>
</script>

Yukarıdaki kodu tema panelinden </head> kodunun üstüne yerleştirin.

Bu eklentiyi canlı test etmek için tıklayın.

Blogger jQuery Lazy Load Eklentisi

Merhaba arkadaşlar, bugün akşam üzeri bloguma eklemiş olduğum jQuery Lazy Load eklentisini sizlerle paylaşmak istedim.Bu eklenti ile blogunuzda bulunan tüm resimleri, flash ve js dosyalarını sizler web sayfasının aşağısına doğru indikçe yükleniyor ve blogunuzda gözle görülür bir hızlanma oluşuyor.





Ayrıca göze hitap ediş şeklide bir o kadar güzel.Tam olarak ne işe yaradığını şematik bir resim ile göstereyim.

jQuery Lazy Load Eklentisi Şematik Resim

Nasıl ekliyoruz bu eklentimizi ? Hemen anlatayım.

Aşağıdaki kodu bulun

</head>

Daha sonra bulduğumuz kodun hemen üstüne aşağıdaki kodları ekleyin.


<script charset='utf-8' src='http://konfor.enesilhan.net/js/jquery.min.js' type='text/javascript'></script> <script src='http://konfor.enesilhan.net/js/jquery.lazyload.js' type='text/javascript'></script> <script type='text/javascript'> $(function() { $("img").lazyload({ placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKiwRDLwKwx5XofNor-ewBrvb0uEPva0gPlZAsJpdRHiwcavIBAEYVIqBwmTzuwYJHZhupBVcWnQdkiGeu121NYPLvvcRA6PI_zWfLv8ophzKqhbz4PrsHQzK2YDm2ITl9fPfDkpfpKlo/s1600/grey.gif", effect : "fadeIn" }); }); </script> <script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script>

İşlemlerimiz bu kadar temanızı kaydedebilir ve bloglamaya devam edebilirsiniz.

Layer"

Reklam

 
Support : Türkçe | Blogger | Temaları
Copyright © 2014 Film Siteleri - Tüm Hakları Saklıdır
Filmsitelerin.blogspot.comTürkçe Blogger Temaları
powered by Filmsiteleri.net