Как изменить изображение с помощью click, передавая переменную
с одной стороны у меня есть 3 div 130x130px, с их идентификаторами imagen1 imagen2 imagen3, где я показываю с помощью запроса к bd и цикла 3 различных изображений (из bd я привожу путь).
первое изображение также загружается в основной div detalle_foto. До сих пор все хорошо. Мне нужно, чтобы при нажатии на любое из 3 изображений это отображалось в основном div. Я думаю, что мне нужно будет сделать функцию и вызвать ее с помощью onclick img.
Я пытался но я не получаю, я не знаю, как передать переменную с путем фотографии из html/php и сделать ее функцией javascript, или, может быть, это не так? Я копирую часть кода.
<div id="caja_001">
<div id="imagen1"><img src="<?php echo $imagen?>" width="130px" height="130px"></div>
<div id="imagen2"><img src="<?php echo $imagen2?>" width="130px" height="130px"></div>
<div id="imagen3"><img src="<?php echo $imagen3?>" width="130px" height="130px"></div>
</div>
<div id="caja_002">
<div id="detalle_titulo"><h3><?php echo $nombre?></h3></div>
<div id="detalle_foto"><img src="<?php echo $imagen?>" width="200px" height="200px"></div>
<div id="detalle_desc"><p><?php echo $desc?></p></div>
</div>2 answers
Вы можете создать дочерний класс для остальных фотографий и назначить атрибут src, который имеет дочернее изображение, которое вы только что нажали на родительское изображение.
Пример:
$(document).ready(function() {
$(".secundaria").click(function(){
$("#principal").attr("src", $(this).attr('src'));
});
});img{
height: 100px;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="principal" src="">
<img class="secundaria" src="http://vignette2.wikia.nocookie.net/labibliotecadelviejomundo/images/8/8f/Drag%C3%B3n_de_Fuego_por_Sandara.jpg/revision/latest?cb=20150413200815&path-prefix=es">
<img class="secundaria" src="http://vignette1.wikia.nocookie.net/seraphina/images/b/b2/Dragonseraphina.jpg/revision/latest?cb=20160103194957">Вы можете видеть в примере, что, нажав на любого из двух драконов, изображение дракона, на котором вы нажали, помещается в основное изображение.
Если они всегда будут одинаковыми id's, Вы можете попробовать следующий код, распространив его на другие id's:
$("#caja_001").on("click", "img", function() {
var src = $(this).attr("src");
$("#detalle_foto").find("img").attr("src", src);
});
Этот код в основном захватывает атрибут src кликабельного изображения div с идентификатором caja_001 и передает этот путь к изображению внутри div с идентификатором detalle_foto.