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?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
<!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>