Funkysst.com: jQuery
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Friday, March 2, 2018

Orbit - jQuery Image Slider Plugin Untuk Blogger

Tutorial ini akan menunjukkan cara menambahkan slider gambar cantik lainnya untuk Blogger / BlogSpot yang dibuat dengan jQuery dan, tentu saja, dengan HTML dan CSS. Slider ini, yang disebut Orbit, adalah plugin jQuery ringan yang akan menampilkan banyak gambar dalam ruang terbatas menggunakan panah navigasi (tombol sebelumnya-berikutnya). Di bagian kiri atas Orbit slideshow, kita memiliki beberapa ikon peluru kecil yang menunjukkan gambar saat ini yang sedang kita lihat dan, di sisi kanan atas, adalah pilihan jeda dan penghitung waktu yang memberi tahu kita kapan gambar berikutnya akan ditampilkan.

Jika Anda ingin melihat slider gambar keren ini beraksi, kunjungi blog demo ini:


gambar slider, slideshow, jquery


Markup HTML cukup bersih, hanya elemen yang membungkus beberapa gambar tempat teks dibuat dari tag rentang gambar ini.

Cara Menambahkan Slider Gambar Orbit ke Blogger

Langkah 1. Dari Dasbor Blogger Anda, buka Template> Edit HTML> klik di manapun di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian blogger. Tempelkan atau ketik tag di bawah di dalam kotak telusur dan tekan Enter untuk menemukannya.
</ head>

Langkah 2. Tepat di atas </ head> tambahkan script berikut ini:

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

<! - [jika IE]>
<style type = "text / css">
.timer {display: none! important; }
div.caption {background: transparan; filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 99000000, endColorstr = # 99000000); zoom: 1; }
</ style>
<! [endif] ->

<script type = 'text / javascript'>
$ (window) .load (fungsi () {
$ (# #; # Fitur & # 39;) orbit ({
advanceSpeed: 5000,
Bullet & # 39 ;: benar,
& # 39; timer & # 39; : benar,
& # 39; animasi & # 39; : & # 39; horizontal-slide & # 39;
});
});
</ script>

<script type = 'text / javascript'>
// <! [CDATA [
/ *
* Plugin Orbit jQuery 1.1
* www.ZURB.com/playground
* Hak Cipta 2010, ZURB
Bebas digunakan di bawah lisensi MIT.
* http://www.opensource.org/licenses/mit-license.php
* /

