Solusi Untuk Persoalan Blog Bertema Komik - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / / Solusi Untuk Persoalan Blog Bertema Komik
ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik
Menambahkan Sistem Navigasi pada Komik

Baca Juga: Menambahkan Fitur Komik di Blog

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 memperlihatkan setiap halaman komik tunggal pada satu posting. Sehingga jikalau kita ingin membaca dongeng pada halaman berikutnya, kita harus mengeklik tombol Next atau semacamnya untuk memuat posting gres yang berisi satu halaman komik berikutnya.

Ke dua, situs tersebut akan menyajikan semua halaman komik dalam satu posting, sehingga kita sanggup membaca dari awal hingga selesai tanpa harus berpindah-pindah halaman. Namun resikonya ialah kita akan kehilangan begitu banyak waktu hanya untuk menunggu semua halaman komik termuat pada posting tersebut. Belum lagi jikalau situs yang kita kunjungi telah dipenuhi banyak sekali macam iklan yang akan semakin memperlambat proses muat halaman. Tidak berbeda dengan konsep penyajian pertama, alasannya ketika 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 intinya hanyalah halaman komik dan bukan halaman situs secara keseluruhan. Jika waktu kita dihabiskan hanya untuk menunggu seluruh halaman situs termuat, padahal yang sebetulnya kita butuhkan ialah halaman komik, maka resikonya ialah kita akan kehilangan masa-masa mendalami alur cerita.

Solusinya biasanya ialah dengan cara memuat halaman komik secara bertahap. Artinya ialah kita hanya akan melihat satu halaman komik saja pada satu posting, namun ketika kita mengeklik tombol halaman berikutnya, kita tidak akan dibawa menuju ke halaman/posting situs baru, melainkan hanya akan berdiam diri pada satu kawasan dan menunggu gambar gres selesai termuat pada satu kawasan yang sama.

Saya tidak tahu niscaya apa teknik yang mereka gunakan untuk itu. Mungkin AJAX. Tapi Saya pikir itu terlalu berlebihan. Kita sanggup memakai Lightbox! Hanya saja, lightbox yang satu ini tidak menampilkan gambar di atas tabir hitam ibarat lightbox pada umumnya. Kita akan menampilkan gambar sempurna di atas navigasi, dengan begitu suasana membaca akan tetap terasa ibarat halnya ketika kita membaca komik biasa.

Konsep dasarnya masih sama ibarat tutorial pembuatan lightbox yang pernah Saya tuliskan di sini. Yaitu kita akan menembak URL gambar pada tautan ke dalam elemen <img> setiap kali agresi klik dilakukan:

