Tutorial jQuery - Cara Mengubah Gambar saat Diklik

byindeveloper •
0
Tutorial jQuery - Cara Mengubah Gambar saat Diklik

Assalamualaikum, teman-teman mungkin pernah melihat semacam slide image seperti gambari di bawah ini?
Ya, gambar tersebut saya ambil dari bukalapak. Dimana gambar yang besar dinamakan main image dan gambar-gambar yang kecil dinamakan featured image. Jadi ketika diklik salah satu featured image tersebut, maka main image akan berubah sesuai dengan gambar yang diklik.

Nah untuk membuat seperti fitur tersebut kita dapat menggunakan click event dari jQuery. Perlu kalian ketahui, untuk menampilkan gambar dalam HTML kita biasa menggunakan tag img dimana didalamnya terdapat attribut src, yaitu sumber dari image tersebut. Disinilah tugas si jQuery untuk mengubah nilai dari src tersebut sesuai dengan featured image yang diklik. Untuk lebih jelasnya mari kita lihat kode berikut ini.

 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <img class="main-image" src="img/img1.png" alt="" width="40%" height="40%">
    <br>
    <img class="featured-image-1" src="img/img1.png" alt="" width="20%" height="20%">
    <img class="featured-image-2" src="img/img2.png" alt="" width="20%" height="20%">
</body>

</html>
<script>
    $(document).ready(function () {
        $('.featured-image-1').click(function () {
            $('.main-image').attr('src', 'img/img1.png')
        })
        $('.featured-image-2').click(function () {
            $('.main-image').attr('src', 'img/img2.png')
        })
    })
</script>

Perhatikan pada kode jQuery di atas, ketika kelas featured-image-1 diklik, maka attribute src pada kelas main-image akan diubah menjadi 'img/img1.png' dan begitupun untuk fungsi yang selanjutnya. Jika ingin mencoba, silahkan download kodenya Disini.

Sekian terimakasih, semoga bermanfaat
Tags:

Posting Komentar

Lebih baru Lebih lama