Image Load

Hello world,

Dalam menampilkan asset gambar/image terkadang kita menemukan assets/image yang kita tampilkan tidak pada posisi yang kita inginkan. Seperti contohnya gambar yang seharusnya ditampilkan secara potrait ternyata malah ditampilkan secara landscape. Pembahasan kali ini adalah tentang bagaimana cara memutar (rotate) image menggunakan Jquery.

Dalam pembahasan ini tidak membuat assets/image berubah/diputar secara permanen karena setelah halaman website direfresh image akan kembali seperti semula. Kondisinya adalah image akan diload seperti apa adanya dari direktorynya. Kemudian akan disediakan tombol untuk memutar image. Oke langsung saja masuk ke contoh.

Kita buat dahulu html standar dari bootstrap dan tampilkan sebuah image.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<title>Hello, world!</title>
</head>
<body>
<img src="https://www.byriza.com/lib/blog/1577432104.png" style="width:300px">
</body>
</html>

Kemudian kita buat tombol untuk melakukan action memutar image tersebut.

<img src="https://www.byriza.com/lib/blog/1577432104.png" style="width:300px">
<button class="btn btn-primary putar">Putar</button>

Lalu kita buat script Jquerynya seperti berikut.

<script>
$(document).ready(function() {
var r = 0;
$(document).on('click', '.putar', function() {
r = r + 90;
if (r > 360) {
r = 90;
}
$('#image1').css('transform', 'rotate(' + r + 'deg)');
});
});
</script>

Dalam script di atas ada variable "r" yang mana merupakan satuan untuk rotasi dimana saat di awal diset 0 derajat. Lalu saat onClick pada tombol dengan class '.putar' akan dijalankan "r + 90" untuk menambahkan 90 derajat setiap kali tombol diklik. Lalu ada "if" jika sudut sudah lebih dari 360 maka akan diulang kembali sudut menjadi 90 derajat. Yang terakhir kita set image yang memiliki id "#image1" dengan attribute transform rotate(sekian deg). "deg" di sini adalah degrees.

Kita perlu menambahkan id "#image1" pada tag img kita.

<img id="image1" src="https://www.byriza.com/lib/blog/1577432104.png" style="width:300px">

Dari sini kita sudah berhasil membuat proses rotate image ke kanan. Kita bisa juga membuat tombol untuk proses rotate image ke kiri. Pertama kita buat tombol terlebih dahulu seperti berikut. Pada tombol kita harus membedakan tombol untuk memutar ke kanan dan yang ke kiri. Di sini saya menggunakan attribute "data-tipe" berisi string "kiri" dan "kanan".

<button class="btn btn-primary putar" data-tipe="kiri">Putar Kiri</button>
<img id="image1" src="https://www.byriza.com/lib/blog/1577432104.png" style="width:300px">
<button class="btn btn-primary putar" data-tipe="kanan">Putar Kanan</button>

Lalu kita ubah script Jquery menjadi seperti berikut. Perbedaannya terletak pada cara hitungnya, jika ke kanan maka r akan + 90 dan jika ke kiri maka r akan - 90.

<script>
$(document).ready(function() {
var r = 0;
$(document).on('click', '.putar', function() {
var tipe = $(this).attr('data-tipe');
if (tipe == 'kanan') {
r = r + 90;
if (r > 360) {
r = 90;
}
} else {
r = r - 90;
if (r < 0) {
r = 270;
}
}

$('#image1').css('transform', 'rotate(' + r + 'deg)');
});
});
</script>

Sehingga full Code akan menjadi seperti berikut.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>

<title>Hello, world!</title>
</head>
<body>
<script>
$(document).ready(function() {
var r = 0;
$(document).on('click', '.putar', function() {
var tipe = $(this).attr('data-tipe');
if (tipe == 'kanan') {
r = r + 90;
if (r > 360) {
r = 90;
}
} else {
r = r - 90;
if (r < 0) {
r = 270;
}
}
$('#image1').css('transform', 'rotate(' + r + 'deg)');
});
});
</script>
<button class="btn btn-primary putar" data-tipe="kiri">Putar Kiri</button>
<img id="image1" src="https://www.byriza.com/lib/blog/1577432104.png" style="width:300px">
<button class="btn btn-primary putar" data-tipe="kanan">Putar Kanan</button>
</body>
</html>


Selamat mencoba :)