Dalam posting ini kita akan melihat bagaimana untuk membuat galeri video YouTube yang menggunakan jQuery.Ini adalah sebuah galeri elegan di mana kita dapat menambahkan 5 video dan untuk dimensinya, kita bisa meletakkannya di bawah header blog. Sebenarnya Anda bisa menempatkannya di mana saja, namun disarankan di daerah itu mengingat 765px adalah lebar galeri.
Untuk menambahkan slider video ini ke blog Anda pergi ke Template> Edit HTML dan sebelum </ head> tag, tambahkan script ini:
<script>
/ / <! [CDATA [
/ * Hoverscroll v.0.2.4 * /
(Function ($) {
$. Fn.hoverscroll = function (params) {
jika {params = {};} (params!)
. params = $ memperpanjang ({}, $ fn.hoverscroll.params, params.);
this.each (function () {
var $ ini = $ (ini);
if (params.debug) {log $ ('[HoverScroll] Mencoba untuk membuat hoverscroll pada elemen' + this.tagName + '#' + this.id);.}
if (params.fixedArrows) {
$ This.wrap ('<div class="fixed-listcontainer"> </ div>')
}
else {
$ This.wrap ('<div class="listcontainer"> </ div>');
}
$ This.addClass ('list');
var listctnr = $ this.parent ();
listctnr.wrap ('<div class = "ui-konten-widget hoverscroll' +
(? Params.rtl && params.vertical "rtl": "") + '"> </ div>');
/ / Listctnr.wrap ('<div class="hoverscroll"> </ div>');
var ctnr = listctnr.parent ();
var Leftarrow, Rightarrow, topArrow, bottomArrow;
if (params.arrows) {
if (! params.vertical) {
if (params.fixedArrows) {
Leftarrow = '<div class="fixed-arrow left"> </ div>';
Rightarrow = '<div class="fixed-arrow right"> </ div>';
listctnr.before (Leftarrow) setelah (Rightarrow).;
}
else {
Leftarrow = '<div class="arrow left"> </ div>';
Rightarrow = '<div class="arrow right"> </ div>';
. listctnr.append (Leftarrow) append (Rightarrow);
}
}
else {
if (params.fixedArrows) {
topArrow = '<div class="fixed-arrow top"> </ div>';
bottomArrow = '<div class="fixed-arrow bottom"> </ div>';
listctnr.before (topArrow) setelah (bottomArrow).;
}
else {
topArrow = '<div class="arrow top"> </ div>';
bottomArrow = '<div class="arrow bottom"> </ div>';
. listctnr.append (topArrow) append (bottomArrow);
}
}
}
ctnr.width (params.width) tinggi (params.height).;
if (params.arrows && params.fixedArrows) {
if (params.vertical) {
topArrow = listctnr.prev ();
bottomArrow = listctnr.next();
listctnr.width (params.width)
. Tinggi (params.height - (topArrow.height () + bottomArrow.height ()));
}
else {
Leftarrow = listctnr.prev ();
Rightarrow = listctnr.next();
listctnr.height (params.height)
. Lebar (params.width - (leftArrow.width () + rightArrow.width ()));
}
}
else {
listctnr.width (params.width) tinggi (params.height).;
}
var size = 0;
if (! params.vertical) {
ctnr.addClass ('horizontal');
$ This.children (). Masing-masing (function () {
. $ (Ini) addClass ('item');
if ($ (this). outerWidth) {
size + = $ (ini) outerWidth (true).;
}
else {
size + = $ (ini) lebar. () + parseInt ($ (this). css ('bantalan-kiri')) + parseInt ($ (ini) css. ('padding-right'))
+ ParseInt (. $ (Ini) css ('margin-left')) + parseInt (. $ (Ini) css ('margin-right'));
}
});
$ This.width (size);
if (params.debug) {
. $ Log ('[HoverScroll] Computed lebar konten:' + ukuran + 'px');
}
if (ctnr.outerWidth) {
size = ctnr.outerWidth ();
}
else {
size = ctnr.width () + parseInt (ctnr.css ('bantalan-kiri')) + parseInt (ctnr.css ('padding-right'))
+ ParseInt (ctnr.css ('margin-left')) + parseInt (ctnr.css ('margin-right'));
}
if (params.debug) {
. $ Log ('[HoverScroll] Computed lebar container:' + ukuran + 'px');
}
}
else {
ctnr.addClass ('vertikal');
$ This.children (). Masing-masing (function () {
$ (Ini). AddClass ('item')
if ($ (this). outerHeight) {
size + = $ (ini) outerHeight (true).;
}
else {
size + = $ (ini) tinggi. () + parseInt ($ (ini) css. ('padding-top')) + parseInt ($ (ini) css. ('bantalan-bottom'))
+ ParseInt ($ (ini) css ('margin-bottom').) + ParseInt ($ (ini) css ('margin-bottom').);
}
});
$ This.height (size);
if (params.debug) {
. $ Log ('[HoverScroll] tinggi konten Computed:' + ukuran + 'px');
}
if (ctnr.outerHeight) {
size = ctnr.outerHeight ();
}
else {
size = ctnr.height () + parseInt (ctnr.css ('padding-top')) + parseInt (ctnr.css ('bantalan-bottom'))
+ ParseInt (ctnr.css ('margin-top')) + parseInt (ctnr.css ('margin-bottom'));
}
if (params.debug) {
. $ Log ('[HoverScroll] Computed ketinggian wadah:' + ukuran + 'px');
}
}
zona var = {
1: {aksi: 'bergerak', dari: 0, ke: 0.06 * ukuran, arah: -1, kecepatan: 16},
2: {aksi: 'bergerak', dari: 0.06 * ukuran, ke: 0.15 * ukuran, arah: -1, kecepatan: 8},
3: {aksi: 'bergerak', dari: 0.15 * ukuran, ke: 0.25 * ukuran, arah: -1, kecepatan: 4},
4: {aksi: 'bergerak', dari: 0.25 * ukuran, ke: 0.4 * ukuran, arah: -1, kecepatan: 2},
5: {aksi: 'stop', dari: 0.4 * ukuran, ke: 0.6 * Ukuran},
6: {aksi: 'bergerak', dari: 0.6 * ukuran, ke: 0.75 * ukuran, arah: 1, kecepatan: 2},
7: {aksi: 'bergerak', dari: 0.75 * ukuran, ke: 0.85 * ukuran, arah: 1, kecepatan: 4},
8: {aksi: 'bergerak', dari: 0.85 * ukuran, ke: 0.94 * ukuran, arah: 1, kecepatan: 8},
9: {aksi: 'bergerak', dari: 0.94 * ukuran, ke: ukuran, arah: 1, kecepatan: 16}
}
ctnr [0] = false isChanging.;
ctnr [0] = 0 arah.;
kecepatan = 1 ctnr [0];.
berfungsi checkMouse (x, y) {
x = x - ctnr.offset () kiri;.
y = y - ctnr.offset () atas;.
var pos;
jika {pos = x;} (params.vertical!)
else {pos = y;}
untuk (i di zona) {
if (pos> = zona [i]. dari && pos <zona [i]. untuk) {
if (zone [i] aksi == 'bergerak'.) {startMoving (zona [i] arah, zona [i] kecepatan..);}
else {stopMoving ();}
}
}
}
fungsi setArrowOpacity () {
jika | {return;} (params.arrows | params.fixedArrows!)
var maxScroll;
var gulir;
if (! params.vertical) {
maxScroll = listctnr [0] scrollWidth - listctnr.width ().;
gulir = listctnr [0] scrollLeft.;
}
else {
maxScroll = listctnr [0] scrollHeight - listctnr.height ().;
gulir = listctnr [0] scrollTop.;
}
limit var = params.arrowsOpacity;
var opacity = (scroll / maxScroll) * batas;
if (opacity> batas) {opacity = batas;}
if (illegalChars.test (opacity)) {opacity = 0;}
var dilakukan = false;
if (opacity <= 0) {
. $ ('Div.arrow.left, div.arrow.top', ctnr) hide ();
if (maxScroll> 0) {
$ ('Div.arrow.right, div.arrow.bottom', ctnr) show (css ('opacity', limit))..;
}
dilakukan = true;
}
if (opacity> = batas | | maxScroll <= 0) {
. $ ('Div.arrow.right, div.arrow.bottom', ctnr) hide ();
dilakukan = true;
}
if (! dilakukan) {
$ ('Div.arrow.left, div.arrow.top', ctnr) show (css ('opacity', opacity))..;
$ ('Div.arrow.right, div.arrow.bottom', ctnr) show (css ('opacity', (batas - opacity)))..;
}
}
fungsi startMoving (arah, kecepatan) {
if (ctnr [0] arah.! = arah) {
if (params.debug) {
. $ Log ('[HoverScroll] Mulai untuk memindahkan arah:. "+ Arah +', kecepatan: '+ kecepatan);
}
stopMoving ();
ctnr [0] = arah arah.;
ctnr [0] = true isChanging.;
bergerak ();
}
if (kecepatan ctnr [0].! = kecepatan) {
if (params.debug) {
. $ Log ('[HoverScroll] Berubah kecepatan:' + kecepatan);
}
ctnr [0] = kecepatan speed.;
}
}
fungsi stopMoving () {
if (ctnr [0]. isChanging) {
if (params.debug) {
. $ Log ('[HoverScroll] Stoped bergerak');
}
ctnr [0] = false isChanging.;
ctnr [0] = 0 arah.;
kecepatan = 1 ctnr [0];.
clearTimeout (. ctnr [0] timer);
}
}
fungsi gerakan () {
jika {return;} (ctnr [0] isChanging == false.)
setArrowOpacity ();
var scrollSide;
jika {scrollSide = 'scrollLeft';} (params.vertical!)
else {scrollSide = 'scrollTop';}
kecepatan listctnr arah [0] [scrollSide] + = ctnr [0] * ctnr [0]..;
. ctnr [0] = Timer setTimeout (function () {move ();}, 50);
}
if (params.rtl &&! params.vertical) {
.. listctnr [0] = scrollLeft listctnr [0] scrollWidth - listctnr.width ();
}
ctnr
. Mousemove (function (e) {checkMouse (e.pageX, e.pageY);})
. Bind ('mouseleave', function () {stopMoving ();});
this.startMoving = startMoving;
this.stopMoving = stopMoving;
if (params.arrows &&! params.fixedArrows) {
/ / Menginisialisasinya arrow opacity
setArrowOpacity ();
}
else {
/ / Hide panah
. $ ('.... Arrowleft, arrowright, arrowtop, arrowbottom', ctnr) hide ();
}
});
kembali ini;
};
if (! $. fn.offset) {
$. Fn.offset = function () {
this.left = this.top = 0;
if (ini [0] && ini [0]. offsetParent) {
var obj = ini [0];
do {
this.left + = obj.offsetLeft;
this.top + = obj.offsetTop;
} While (obj = obj.offsetParent);
}
kembali ini;
}
}
$. Fn.hoverscroll.params = {
vertikal: false,
width: 400,
height: 50,
panah: true,
arrowsOpacity: 0,7,
fixedArrows: false,
rtl: false,
debug: palsu
};
$. Log = function () {
try {console.log.apply (console, argumen);}
catch (e) {
try {opera.postError.apply (opera, argumen);}
catch (e) {}
}
};
}) (JQuery);
$ (Function () {
$ ("# Videoslider-tab a"). Klik (function () {
var container = $ ("# videoslider-konten");
container.html ("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvgoTjICoeY6QwS8l9v5w836yJ8RreCfkpVKAAveFU9D3AmXhm3y9eelhb0W7X99WyT9txHSe_ruVkRmj6KBaCYBiXmO_7cRBEHu1sjfoxBOfxEZBI90aBOG6CLAP7HEe-KyKiQdwwkZJZ/s1600/loading.png' class='loading-vid' />");
.. var id = $ (ini) attr ("href") slice (1);
loadvideo (id);
return false;
});
$ ("# Videoslider-tab") hoverscroll ({vertikal: true, width: 300, height: 330, panah: false}).;
. $ ("# Videoslider-tab li") membawa (function () {. $ (Ini) addClass ("melayang-layang");}, function () {$ (ini) removeClass ("melayang-layang");.});
loadvideo ();
});
fungsi loadvideo (hash) {if (hash) {hash = hash.slice (3); $ ("# videoslider-konten") html (Video [hash]);. $ ("# videoslider-tab li") removeClass. ("actVid"); $ ("# videoslider-tab li ") removeClass (." actVid "); $ (". ") orang tua () addClass (." # videoslider-tab a [href = # vid1] actVid ");}}
/ /]]>
</ Script>
Kemudian tambahkan gaya sebelum]]> </ b: skin>
/ * Gallery Video untuk Blogger----------------------------------------------- * /# Videoslider {background: # 000; / * Warna latar belakang * /clear: both;margin: 0 auto;padding: 5px;width: 765px;border-radius: 5px;-Moz-background-clip: bantalan;-Webkit-background-clip: bantalan-kotak;background-clip: bantalan-kotak;}# Videoslider, # videoslider-konten, # videoslider-tab {height: 350px; overflow: hidden;}# Videoslider-konten {color: # fff; float: left; text-align: center; width: 460PX; z-index: 1;}. Bongkar-vid {display: block; margin: 165px auto 0;}# Videoslider-tab {float: right; width: 300px; margin: 0;}# Videoslider-tab li repeat-x top left; float: left; height: 60px; padding: 5px; width: 290px; list-style: none;}# Videoslider-tab li a {padding: 0 penting; border: 0 penting;}# Videoslider-tab li.hover {background: # 333;}# Videoslider-tab li.actVid {background: # 555;}# Videoslider-tab li img.thumb-vid {background-color: # fff; float: left; height: 52px; margin: 0 8px 0 0; padding: 5px; width: 52px;}# Videoslider-tab li span.vidTit {display: block;color: # CD332D; / * Judul warna * /font-size: 14px; / * Judul ukuran font * /font-weight: bold;text-decoration: none;}# Videoslider-tab li. VidDesc {display: block;color: # fff; / * Warna deskripsi * /font-size: 12px; / * Ukuran font dari deskripsi * /font-weight: bold;text-decoration: none;}# Videoslider-tab a {text-decoration: none;}. # Videoslider-tab li.actVid vidDesc {color: # fff;}. Ui-widget-content {float: right;}. Tabs-outer {background-image: none penting;}# Videoslider-tab li a: hover {background: none penting;}
Sekarang di gadget HTML / Javascript paste struktur slider, ini adalah salah satu yang harus diletakkan di bawah header:
<script>var video = [];Video [1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ video_ID_1 "frameborder="0" allowfullscreen> </ iframe>';Video [2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ video_ID_2 "frameborder="0" allowfullscreen> </ iframe>';Video [3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ video_ID_3 "frameborder="0" allowfullscreen> </ iframe>';Video [4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ video_ID_4 "frameborder="0" allowfullscreen> </ iframe>';Video [5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/ video_ID_5 "frameborder="0" allowfullscreen> </ iframe>';</ Script><div id="videoslider"><div id="videoslider-content"> </ div><ul id="videoslider-tabs"><a href="#vid1"> <img src="//i2.ytimg.com/vi/ video_ID_1 /default.jpg" class="thumb-vid" /> <span class="vidTit">Video Nama </ span> class="vidDesc"> Video Description </ span> </ a> </ li><a href="#vid2"> <img src="//i2.ytimg.com/vi/ video_ID_2 /default.jpg" class="thumb-vid" /> <span class="vidTit">Video Nama </ span> class="vidDesc"> Video Description </ span> </ a> </ li><a href="#vid3"> <img src="//i2.ytimg.com/vi/ video_ID_3 /default.jpg" class="thumb-vid" /> <span class="vidTit">Video Nama </ span> class="vidDesc"> Video Description </ span> </ a> </ li><a href="#vid4"> <img src="//i2.ytimg.com/vi/ video_ID_4 /default.jpg" class="thumb-vid" /> <span class="vidTit">Video Nama </ span> class="vidDesc"> Video Description </ span> </ a> </ li><a href="#vid5"> <img src="//i2.ytimg.com/vi/ video_ID_5 /default.jpg" class="thumb-vid" /> <span class="vidTit">Video Nama </ span> class="vidDesc"> Video Description </ span> </ a> </ li></ Ul></ Div>
Tambahkan ID dari video, nama dan deskripsi mereka dan hanya itu. Deskripsi harus singkat sehingga Anda tidak akan memiliki masalah ruang.
Jika Anda tidak tahu bagaimana untuk mendapatkan ID video, kemudian buka video di YouTube dan melihat address bar ... karakter terakhir adalah ID yang Anda butuhkan.
Perhatikan bahwa ID dari setiap video harus ditambahkan dua kali, satu untuk menampilkan video dan satu untuk thumbnail tab.
Sebagai galeri ini bekerja dengan jQuery kita harus memastikan untuk tidak mengulangi versi script jika kita sudah memiliki jQuery.
Tidak ada komentar:
Posting Komentar