Assalamu’alaikum warahmatullahi wabarakatuh
Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Slide Show Dengan jQuery Part 2 pada artikel kali ini kita akan melanjutkan latihan sebelumnya. Yaitu membuat slide show gallery dengan jQuery dan bootstrap, di artikel sebelumnya kita sudah membuat sebuah layout untuk project yang nanti kita buat. Teman – teman bisa review artikel saya Cara Membuat Slide Show Dengan jQuery Part 1
Jika sudah, kita akan menambahkan script jQuery nya untuk. Pertama kita buat tampilan background blur nya sekaligus dengan tombol close
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$("<div></div>").appendTo("body").addClass("hover"); $(".hover").css({"width": "100%", "height": "100%","left": "0","top": "0","position": "fixed","background-color": "rgba(45, 27, 27, 0.55)","display":"none"}); $("<div class=border><span class='glyphicon glyphicon-chevron-left left'></span><span class='glyphicon glyphicon-chevron-right right'></span><span class='glyphicon glyphicon-remove tutup'></span>").appendTo("body"); $(".border").css({"position": "absolute","top": "20%", "left": "50%","transform": "translateX(-50%)", "width":"50%", "height":"550px", "border":"5px solid #fff","display":"none"}); $(".border .left").css({"position":"absolute", "top":"45%","left":"-25px", "z-index":"999","color":"white","padding":"12px", "background":"black", "border-radius":"100%","font-size":"30px"}); $(".border .right").css({"position":"absolute", "top":"45%","right":"-25px", "z-index":"999","color":"white","padding":"12px", "background":"black", "border-radius":"100%","font-size":"30px"}); $(".border .tutup").css({"position":"absolute", "top":"4px","right":"4px", "z-index":"999","color":"white","padding":"5px", "background":"black", "border-radius":"100%","font-size":"10px","cursor":"pointer"}); //tombol close $('.tutup').click(function(){ $('.hover,.border').hide("slow"); $('.border').children().last().remove(); }); |
Dan kita buat fungsi, ketika image di klik maka data src image akan di ambil dan akan di tampilkan di image pop nya dan file pada image pop up saya ambil dari folder berbeda. pastikan teman – teman pisahkan image dengan ukuran berbeda dan di simpan dalam folder yang berbeda juga. Dalam proses ini sekaligus memberikan next dan prev pada slide show nya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
//proses next dan prev $(".item").click(function(){ $('.hover,.border').show("slow"); indexCount = $(".item").length; index = $(".item").index(this); if(index == 0){ $(".right").show(); $(".left").hide(); }else if(index == indexCount-1){ $(".left").show(); $(".right").hide(); }else{ $(".left").show(); $(".right").show(); } img = $("img:eq("+index+")").attr("src"); src = img.split('/'); $("<img src='img/gallery/"+src[3]+"' class='tampil'>").appendTo(".border"); $(".tampil").css({"width":"100%","height":"100%"}); }); $(".right").click(function() { $(".tampil").remove(); index++; if (index == 0){ $(".right").show(); $(".left").hide(); }else if(index == indexCount-1){ $(".left").show(); $(".right").hide(); }else{ $(".right").show(); $(".left").show(); } img = $("img:eq("+index+")").attr("src"); src = img.split('/'); $("<img src='img/gallery/"+src[3]+"' class='tampil'>").appendTo(".border"); $(".tampil").css({"width":"100%","height":"100%"}); }) $(".left").click(function() { $(".tampil").remove(); index--; if (index == 0){ $(".right").show(); $(".left").hide(); }else if(index == indexCount-1){ $(".left").show(); $(".right").hide(); }else{ $(".right").show(); $(".left").show(); } img = $("img:eq("+index+")").attr("src"); src = img.split('/'); $("<img src='img/gallery/"+src[3]+"' class='tampil'>").appendTo(".border"); $(".tampil").css({"width":"100%","height":"100%"}); }) |
Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini
Slide show gallery berhasil kita buat, sekian pada artikel kali ini tentang Cara Membuat Slide Show Dengan jQuery Part 2 kita jumpa lagi pada artikel selanjutnya. Terimakasih dan sampai jumpa.