Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.
Friday, June 15, 2012
MyTooltip jQuery Plugin
MyTooltip is a very lightweight jQuery tooltip plugin see? I made this just to give something simple to you who just want to beautify the default tooltip appearance.
MyTooltip adalah plugin jQuery yang luar biasa ringan. Saya membuat ini sekedar untuk memberikan alternatif yang jauh lebih sederhana sebagai pengganti plugin tooltip yang lain kepada Anda yang hanya ingin mempercantik tampilan tooltip standar:
Sertakan jQuery dan plugin tooltip di atas kode </head>. Untuk memodifikasi tampilan tooltip, cukup seleksi elemen yang Anda inginkan kemudian terapkan method .myTooltip() seperti ini:
Hanya ada sedikit opsi lanjutan yang bisa Anda atur di sini (seperti yang Saya katakan di atas: luar biasa ringan) yaitu meliputi atribut, posisi dan efek:
Artinya bahwa tooltip akan menampilkan teks yang berasal dari atribut title pada elemen target. Sebagai contoh, jika Anda mengubah "title" menjadi "href", maka tooltip yang tampil berupa URL.
top
Digunakan untuk mengatur jarak atas tooltip dari pointer.
left
Digunakan untuk mengatur jarak samping kiri tooltip dari pointer.
fade
Jika bernilai true maka tooltip akan ditampilkan dengan efek animasi .fadeIn()
time
Digunakan untuk mengatur kecepatan efek .fadeIn()
Contoh Penerapan: Atribut Pengganti
Katakanlah kita tidak ingin menampilkan teks tooltip dari atribut title, maka kita bisa mengubah target atributnya seperti ini:
<img src="img/my-image.jpg" alt="This is a tooltip!">
$('img').myTooltip("alt"); // Tooltip akan menampilkan nilai atribut `alt` dari gambar
Contoh Penerapan: Modifikasi Posisi
Posisi tooltip terhadap pointer bisa dimodifikasi:
// Tooltip akan memiliki jarak atas
// sebesar 50 piksel dan jarak samping
// sebesar 70 piksel
$('a').myTooltip("title", {
top: 50,
left: 70
});
Contoh Penerapan: Mengaktifkan Efek Fade Saat Tooltip Ditampilkan
Set opsi fade menjadi true dan tentukan kecepatan animasi pada opsi time jika perlu:
Contoh Penerapan: Modifikasi Tampilan Spesifik pada Setiap Tooltip
Untuk menciptakan tampilan spesifik tentunya kita membutuhkan kelas yang spesifik juga. Di sini Saya memberikan fasilitas untuk menyisipkan kelas spesifik pada tooltip yang diinginkan dengan cara menambahkan atribut data-custom pada elemen target dengan nilai yang nantinya akan menjadi kelas baru pada tooltip:
<a href="#" data-custom="yourClass" title="This is a custom tooltip!">Example Link</a>
Kemudian atur tampilannya sesuka hati dengan cara menambahkan kode CSS khusus untuk kelas yang sudah Anda tentukan dalam atribut data-custom:
.yourClass {
background-color:red;
color:yellow;
/* Dan sebagainya... */
}
Integrasi Plugin ke Blogger
Masuk ke halaman editor HTML Template Anda:
Mengedit HTML
Temukan kode ini:
]]></b:skin>
Salin kode CSS di bawah ini dan letakkan di atasnya:
pre {
background-color:white;
color:#069;
padding:0em 1em;
overflow:auto;
white-space:pre;
word-wrap:normal;
font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
position:relative;
margin:0 0 1em;
}
pre .the-num {
position:absolute;
top:0;
bottom:0;
left:0;
padding:0 1em;
color:#999;
background-color:#eee;
border-right:2px solid #ccc;
}
pre .bracket {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector {color:blue;}
pre .attribute,
pre .regexp {color:darkorange;}
pre .str {color:green;}
pre .tag .str {color:brown;}
pre .keyword {color:darkred;}
pre .comment {font-style:italic;color:#999;}
pre .num,
pre .hex {color:darkviolet;}
pre .name,
pre .important,
pre .array {color:red;}
pre .important {background-color:yellow;}
pre .doctype {color:magenta;}
Kode di atas kurang cerdas karena jQuery hanya memposisikan kursor di tengah elemen bergerak. Di sini Saya sudah membuat plugin sederhana yang lebih cerdas dan dapat menyesuaikan posisi pointer terhadap elemen, tidak harus selalu di tengah elemen:
Barusan Saya menemukan kode bagus di sini: Creating a Text Rotator with jQuerySangat sederhana dan mudah dipahami. Sebuah fungsi jQuery slider dasar untuk merotasikan sekelompok elemen di dalam kontainer yang seringkali dicari. Saya mencoba mengonversikannya menjadi plugin seperti ini:
Plugin
(function($) {
$.fn.rotator = function(settings) {
settings = jQuery.extend({
interval: 3000,
speed: 1000
}, settings);
return this.each(function() {
var $t = $(this),
$item = $t.children().addClass('item').hide();
$t.addClass('rotator');
// Jalankan animasi jika jumlah item lebih dari satu!
if ($item.length > 1) {
// Tambahkan kelas 'current' pada item pertama sebagai penanda awal slide
$item.first().addClass('current').fadeIn(settings.speed);
// Menjalankan interval fungsi animasi dengan waktu interval yang telah ditentukan
setInterval(function() {
var c = $t.find('.current');
// Jika item (slide) setelah item aktif tidak ditemukan...
if (c.next().length === 0) {
// Hilangkan kelas 'current' pada item aktif
c.removeClass('current').fadeOut(settings.speed);
// Kemudian tambahkan kelas 'current' ke item pertama...
// sehingga rotasi bisa dimulai kembali dari awal!
$item.first().addClass('current').fadeIn(settings.speed);
} else {
// Jika tidak (jika item setelah item aktif ditemukan) ...
// Hilangkan kelas 'current' pada item aktif
// Kemudian tambahkan kelas 'current' pada item berikutnya
c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
}
}, settings.interval);
}
});
};
})(jQuery);
Berbeda dengan plugin tabulasi yang lainnya, plugin ini relatif lebih mudah dalam hal implementasi karena Anda tidak akan lagi direpotkan dengan pembuatan markup tabulasi yang rumit. Biarkan jQuery yang melakukan semuanya, sementara yang perlu Anda lakukan hanyalah menciptakan beberapa elemen <div> di dalam sebuah kontainer saja seperti ini:
Digunakan untuk menentukan tab ke berapa yang akan ditampilkan saat pertama kali
fx
Digunakan untuk menentukan tipe efek animasi saat pergantian tab terjadi. Ada tiga macam efek lanjutan, yaitu "fade", "slide" dan "fancyslide". Jika tipe efek tidak ditentukan, pergantian tabulasi akan berjalan tanpa efek animasi
showSpeed
Digunakan untuk menentukan kecepatan pembukaan konten tab
hideSpeed
Digunakan untuk menentukan kecepatan penutupan konten tab
showEasing
Digunakan untuk menentukan tipe easing saat pembukaan konten tab
hideEasing
Digunakan untuk menentukan tipe easing saat penutupan konten tab.
Cara menggunakannya sama dengan plugin jQuery UI Accordion. Hanya saja Saya mencoba menyederhanakan kerangka dan opsinya untuk kebutuhan skala kecil.
Pertama-tama buat kerangka HTML seperti ini:
<div id="accordion">
<div data-header="Accordion Title 1">Content 1</div>
<div data-header="Accordion Title 2">Content 2</div>
<div data-header="Accordion Title 3">Content 3</div>
<div data-header="Accordion Title 4">Content 4</div>
</div>
Setiap nama header akordion disimpan di dalam atribut data-header. Plugin di atas nantinya akan memindahkan/menyalin nilai atribut tersebut untuk disisipkan ke dalam elemen <h2> yang akan diciptakan secara otomatis.
Berikutnya adalah kode CSS dasar untuk menciptakan dimensi akordion seperlunya. Silakan dimodifikasi sendiri:
Beberapa orang berpendapat bahwa kompresi JavaScript, CSS, gambar atau bahkan HTML bisa mempercepat proses muat halaman sebuah situs. Tapi Saya tidak pernah setuju dengan itu 100%. Ada begitu banyak hal yang harus menjadi pertimbangan lebih lanjut dibandingkan sekedar memfokuskan perhatian Anda terhadap perhitungan besar kecilnya ukuran file. Kebanyakan alat kompresi hanya akan memperkecil ukuran berkas tidak lebih dari 20%:
Dan lagipula, kompresi yang dilakukan hanya berada pada seputar peringkasan variabel dan pembuangan karakter spasi yang tidak diperlukan. Itu sama sekali tidak mempercepat proses muat halaman sepenuhnya, itu hanya akan mempercepat proses pengunduhan file secara sepihak. Dalam hal ini adalah CSS/JavaScript yang notabene hanyalah file berupa teks, sehingga mengunduh teks yang dikompresi dengan teks yang tidak dikompresi tidak akan memberikan begitu banyak perbedaan. Kecepatan muat halaman situs tidak semata-mata dipengaruhi oleh faktor ukuran file, tapi juga oleh validasi, permintaan HTTP dan juga ketepatan pendeklarasian kode tugas yang akan memberikan timbal balik berupa kemudahan peramban dalam membaca dokumen Anda.
JavaScript Packer vs. Minifier
Mana yang lebih cepat dimuat, antara JavaScript yang dikompres dengan teknik Packer dan teknik Minifier? Seharusnya Packer lebih cepat karena mereka akan mengompres kode jauh lebih banyak dibandingkan Minifier.
Mohon pertimbangkan sekali lagi. Packer memang akan memperkecil ukuran JavaScript jauh lebih banyak dibandingkan Minifier, tapi imbasnya adalah peramban harus memberikan waktu tambahan untuk menyusun kembali kode-kode yang sudah dipecah meskipun kenyataannya ukuran mereka sudah diperkecil. Packer (dan Obfuscator) akan membuat JavaScript lebih lama dimuat bukan karena ukuran file yang besar, namun karena membuat waktu membaca peramban menjadi lebih lama. Saat kita mengompres JavaScript dengan Packer atau Obfuscator, kita seperti sedang memberikan teka-teki sandi perintah terlebih dahulu untuk dijawab oleh peramban sebelum pada akhirnya mereka berhasil menjawabnya dan menjalankan tugasnya. Lebih baik gunakan Minifier dibandingkan Packer jika memang ingin mengurangi ukuran file JavaScript:
Menggunakan Base62 menambahkan langkah tambahan sebelum JavaScript dapat dimanfaatkan oleh klien. Untuk jenis perpustakaan jQuery langkah ini dapat mengambil ekstra waktu 100 - 500ms pada klien, tergantung pada banyak faktor.
Sekarang kita dapat membandingkan pengurangan "waktu untuk mengunduh script" dan "waktu tambahan yang dibutuhkan untuk mengeksekusi script". Ini (packer/teknik base62) dapat mengurangi waktu pengunduhan sebanyak 50ms tetapi mengambil ekstra 100ms hanya untuk memprosesnya (menyusun kembali kode yang sudah terpecah-pecah) - Sumber
Lalu bagaimana dengan alasan perlindungan kode? Bukankah Packer dan Obfuscator jauh lebih melindungi kode dibandingkan Minifier?
Ini semua adalah pilihan. Pada dasarnya setiap teknik kompresi masih tetap bisa menjaga agar file bisa dibaca oleh peramban. Ambil keputusan yang sekiranya memiliki kerugian terkecil berdasarkan tujuan.
Semakin banyak permintaan HTTP (HTTP Requests) yang terjadi, maka akan semakin lambat halaman termuat. Permintaan HTTP pada dasarnya hanyalah tentang seberapa banyak peramban menghubungi server untuk memanggil data. Cara mengecek permintaan yang terjadi sebenarnya sangat mudah. Perhatikan saja status bar pada peramban Anda saat halaman sedang dimuat:
Melihat proses transfer data melalui bar status
Dari situ Anda bisa melihat mana data yang cepat diakses dan mana yang lebih lama diakses berdasarkan kecepatan perubahan status. Jika Anda sudah menemukan apa yang membuat situs Anda menjadi lambat, Anda bisa segera mengambil keputusan terhadap file yang berhubungan dengan itu. Apakah akan membuangnya atau mengubah pengurutan permintaan yang lebih lambat menuju ke level yang lebih rendah (tidak dinomorsatukan). Misalnya, dengan cara meletakkan file yang lebih lama termuat di sebelah bawah.
Usahakan untuk mengurangi permintaan HTTP dari situs pihak ke tiga sebanyak mungkin. Katakanlah kita memiliki sebuah blog yang dilengkapi dengan widget Facebook Like, Twitter Feed, Chatbox dan Disqus dalam satu halaman yang sama. Ditambah lagi foto-foto artikel dan gambar latar belakang yang diunggah di Photobucket, kode CSS yang disimpan di GitHub dan JavaScript yang disimpan di Google Code. Kita bisa mengatakan itu semua sebagai komponen permintaan situs pihak ke tiga, karena kita telah menyisipkan berbagai URL file yang disimpan di ruang penyimpanan lain ke dalam blog kita.
Meskipun mereka semua hanya berupa file-file kecil yang umumnya berupa teks, namun saat Anda membuka halaman blog dimana file-file yang disertakan di dalamnya masih merupakan milik situs lain, itu tetap saja akan memiliki arti yang sama seperti halnya Anda sedang membuka semua situs tersebut secara bersamaan!
Menggabungkan Semua File Eksternal Sejenis
Menggabungkan semua file sejenis ke dalam sebuah file besar bisa menjadi solusi termudah untuk mengurangi permintaan HTTP. Artinya bahwa kita akan mengubah sesuatu yang tadinya seperti ini:
Ini berlaku juga untuk JavaScript dan CSS internal. Meskipun mereka tidak memiliki hubungan dengan permintaan HTTP, namun mengurangi jumlah tag <style> dan <script> di dalam dokumen juga bisa mempermudah peramban dalam membaca dokumen (memperpendak jarak baca dan mengurangi pengulangan baca file dengan tipe yang sama):
<script>
function abc() {
document.write('abc');
}
</script>
<script>
function def() {
alert('def');
}
</script>
<script>
function ghi() {
var c = confirm('ghi?');
if(c) window.open('http://nama_blog.com');
}
</script>
<script>
$(function() {
// DOM ready 1 ...
});
$(function() {
// DOM ready 2 ...
});
$(function() {
// DOM ready 3 ...
});
</script>
<script>
abc();
def();
ghi();
</script>
<style>#lorem {width:200px}</style>
<style>#ipsum {color:red}</style>
<style>#dolor {border:1px solid blue}</style>
Ubah semua susunan kode di atas menjadi seperti ini:
<style>
#lorem {width:200px}
#ipsum {color:red}
#dolor {border:1px solid blue}
</style>
<script>
function abc() {
document.write('abc');
}
function def() {
alert('def');
}
function ghi() {
var c = confirm('ghi?');
if(c) window.open('http://nama_blog.com');
}
$(function() {
// DOM ready 1 ...
// DOM ready 2 ...
// DOM ready 3 ...
});
</script>
<script>
abc();
def();
ghi();
</script>
Meletakkan JavaScript di atas </body>
Ini memiliki arti bahwa kita meletakkan JavaScript sejauh mungkin dari sebelah atas dokumen. Hal ini disarankan untuk mencegah keterlambatan pemuatan kerangka HTML di bawahnya karena lambatnya proses muat JavaScript di atasnya. Dengan meletakkan JavaScript di bawah, maka setidaknya kita telah mengizinkan peramban untuk merayapi kerangka halaman terlebih dahulu sebelum kemudian sampai pada masa untuk memuat dan membaca JavaScript. Posisikan juga CSS lebih awal dibandingkan JavaScript sehingga pembentukan tubuh halaman akan dieksekusi terlebih dahulu dibandingkan pengerjaan JavaScript.
Tapi tunggu dulu! Meletakkan JavaScript di bagian bawah juga tidak sepenuhnya benar. Beberapa faktor bisa membuat mereka tidak bekerja. Selengkapnya bisa di baca di sini
Merasa Blog/Situs Anda Sudah Cukup Cepat?
Jangan senang dulu. Mungkin itu karena Anda telah mengunjungi situs web Anda berkali-kali, yang juga berarti bahwa cache dari situs Anda masih tersimpan di dalam komputer. Sekarang coba Anda hapus semua cache yang ada kemudian muat ulang halaman situs Anda kembali:
Menghapus Cache
Saat cache sudah terhapus, maka Anda akan merasakan kecepatan situs Anda yang sesungguhnya seperti halnya saat pengunjung Anda membuka situs Anda.
Tentunya akan terasa sedikit lebih lambat. Itu juga merupakan kesimpulan sederhana mengenai pertanyaan bodoh tentang mengapa saat kita pertama kali mengunjungi sebuah situs terasa begitu berat, namun saat kita telah menjadi langganan mereka, semuanya berubah menjadi lebih cepat.
Pembicaraan optimasi ini sepertinya lebih banyak berputar di sekitar JavaScript dan CSS saja. Ya, karena Saya pikir pembicaraan selain itu masih bisa dipahami seperti apa adanya. Saya hanya ingin menuliskan sesuatu yang seringkali menjadi sumber kesalahpahaman. Punya tambahan?
Jimp is a lightweight jQuery tooltip plugin for image preview. Very responsive to the viewport position and easy in installation.
Jimp adalah plugin jQuery untuk menampilkan gambar dalam tooltip yang sangat responsif terhadap posisi layar dan mudah dalam hal instalasi. Selalu bisa menjaga posisi dirinya pada daerah yang terlihat. Mendukung URL kustom tanpa harus mengeset pengaturan plugin secara manual. Jimp akan menentukan sendiri URL mana yang akan diambil sebagai penampil gambar:
Ada dua metode yang bisa Anda lakukan untuk mengaktifkan plugin ini pada elemen. Pertama, mengarahkan tautan langsung kepada URL gambar. Ke dua, mengarahkan tautan ke sebuah halaman situs, kemudian mengeset nilai tooltip dengan URL gambar yang disimpan di dalam atribut data-preview:
<a href="page-url.html" data-preview="large-image.jpg" title="Your Title">This is an example link!</a>
Konfigurasi Plugin
Secara default ada beberapa opsi di dalam plugin ini yang bisa Anda sesuaikan sebagai pengaturan lanjutan:
$(function() {
$('#example a').jimp({
width: 40, // default width of the tooltip before image loaded
height: 40, // default height of the tooltip before image loaded
resizeSpeed: 200, // resize speed of container
fadeSpeed: 400, // fade speed of image
delay: 1000, // mouseenter delay before excecuting
offsetTop: 20, // tooltip offset top from pointer
offsetLeft: 20, // tooltip offset left from pointer
linkText: 'save', // save button label
closeText: '×', // close button label
hideOnOut: false, // if true, then when pointer mouse leave from image/link target, the tooltip will hidden and back to it's normal size
hideOnChange: false // if true, then when pointer mouse leave from image/link target (and then enter to the other target), the tooltip will hidden and back to it's normal size
});
});
Opsi
Keterangan
width
Digunakan untuk menentukan lebar tooltip saat pertama kali tampil
height
Digunakan untuk menentukan tinggi tooltip saat pertama kali tampil
resizeSpeed
Digunakan untuk menentukan kecepatan animasi perubahan ukuran tooltip gambar
fadeSpeed
Digunakan untuk menentukan kecepatan efek fading pada gambar
delay
Waktu penundaan sebelum perintah untuk menampilkan tooltip dieksekusi
offsetTop
Jarak atas tooltip terhadap pointer
offsetLeft
Jarak kiri tooltip terhadap pointer
closeText
Label untuk tombol tutup [x]
linkText
Label untuk tombol penyimpan gambar
hideOnOut
Jika true, maka tooltip akan tersembunyi ketika pointer mouse meninggalkan gambar/link target
hideOnChange
Jika true, maka ketika pointer mouse meninggalkan gambar/link target dan kemudian memasuki target yang lain, tooltip akan tersembunyi dan kembali ke ukuran normal.
Jika false, tooltip akan terus tampak bersamaan dengan perpindahan target dan akan mengubah ukurannya seiring keberhasilan pointer dalam menemukan target yang baru.
Ini adalah plugin pertama Saya. Mungkin memang masih ada beberapa deklarasi kode yang tidak begitu efisien, tapi setidaknya Saya sudah bisa memastikan bahwa plugin ini bebas dari kesalahan penulisan. Saya sudah mengetesnya pada Web Console, semua peramban mayor dan validasi JavaScript di JSBin dan JSFiddle.
Untuk sementara semuanya akan Saya simpan di Google berhubung Saya belum begitu mahir soal GitHub. Situs jQuery Plugin juga saat ini masih dalam perbaikan.
Ke depannya mungkin akan muncul berbagai plugin baru yang meskipun tidak semenarik plugin-plugin yang sudah ada, tapi bisa dikatakan cukup bermanfaat untuk kalangan umum.
Ini soal pengalaman pribadi. Selama Saya berkeliling mencari situs-situs penyedia baca komik online, ada tiga macam jenis penyajian yang Saya temukan. Pertama, situs tersebut menunjukkan setiap halaman komik tunggal pada satu posting. Sehingga jika kita ingin membaca cerita pada halaman berikutnya, kita harus mengeklik tombol Next atau semacamnya untuk memuat posting baru yang berisi satu halaman komik berikutnya.
Ke dua, situs tersebut akan menyajikan semua halaman komik dalam satu posting, sehingga kita bisa membaca dari awal sampai akhir tanpa harus berpindah-pindah halaman. Namun resikonya adalah kita akan kehilangan begitu banyak waktu hanya untuk menunggu semua halaman komik termuat pada posting tersebut. Belum lagi jika situs yang kita kunjungi telah dipenuhi berbagai macam iklan yang akan semakin memperlambat proses muat halaman.
Tidak berbeda dengan konsep penyajian pertama, karena saat kita berpindah-pindah halaman kita harus menunggu bermenit-menit hanya untuk memuat satu gambar saja.
Bagi Saya ini tidak efektif, mengingat yang para pembaca butuhkan pada dasarnya hanyalah halaman komik dan bukan halaman situs secara keseluruhan. Jika waktu kita dihabiskan hanya untuk menunggu seluruh halaman situs termuat, padahal yang sebenarnya kita butuhkan adalah halaman komik, maka resikonya adalah kita akan kehilangan masa-masa mendalami alur cerita.
Solusinya biasanya adalah dengan cara memuat halaman komik secara bertahap. Artinya adalah kita hanya akan melihat satu halaman komik saja pada satu posting, namun saat kita mengeklik tombol halaman berikutnya, kita tidak akan dibawa menuju ke halaman/posting situs baru, melainkan hanya akan berdiam diri pada satu tempat dan menunggu gambar baru selesai termuat pada satu tempat yang sama.
Saya tidak tahu pasti apa teknik yang mereka gunakan untuk itu. Mungkin AJAX. Tapi Saya pikir itu terlalu berlebihan. Kita bisa menggunakan Lightbox! Hanya saja, lightbox yang satu ini tidak menampilkan gambar di atas tabir hitam seperti lightbox pada umumnya. Kita akan menampilkan gambar tepat di atas navigasi, dengan begitu suasana membaca akan tetap terasa seperti halnya saat kita membaca komik biasa.
Konsep dasarnya masih sama seperti tutorial pembuatan lightbox yang pernah Saya tuliskan di sini. Yaitu kita akan menembak URL gambar pada tautan ke dalam elemen <img> setiap kali aksi klik dilakukan:
Di sini kita akan membuat markup yang berbeda agar setiap tautan tampak sebagai navigasi halaman berangka, dan gambar yang termuat akan ditampilkan di atasnya sebagai halaman komik tunggal:
Yang kita perlukan tidak banyak. Kita hanya akan membuat daftar tautan yang mengarah ke setiap unit halaman komik (halaman komik adalah gambar). Jadi buat saja seperti ini:
Kelas img-gallery digunakan sebagai identitas, sehingga jQuery hanya akan memanipulasi elemen daftar yang memiliki kelas img-gallery saja. data-width digunakan untuk menentukan lebar halaman komik, data-height digunakan untuk menentukan tinggi halaman komik. Ini diperlukan karena kita akan membuat aplikasi yang tidak hanya bisa digunakan untuk menangani satu komik saja per satu posting tapi juga beberapa komik sekaligus dalam ukuran yang berbeda-beda. Dalam satu halaman.
Memulai Manipulasi
Pertama-tama kita akan membungkus grup tautan halaman komik di atas dengan elemen yang kita beri nama .img-show:
Saya juga menambahkan kelas baru bernama .img-nav. Itu akan kita gunakan sebagai selektor CSS untuk mengubah tampilan daftar menjadi tampak sebagai navigasi halaman. Sehingga markup HTML akan menjadi seperti ini:
Pada dasarnya itu saja markup yang diperlukan untuk membuat aplikasi komik digital ini. Selebihnya hanya tinggal menentukan ukuran dan perintah.
Sekarang kita ringkas semua kode yang terlalu panjang, dan ambil data lebar dan tinggi halaman yang sudah kita simpan di dalam atribut data-width dan data-height:
$('.img-gallery').each(function() {
var w = $(this).data('width'),
h = $(this).data('height');
$(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
var $parent = $(this).parents('.img-show');
$parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
});
Dimensi halaman sudah tercipta, sekarang saatnya mengubah setiap item tautan menjadi navigasi berangka. Kita akan menggunakan jQuery .each() untuk merayapi semua elemen tautan satu persatu kemudian menyisipkan angka sesuai dengan urutannya, memindah semua teks judul halaman pada masing-masing tautan ke dalam atribut title. Tapi sebelum itu kita atur dulu agar saat halaman pertama kali dibuka, gambar pada navigasi halaman pertama bisa tampil tanpa diperintah:
$('.img-gallery').each(function() {
var w = $(this).data('width'),
h = $(this).data('height');
$(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
var $firstNav = $('li:first a', this), // Mendapatkan tautan pertama dari semua tautan dalam daftar
current = $firstNav.attr('href'), // Mendapatkan nilai href tautan pertama untuk ditampilkan sebagai gambar pada saat pertama kali komik diakses
$parent = $(this).parents('.img-show');
$firstNav.addClass('active'); // Menambahkan kelas active pada tautan pertama
$parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
// Sisipkan gambar (halaman komik) pada elemen .img-holder...
// dengan nilai src yang diambil dari atribut href tautan pertama
$parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
});
Kelas .loading ditambahkan untuk mengaktifkan CSS khusus yang akan memberikan latar berupa gambar animasi loading:
Atur tampilan gambar yang berhasil ditambahkan dengan tingkat transparasi sebesar 0, sehingga gambar akan tampak menghilang dan memperlihatkan latar animasi loading di belakangnya:
Saat ini gambar masih memuat, saat gambar telah benar-benar berhasil termuat, animasikan tingkat transparasi menuju 1 (opaque) sehingga efek fading akan tercipta setiap kali gambar selesai termuat:
$parent.find('img.transparent').css('opacity', 0).load(function() {
$parent.find('.img-holder').removeClass('loading'); // Singkirkan kelas loading pada kontainer saat gambar telah berhasil dimuat
$(this).animate({opacity:1}, 400); // Animasikan nilai transparasi dari 0 menuju 1
});
Menyisipkan Angka-Angka
Untuk menyisipkan angka-angka, kita gunakan .each() untuk merayapi semua tautan yang ada kemudian ganti semua teks di dalamnya menjadi angka sesuai dengan urutannya. Di sini Saya juga akan memindah teks asli pada masing-masing tautan ke dalam atribut title, sehingga tidak akan ada yang sia-sia:
$('.img-gallery').each(function() {
var w = $(this).data('width'),
h = $(this).data('height');
$(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
var $firstNav = $('li:first a', this),
current = $firstNav.attr('href'),
$parent = $(this).parents('.img-show');
$firstNav.addClass('active');
$parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
$parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
$('a', this).each(function(i) {
i = i+1; // Proses pengurutan dalam JavaScript dimulai dari nol, untuk mengangkat nilai awal pengurutan, naikkan satu tingkat!
$(this).attr('title', $(this).text()); // Pindahkan semua teks (judul halaman) pada tautan menjadi nilai atribut title pada setiap tautan
$(this).html(i); // Terakhir, sisipkan nomor urut pada masing-masing tautan
});
});
Sekarang kita tambahkan perintah pada setiap navigasi halaman. Jika navigasi halaman diklik, sisipkan nilai href dari navigasi halaman tersebut ke dalam elemen <img>, kemudian atur efek animasi seperti pada efek animasi yang kita buat sebelum ini:
$('a', this).each(function(i) {
i = i+1;
$(this).attr("title", $(this).text());
$(this).html(i);
}).on("click", function() {
var $activeNav = $(this).parents('.img-gallery').find('a.active'),
$activeParent = $(this).parents('.img-show');
// Bergantian mengganti kelas setiap kali klik pada navigasi
$activeNav.removeClass('active');
$(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
$parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
$(this).removeClass('loading').find('img').animate({opacity:1}, 400);
});
return false;
});
Lebar dan Tinggi Halaman yang Berbeda
Tidak semua halaman komik memiliki tinggi dan lebar yang sama. Terkadang mereka juga bisa tampak sebagai gambar lebar berbentuk persegi panjang mendatar. Oleh karena itu menganimasikan tinggi dan lebar kontainer juga penting. Kita bisa mendapatkan lebar dan tinggi gambar saat gambar telah termuat, sehingga kita misa menganimasikan ukuran kontainer sesuai dengan ukuran gambar yang tampil. Modifikasi dilakukan pada saat fungsi telah menunjukkan bahwa gambar sudah termuat:
$('a', this).each(function(i) {
i = i+1;
$(this).attr("title", $(this).text());
$(this).html(i);
}).on("click", function() {
var $activeNav = $(this).parents('.img-gallery').find('a.active'),
$activeParent = $(this).parents('.img-show');
$activeNav.removeClass('active');
$(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
$parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
// Animasikan lebar dan tinggi kontainer setelah gambar termuat
$parent.animate({width:$(this).width()}, 600).find('.img-holder').animate({height:$(this).height()}, 600, function() {
// Setelah animasi tinggi dan lebar selesai dijalankan,
// set nilai transparasi gambar menjadi opaque
$(this).removeClass('loading').find('img').animate({opacity:1}, 400);
});
});
return false;
});
Membuat Halaman Meloncat ke Posisi yang Tepat
Saat menekan tombol navigasi, pada dasarnya kita sedang berada pada posisi halaman paling bawah. Akan sangat merepotkan jika pembaca harus menggulung layar ke atas kembali setiap kali gambar baru termuat, jadi kita buat saja agar halaman meloncat ke atas setiap kali navigasi diklik. Kita gunakan jQuery .scrollTop() untuk urusan ini:
$('a', this).each(function(i) {
i = i+1;
$(this).attr("title", $(this).text());
$(this).html(i);
}).on("click", function() {
var $activeNav = $(this).parents('.img-gallery').find('a.active'),
$activeParent = $(this).parents('.img-show');
$activeNav.removeClass('active');
$('html, body').scrollTop($activeParent.offset().top-40);
$(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
$parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
// Animasikan lebar dan tinggi kontainer setelah gambar termuat
$parent.animate({width:$(this).width()}, 600).find('.img-holder').animate({height:$(this).height()}, 600, function() {
// Setelah animasi tinggi dan lebar selesai dijalankan,
// set nilai transparasi gambar menjadi opaque
$(this).removeClass('loading').find('img').animate({opacity:1}, 400);
});
});
return false;
});
Selesai! Sisanya tinggal merapikan dan memidah semua hal yang berhubungan dengan durasi animasi ke dalam variabel baru, sehingga proses modifikasi kecepatan animasi menjadi lebih mudah dilakukan.