(fungsi (e) {e.fn.orbit = fungsi (a) {a = e.extend ({animation: "fade", animationSpeed: 800, advanceSpeed: 4E3, startClockOnMouseOut: true, startClockOnMouseOutAfter: 3E3, directionalNav: true, Teks: true, captionAnimationSpeed: 800, timer: false, bullets: false}, a); return this.each (function () {function m (c) {function g () {f.eq (h) .css ({ "z-index": 1}); s = false} var h = b, k = c; if (h == k) return false; if (! s) {s = true; if (c == "next else if (b == n) b = 0) else if (c == "prev") {b -; if (b <0) b = n-1} else {b = c; if (h <b) k = "next"; else if (h> b) k = "prev"} a.bullet & &
x (); if (a.animation == "fade") {f.eq (h) .css ({"z-index": 2}); f.eq (b) .css ({opacity: 0, "z-index": 3}) bernyawa ({opacity: 1}, a.animationSpeed, g); a.captions && o ()} if (a.animation == "horizontal-slide") {f.eq (h ) .css ({"z-index": 2}); k == "next" && f.eq (b) .css ({left: t, "z-index": 3}) bernyawa ({left: 0}, a.animationSpeed, g); k == "prev" && f.eq (b) .css ({left: -t, "z-index": 3}) bernyawa ({left: 0}, a .jimationSpeed, g); a.captions && o ()} if (a.animation == "vertical-slide") {f.eq (h) .css ({"z-index": 2}); k == " prev "&& f.eq (b) .css ({top: u," z-index ": 3}) bernyawa ({top: 0},
a.animationSpeed, g); k == "next" && f.eq (b) .css ({top: -u, "z-index": 3}) bernyawa ({top: 0}, a.animationSpeed, g); a.captions && o ()}}} var b = 0, n = 0, t, u, s, d = e (this) .addClass ("orbit"), f = d.find ("img, a img "); f.each (fungsi () {var c = e (ini), g = c.width (); c = c.height (); d.width (g); t = d.width () , d.height (c); u = d.height (); n ++}); f.eq (b) .css ({"z-index": 3}); if (a.timer) {d.append ('<div class = "timer"> <span class = "mask"> <span class = "rotator"> </ span> </ span> <span class = "jeda"> </ span> </ div> '); var j = e ("div.timer"), p; jika (j.length! = 0) {var C =
a.advanceSpeed ​​/ 180, v = e ("div.timer span.rotator"), y = e ("div.timer span.mask"), z = e ("div.timer span.pause"), l = 0, A, w = function () {p = true; z.removeClass ("active"); A = setInterval (function () {var c = "rotate (" + l + "deg)"; l + = 2; v .css ({"- webkit-transform": c, "- moz-transform": c, "- o-transform": c}); if (l> 180) {v.addClass ("move"); y Jika (l> 360) {v.removeClass ("move"); y.removeClass ("move"); l = 0; m ("next")}}, C)}, q = function () {p = false; clearInterval (A); z.addClass ("active")}; w (); j.click (function () {p? q (): w ()}); if (a.startClockOnMouseOut) {var B;
d.mouseleave (function () {B = setTimeout (function () {p || w ()}, a.startClockOnMouseOutAfter)}); d.mouseenter (function () {clearTimeout (B)})}}} jika ( a.captions) {d.append ('<div class = "caption"> <span class = "orbit-caption"> </ span> </ div>'); var r = d.children ("div.caption ") (c) f (b) .attr (" rel "), g = e (), o = function () {var c = f.eq (b) .attr (" span "), g = e "#" + c) .html (), h = r.height () + 20; r.attr ("id", "#" + c) .html (g); g? r.parent () berhenti () .ivimate ({bottom: 0}, a.captionAnimationSpeed): r.parent () stop () bernyawa ({bottom: -h},
a.captionAnimationSpeed)}; o ()} if (a.directionalNav) {d.append ('<div class = "slider-nav"> <span class = "right"> Kanan </ span> <span class = " kiri "> Kiri </ span> </ div> '); j = d.children (" div.slider-nav ") anak-anak (" span.left "); var D = d.children (" div.slider -nav ") anak-anak (" span.right "); j.click (fungsi () {a.timer && q (); m (" prev ")}); D.click (function () {a.timer && q () ; m ("next")})} jika (a.bullet) {d.append ('<ul class = "orbit-bullets"> </ ul>'); var E = e ("ul.orbit-bullets "); untuk (i = 0; i <n; i ++) {j = e (" <li> "+ i +" </ li> "); e (" ul.orbit-bullets "). tambahkan (j) ;
j.data ("index", i); j.click (function () {a.timer && q (); m (e (this) .data ("index"))}) var x = function () {E (b) .addClass ("active")}; x ()}})}}) (jQuery);
//]]>
</ script>

Catatan: Anda dapat mengubah kecepatan transisi di antara setiap gambar dengan memodifikasi nilai 5000 dari garis biru - angka yang lebih tinggi akan membuat gambar bertahan lebih lama di antara setiap transisi.

Penting! Jika Anda telah memiliki versi jQuery di template Anda, hapus garis merah, jika tidak, slideshow mungkin tidak bekerja.

Langkah 3. Sekarang saatnya menambahkan CSS. Temukan (CTRL + F) tag ini:
]]> </ b: skin>
Langkah 4. Tepat di atas ]]> </ b: skin> tambahkan kode ini:
#featured {height: 1px; lebar: 1px; overflow: hidden;}
div.orbit {
lebar: 1px;
tinggi: 1px;
posisi: relatif;
overflow: tersembunyi;
}

div.orbit img {
posisi: absolut;
atas: 0;
kiri: 0;
}
div.orbit sebuah img {border: none;}

div.timer {
lebar: 40px;
tinggi: 40px;
overflow: tersembunyi;
posisi: absolut;
atas: 10px;
kanan: 10px;
keburaman: .6;
kursor: pointer;
z-index: 1001;
}

