JS Genel Fonksiyon Oluşturma
Bu şekilde yaptığımda kendi oluşturduğum galerim üzerinden seçtiğim görselin yolu input'a düşüyor ve img etiketinde önizleniyor
<div class="fea-img">
<img id="onizleme1" src="">
<input type="text" id="img1" onchange="preview()">
</div>
function preview() {
var x = $('#img1').val();
$("#onizleme1").attr("src",x);
}
Sayfada tek bir görsel önizlemesi yapacaksam problem değil fakat birden fazla görsel önizlemek istediğim zaman preview fonksyionunu çoğaltarak yapmak zorunda kalıyorum.
preview'i nasıl genel bir yapı haline getirebilirim?
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
display: flex;
}
</style>
</head>
<body>
<?php
$images = [
'https://www.rastgeleresim.com/images/turkish-cuisine-480547_1280.jpg',
'https://www.rastgeleresim.com/images/traffic-3612474_1280.jpg',
'https://www.rastgeleresim.com/images/take-532097_1280.jpg',
'https://www.rastgeleresim.com/images/tailor-2778734_1280.jpg',
'https://www.rastgeleresim.com/images/white-cat-4134639_1280.jpg',
'https://www.rastgeleresim.com/images/blue-mosque-908510_1280.jpg'
];
foreach ($images as $image) { ?>
<div class="fea-img">
<img src=""><br>
<input type="text" value="<?= $image ?>" readonly><br>
<button class="goster">Göster</button>
</div>
<?php }
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$(".goster").on("click", function () {
$(this).siblings("img").attr({
src: $(this).siblings("input").val(),
width: 250,
height: 250
})
})
})
</script>
</body>
</html>