Открытие модального окна после нажатия на изображение

Question

Открытие модального окна после нажатия на изображение

Я пытаюсь открыть модальное окно с полной картинкой внутри для каждого эскиза в списке после нажатия на него. Вот мой код с моими попытками сделать это. Кто-нибудь знает, как мне это сделать?

            <?php
$directory = 'uploads/delivery-pictures/';
// Zamieniamy znaki, bo w nazwach plikow nie ma znaku /
$npsNumber = str_replace('/', '_', $model->getNps());
$images = glob($directory . $npsNumber . '_' . $model->delivery_no . '*' .'*_m.jpg', GLOB_BRACE);
$i = 0;
if (empty($images)) {
echo 'Brak zdjęć';
}
foreach($images as $image) {
$i = $i + 1;
$id = $npsNumber . '_' . $model->delivery_no . '_' . $i;
echo '<img id=' . $id . ' src=https://produkcja.onix.lh/' . $image . ' />';
}

Modal::begin([
'header'=>'<h4>Zdjęcie dla dostawy'. $model->delivery_no .'</h4>',
'id' => 'modal',
'size'=>'modal-lg',
]);
echo "<div id='modalContent'>Zawartosc</div>";
Modal::end();

$this->registerJs(
"$('".$id."').click(function (){
$('#modal').modal('show')
.find('#modalContent');
//.load($(this).attr('value'));
});
");
?>

0

image modal-window php yii2

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я нашел решение, если кто-то заинтересован в этом, я вставил свой код ниже.

            <?php
$directory = 'uploads/delivery-pictures/';
// Zamieniamy znaki, bo w nazwach plikow nie ma znaku /
$npsNumber = str_replace('/', '_', $model->getNps());
$images = glob($directory . $npsNumber . '_' . $model->delivery_no . '*' .'*_m.jpg', GLOB_BRACE);
$i = 0;
if (empty($images)) {
echo 'Brak zdjęć';
}
echo "<script>
function showImg(srcImg){
console.log('debug2');
$('#modalImg').attr('src', srcImg);
$('#modal').modal('show');
};
</script>";
foreach($images as $image) {
$i = $i + 1;
$id = $npsNumber . '_' . $model->delivery_no . '_' . $i;
$fullImage = str_replace('_m', '_d', $image);
echo '<img id="' . $id . '" src="https://produkcja.onix.lh/' . $image . '" />';
echo "<script>
var currentId =  \"".$id."\";
console.log(currentId);
$('#".$id."').click(function(){showImg(\"https://produkcja.onix.lh/" . $fullImage . "\")});
</script>";
}

Modal::begin([
'header'=>'<center><h4>Zdjęcie dla dostawy '. $model->delivery_no .'</h4></center>',
'id' => 'modal',
'size'=>'modal-lg',
]);
echo '<center><img id="modalImg" src="https://produkcja.onix.lh/' . $fullImage . '" /></center>';
Modal::end();
?>

0