span.rotator {
tampilan: blok;
lebar: 40px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kiri: -20px;
background: url (http://2.bp.blogspot.com/-RIbuOzbC8os/UwDPg1IgFaI/AAAAAAAAGN0/DrmP4kh7G08/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
tampilan: blok;
lebar: 20px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kanan: 0;
z-index: 2;
overflow: tersembunyi;
}

span.rotator.move {left: 0;}
span.mask.move {
lebar: 40px;
kiri: 0;
background: url (http://1.bp.blogspot.com/-9FdwFtBqvS4/UwDPqzE3ABI/AAAAAAAAGN8/r4xhlPpOHY4/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
tampilan: blok;
lebar: 40px;
tinggi: 40px;
posisi: absolut;
atas: 0;
kiri: 0px;
background-image: url (http://2.bp.blogspot.com/-8G-L7Onwt-Y/UwDPy372vYI/AAAAAAAAGOE/4qUdsKJaK98/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
keburaman: 0;
}

div.timer: hover span.pause,
span.pause.active,
div.timer: hover span.pause.active {opacity: 1; }

div.caption {
latar belakang: # 000;
latar belakang: rgba (0,0,0, .6);
lebar: 100%;
z-index: 1000;
posisi: absolut;
bawah: -100px;
warna: #fff;
padding: 8px 0;
text-align: center;
}

rentang div.caption {
padding: 0 10px;
ukuran huruf: 14px;
text-shadow: 0px 1px 0px rgba (0,0,0, .8);
margin: 0;
}
caption-caption {display: none; }

div.orbit: hover div.slider-nav {display: block; }
div.slider-nav {display: none; }
div.slider nav team {
lebar: 33px;
tinggi: 33px;
text-indent: -9999px;
posisi: absolut;
z-index: 1000;
atas: 43%;
kursor: pointer;
}

div.slider-nav span.right {
background-image: url (http://1.bp.blogspot.com/-oW1NQkjT3Ws/UwDP7b7T2-I/AAAAAAAAGOM/JaeJxm9qZ60/s1600/arrow-right.png);
kanan: 10px;
}
div.slider-nav span.left {
background-image: url (http://3.bp.blogspot.com/-T9eMQBFvVro/UwDQBxCnpWI/AAAAAAAAGOU/L8KS7EAOqOU/s1600/arrow-left.png);
kiri: 10px;
}

.orbit-peluru {
posisi: absolut;
z-index: 1000;
daftar-gaya: tidak ada;
atas: 10px;
kiri: 7px;
margin: 0;
padding: 0;
}

.orbit-peluru li {
float: kiri;
margin-left: 5px;
kursor: pointer;
warna: # 999;
text-indent: -9999px;
background-image: url (http://1.bp.blogspot.com/-lKQgWI4_xhQ/UwDQI0WIQmI/AAAAAAAAGOc/1e6zuurwFSg/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
lebar: 7px;
tinggi: 7px;
overflow: tersembunyi;
}
.orbit-peluru li.active {color: # 222; background-position: -7px 0; }
Langkah 5. Klik pada tombol "Simpan template" untuk menyimpan perubahan.

Akhirnya, kita akan menggunakan kode HTML yang menampilkan gambarnya. Kami memiliki pilihan untuk menambahkan slider baik di dalam salah satu posting / halaman kami, atau menampilkannya sebagai gadget di sidebar blog atau di bawah header.

Jika Anda memilih untuk menambahkannya ke dalam salah satu posting Anda, beralihlah ke tab HTML dan tempel kode di bawah ini di dalam kotak HTML pos Anda.

Jika Anda ingin menambahkannya di sidebar blog / di bawah header, masuklah ke "Layout", klik pada "Add a gadget link"> pilih "HTML / JavaScript" dari jendela pop-up dan tempel html ini di dalam kotak. :
<div id = 'featured'>

<a href=' Tautkan URL'> <img rel = ' photo1 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Orbit-caption id = "span class =' photo1 "> Bagaimana Jepang pisang makro dan diurutkan sekarang, besar utama. </ Span>

<a href=" URL tautan "> <img rel = ' photo2 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<span class = 'orbit-caption' id = ' photo2 '> Ini adalah contoh deskripsi dengan tautan: <a href=' Deskripsi URL tautan 'style='color: #09A7EA ;'> Helplogger </a> </ span>

<a href=" URL tautan "> <img rel = ' photo3 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Span class = 'orbit-caption id = " photo3 style =" text-align: center "> Bagaimana Jepang makro pisang dan diurutkan itu sekarang, besar utama. </ Span>

<a href=' Tautkan URL'> <img rel = ' photo4 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<span class = 'orbit-caption' id = ' photo4 '> Ini adalah contoh deskripsi dengan tautan: <a href=' Deskripsi URL tautan 'style='color: #09A7EA ;'> Helplogger </a> </ span>

</ div>
Kode ini berisi gambar, link dan deskripsi untuk setiap gambar. Secara biru, adalah URL dari link dan gambar yang perlu Anda ganti dengan milik Anda. Di dalam kode HTML setiap gambar, Anda memiliki ukuran setiap gambar yang dapat diubah dengan memodifikasi lebar (590) dan tinggi (348) nilai. Untuk menambahkan deskripsi gambar Anda, ganti teks dengan warna merah.

Jika Anda ingin menambahkan lebih banyak gambar, tambahkan HTML ini sebelum tag </ div> :
<a href=' URL Tautan'> <img rel = ' photo5 ' src = " URL gambar " style = 'height: 348 px; lebar: 590 px; '/> </a>
<Span class = 'orbit-caption id = " photo5 '> Bagaimana Jepang makro pisang dan diurutkan itu sekarang, besar utama. </ Span>
Perhatikan bahwa setiap gambar dan deskripsi memiliki pengenal unik (id) dan tidak boleh diulang. Misalnya, dalam deskripsi teks gambar pertama, kita memiliki id = " photo1 " dan dalam kode gambar adalah atribut "rel" dengan nama id, yaitu rel = " photo1 ".

Setelah menambahkan gambar Anda, klik tombol "Simpan" atau "Publikasikan" dan hanya itu! Sekarang Anda bisa menikmati Slider Gambar Orbit keren ini untuk Blogger.