$('ul a').click(function() {     $('div').html('<img src="' + this.href + '" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     return false; });

Lihat Konsep

Di sini kita akan menciptakan markup yang berbeda supaya setiap tautan tampak sebagai navigasi halaman berangka, dan gambar yang termuat akan ditampilkan di atasnya sebagai halaman komik tunggal:

Lihat Hasil Akhir

Markup HTML

Yang kita perlukan tidak banyak. Kita hanya akan menciptakan daftar tautan yang mengarah ke setiap unit halaman komik (halaman komik ialah gambar). Makara buat saja ibarat ini:

<ul class="img-gallery" data-width="750" data-height="1088">   <li><a href="img/01.png">Judul Halaman 1</a></li>   <li><a href="img/02.png">Judul Halaman 2</a></li>   <li><a href="img/03.png">Judul Halaman 3</a></li>   <li><a href="img/04.png">Judul Halaman 4</a></li> </ul>

Kelas img-gallery dipakai sebagai identitas, sehingga jQuery hanya akan memanipulasi elemen daftar yang mempunyai kelas img-gallery saja. data-width dipakai untuk memilih lebar halaman komik, data-height dipakai untuk memilih tinggi halaman komik. Ini diharapkan alasannya kita akan menciptakan aplikasi yang tidak hanya sanggup dipakai 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:

$('.img-gallery').each(function() {     $(this).addClass('img-nav').wrap('<div class="img-show"></div>'); });

Saya juga menambahkan kelas gres berjulukan .img-nav. Itu akan kita gunakan sebagai selektor CSS untuk mengubah tampilan daftar menjadi tampak sebagai navigasi halaman. Sehingga markup HTML akan menjadi ibarat ini:

<div class="img-show">   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>

Setelah itu sisipkan kontainer kosong yang akan kita gunakan sebagai kawasan untuk meletakkan gambar:

$('.img-gallery').each(function() {     $(this).addClass('img-nav').wrap('<div class="img-show"></div>');     $(this).parents('.img-show').prepend('<div class="img-holder"></div>'); });

Sehingga markup HTML akan menjadi ibarat ini:

<div class="img-show">   <div class="img-holder"></div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>

Pada dasarnya itu saja markup yang diharapkan untuk menciptakan aplikasi komik digital ini. Selebihnya hanya tinggal memilih ukuran dan perintah. Sekarang kita ringkas semua isyarat 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>'); });

Sehingga risikonya akan menjadi ibarat ini:

<div class="img-show" style="width:750px;">   <div class="img-holder" style="height:1088px;"></div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>

Dimensi halaman sudah tercipta, kini saatnya mengubah setiap item tautan menjadi navigasi berangka. Kita akan memakai 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 supaya ketika halaman pertama kali dibuka, gambar pada navigasi halaman pertama sanggup 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 ketika 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>'); });

Kelas .loading ditambahkan untuk mengaktifkan CSS khusus yang akan memperlihatkan latar berupa gambar animasi loading:

<div class="img-show" syle="width:750px;">   <div class="img-holder loading" style="height:1088px;">     <img class="transparent" src="img/01.png" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>   </div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a class="active" href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>
.img-show .img-holder.loading {   background:white url('img/loading.gif') no-repeat 50% 300px; }

Atur tampilan gambar yang berhasil ditambahkan dengan tingkat transparasi sebesar 0, sehingga gambar akan tampak menghilang dan memperlihatkan latar animasi loading di belakangnya:

$parent.find('img.transparent').css('opacity', 0);

Saat ini gambar masih memuat, ketika gambar telah benar-benar berhasil termuat, animasikan tingkat transparasi menuju 1 (opaque) sehingga imbas 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 ketika 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 orisinil 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $('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     }); });

Sehingga risikonya akan menjadi ibarat ini:

<div class="img-show" syle="width:750px;">   <div class="img-holder loading" style="height:1088px;">     <img class="transparent" src="img/01.png" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>   </div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a class="active" href="img/01.png" title="Solusi untuk Masalah Blog Bertema Komik">1</a></li>     <li><a href="img/02.png" title="Solusi untuk Masalah Blog Bertema Komik">2</a></li>     <li><a href="img/03.png" title="Solusi untuk Masalah Blog Bertema Komik">3</a></li>     <li><a href="img/04.png" title="Solusi untuk Masalah Blog Bertema Komik">4</a></li>   </ul> </div>

Memasukkan Perintah

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 imbas animasi ibarat pada imbas 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $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 mempunyai tinggi dan lebar yang sama. Terkadang mereka juga sanggup tampak sebagai gambar lebar berbentuk persegi panjang mendatar. Oleh alasannya itu menganimasikan tinggi dan lebar kontainer juga penting. Kita sanggup mendapat lebar dan tinggi gambar ketika gambar telah termuat, sehingga kita misa menganimasikan ukuran kontainer sesuai dengan ukuran gambar yang tampil. Modifikasi dilakukan pada ketika fungsi telah memperlihatkan 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {         // Animasikan lebar dan tinggi kontainer sesudah 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, intinya kita sedang berada pada posisi halaman paling bawah. Akan sangat merepotkan jikalau pembaca harus menggulung layar ke atas kembali setiap kali gambar gres termuat, jadi kita buat saja supaya 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {         // Animasikan lebar dan tinggi kontainer sesudah 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 bekerjasama dengan durasi animasi ke dalam variabel baru, sehingga proses modifikasi kecepatan animasi menjadi lebih gampang dilakukan.

Kode Lengkap

jQuery

$(function() {     $('.img-gallery').each(function() {         var w = $(this).data("width"),             h = $(this).data("height"),             viewport = $('html, body'),             fadeSpeed = 400, // Kecepatan imbas fading             resizeSpeed = 600; // Kecepatan imbas pelebaran/penyusutan         $(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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');         $parent.find('img.transparent').css('opacity', 0).load(function() {             $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {                 $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);             });         });                  $('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');             viewport.scrollTop($activeParent.offset().top-40);             $(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');             $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {                 $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {                     $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);                 });             });             return false;         });      }); });

CSS

.img-show {   width:400px;   margin:50px auto;   background-color:black;   border:2px solid black;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);   box-shadow:0 1px 3px rgba(0,0,0,.2);   position:relative;   overflow:hidden; }  .img-show .img-holder {   background-color:white; }  .img-show .img-holder.loading {   background:white url('data:image/gif;base64,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') no-repeat 50% 160px; }  .img-show .img-holder img {   display:block; }  .img-show .img-nav {   margin:0;   padding:0;   overflow:hidden; }  .img-show .img-nav li {   margin:2px 2px 0 0;   padding:0;   float:left;   display:inline;   list-style:none; }  .img-nav li a {   display:block;   background-color:#ccc;   color:black;   padding:3px 7px;   font:normal normal 12px/normal Georgia,"URW Bookman L",Serif;   font-style:italic;   text-decoration:none; }  .img-nav li a.active {   background-color:#900;   color:white; }

Dasar Kerangka

<ul class="img-gallery" data-width="750" data-height="1000">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li> </ul>

Sumber https://www.dte.web.id/

Solusi Untuk Persoalan Blog Bertema Komik

ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik
Menambahkan Sistem Navigasi pada Komik

Baca Juga: Menambahkan Fitur Komik di Blog

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 memperlihatkan setiap halaman komik tunggal pada satu posting. Sehingga jikalau kita ingin membaca dongeng pada halaman berikutnya, kita harus mengeklik tombol Next atau semacamnya untuk memuat posting gres yang berisi satu halaman komik berikutnya.

Ke dua, situs tersebut akan menyajikan semua halaman komik dalam satu posting, sehingga kita sanggup membaca dari awal hingga selesai tanpa harus berpindah-pindah halaman. Namun resikonya ialah kita akan kehilangan begitu banyak waktu hanya untuk menunggu semua halaman komik termuat pada posting tersebut. Belum lagi jikalau situs yang kita kunjungi telah dipenuhi banyak sekali macam iklan yang akan semakin memperlambat proses muat halaman. Tidak berbeda dengan konsep penyajian pertama, alasannya ketika 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 intinya hanyalah halaman komik dan bukan halaman situs secara keseluruhan. Jika waktu kita dihabiskan hanya untuk menunggu seluruh halaman situs termuat, padahal yang sebetulnya kita butuhkan ialah halaman komik, maka resikonya ialah kita akan kehilangan masa-masa mendalami alur cerita.

Solusinya biasanya ialah dengan cara memuat halaman komik secara bertahap. Artinya ialah kita hanya akan melihat satu halaman komik saja pada satu posting, namun ketika kita mengeklik tombol halaman berikutnya, kita tidak akan dibawa menuju ke halaman/posting situs baru, melainkan hanya akan berdiam diri pada satu kawasan dan menunggu gambar gres selesai termuat pada satu kawasan yang sama.

Saya tidak tahu niscaya apa teknik yang mereka gunakan untuk itu. Mungkin AJAX. Tapi Saya pikir itu terlalu berlebihan. Kita sanggup memakai Lightbox! Hanya saja, lightbox yang satu ini tidak menampilkan gambar di atas tabir hitam ibarat lightbox pada umumnya. Kita akan menampilkan gambar sempurna di atas navigasi, dengan begitu suasana membaca akan tetap terasa ibarat halnya ketika kita membaca komik biasa.

Konsep dasarnya masih sama ibarat tutorial pembuatan lightbox yang pernah Saya tuliskan di sini. Yaitu kita akan menembak URL gambar pada tautan ke dalam elemen <img> setiap kali agresi klik dilakukan:

$('ul a').click(function() {     $('div').html('<img src="' + this.href + '" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     return false; });

Lihat Konsep

Di sini kita akan menciptakan markup yang berbeda supaya setiap tautan tampak sebagai navigasi halaman berangka, dan gambar yang termuat akan ditampilkan di atasnya sebagai halaman komik tunggal:

Lihat Hasil Akhir

Markup HTML

Yang kita perlukan tidak banyak. Kita hanya akan menciptakan daftar tautan yang mengarah ke setiap unit halaman komik (halaman komik ialah gambar). Makara buat saja ibarat ini:

<ul class="img-gallery" data-width="750" data-height="1088">   <li><a href="img/01.png">Judul Halaman 1</a></li>   <li><a href="img/02.png">Judul Halaman 2</a></li>   <li><a href="img/03.png">Judul Halaman 3</a></li>   <li><a href="img/04.png">Judul Halaman 4</a></li> </ul>

Kelas img-gallery dipakai sebagai identitas, sehingga jQuery hanya akan memanipulasi elemen daftar yang mempunyai kelas img-gallery saja. data-width dipakai untuk memilih lebar halaman komik, data-height dipakai untuk memilih tinggi halaman komik. Ini diharapkan alasannya kita akan menciptakan aplikasi yang tidak hanya sanggup dipakai 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:

$('.img-gallery').each(function() {     $(this).addClass('img-nav').wrap('<div class="img-show"></div>'); });

Saya juga menambahkan kelas gres berjulukan .img-nav. Itu akan kita gunakan sebagai selektor CSS untuk mengubah tampilan daftar menjadi tampak sebagai navigasi halaman. Sehingga markup HTML akan menjadi ibarat ini:

<div class="img-show">   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>

Setelah itu sisipkan kontainer kosong yang akan kita gunakan sebagai kawasan untuk meletakkan gambar:

$('.img-gallery').each(function() {     $(this).addClass('img-nav').wrap('<div class="img-show"></div>');     $(this).parents('.img-show').prepend('<div class="img-holder"></div>'); });

Sehingga markup HTML akan menjadi ibarat ini:

<div class="img-show">   <div class="img-holder"></div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>

Pada dasarnya itu saja markup yang diharapkan untuk menciptakan aplikasi komik digital ini. Selebihnya hanya tinggal memilih ukuran dan perintah. Sekarang kita ringkas semua isyarat 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>'); });

Sehingga risikonya akan menjadi ibarat ini:

<div class="img-show" style="width:750px;">   <div class="img-holder" style="height:1088px;"></div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>

Dimensi halaman sudah tercipta, kini saatnya mengubah setiap item tautan menjadi navigasi berangka. Kita akan memakai 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 supaya ketika halaman pertama kali dibuka, gambar pada navigasi halaman pertama sanggup 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 ketika 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>'); });

Kelas .loading ditambahkan untuk mengaktifkan CSS khusus yang akan memperlihatkan latar berupa gambar animasi loading:

<div class="img-show" syle="width:750px;">   <div class="img-holder loading" style="height:1088px;">     <img class="transparent" src="img/01.png" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>   </div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a class="active" href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li>     <li><a href="img/04.png">Judul Halaman 4</a></li>   </ul> </div>
.img-show .img-holder.loading {   background:white url('img/loading.gif') no-repeat 50% 300px; }

Atur tampilan gambar yang berhasil ditambahkan dengan tingkat transparasi sebesar 0, sehingga gambar akan tampak menghilang dan memperlihatkan latar animasi loading di belakangnya:

$parent.find('img.transparent').css('opacity', 0);

Saat ini gambar masih memuat, ketika gambar telah benar-benar berhasil termuat, animasikan tingkat transparasi menuju 1 (opaque) sehingga imbas 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 ketika 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 orisinil 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $('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     }); });

Sehingga risikonya akan menjadi ibarat ini:

<div class="img-show" syle="width:750px;">   <div class="img-holder loading" style="height:1088px;">     <img class="transparent" src="img/01.png" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>   </div>   <ul class="img-gallery img-nav" data-width="750" data-height="1088">     <li><a class="active" href="img/01.png" title="Solusi untuk Masalah Blog Bertema Komik">1</a></li>     <li><a href="img/02.png" title="Solusi untuk Masalah Blog Bertema Komik">2</a></li>     <li><a href="img/03.png" title="Solusi untuk Masalah Blog Bertema Komik">3</a></li>     <li><a href="img/04.png" title="Solusi untuk Masalah Blog Bertema Komik">4</a></li>   </ul> </div>

Memasukkan Perintah

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 imbas animasi ibarat pada imbas 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $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 mempunyai tinggi dan lebar yang sama. Terkadang mereka juga sanggup tampak sebagai gambar lebar berbentuk persegi panjang mendatar. Oleh alasannya itu menganimasikan tinggi dan lebar kontainer juga penting. Kita sanggup mendapat lebar dan tinggi gambar ketika gambar telah termuat, sehingga kita misa menganimasikan ukuran kontainer sesuai dengan ukuran gambar yang tampil. Modifikasi dilakukan pada ketika fungsi telah memperlihatkan 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {         // Animasikan lebar dan tinggi kontainer sesudah 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, intinya kita sedang berada pada posisi halaman paling bawah. Akan sangat merepotkan jikalau pembaca harus menggulung layar ke atas kembali setiap kali gambar gres termuat, jadi kita buat saja supaya 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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');     $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {         // Animasikan lebar dan tinggi kontainer sesudah 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 bekerjasama dengan durasi animasi ke dalam variabel baru, sehingga proses modifikasi kecepatan animasi menjadi lebih gampang dilakukan.

Kode Lengkap

jQuery

$(function() {     $('.img-gallery').each(function() {         var w = $(this).data("width"),             h = $(this).data("height"),             viewport = $('html, body'),             fadeSpeed = 400, // Kecepatan imbas fading             resizeSpeed = 600; // Kecepatan imbas pelebaran/penyusutan         $(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=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');         $parent.find('img.transparent').css('opacity', 0).load(function() {             $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {                 $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);             });         });                  $('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');             viewport.scrollTop($activeParent.offset().top-40);             $(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt=" ada tiga macam jenis penyajian yang Saya temukan Solusi untuk Masalah Blog Bertema Komik"/>');             $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {                 $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {                     $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);                 });             });             return false;         });      }); });

CSS

.img-show {   width:400px;   margin:50px auto;   background-color:black;   border:2px solid black;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);   box-shadow:0 1px 3px rgba(0,0,0,.2);   position:relative;   overflow:hidden; }  .img-show .img-holder {   background-color:white; }  .img-show .img-holder.loading {   background:white url('data:image/gif;base64,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') no-repeat 50% 160px; }  .img-show .img-holder img {   display:block; }  .img-show .img-nav {   margin:0;   padding:0;   overflow:hidden; }  .img-show .img-nav li {   margin:2px 2px 0 0;   padding:0;   float:left;   display:inline;   list-style:none; }  .img-nav li a {   display:block;   background-color:#ccc;   color:black;   padding:3px 7px;   font:normal normal 12px/normal Georgia,"URW Bookman L",Serif;   font-style:italic;   text-decoration:none; }  .img-nav li a.active {   background-color:#900;   color:white; }

Dasar Kerangka

<ul class="img-gallery" data-width="750" data-height="1000">     <li><a href="img/01.png">Judul Halaman 1</a></li>     <li><a href="img/02.png">Judul Halaman 2</a></li>     <li><a href="img/03.png">Judul Halaman 3</a></li> </ul>

Sumber https://www.dte.web.id/
Gambar jQuery Lanjutan Masalah
Langganan: Posting Komentar (Atom)