динамическое увеличение изображения php по щелчку миниатюры

Я хочу показать несколько изображений на странице сведений о продукте динамически в php. У меня есть image_arr для каждого продукта. Если я нажимаю на любое из изображений большого пальца, изображение должно измениться. Это то, что я пробовал, но я знаю, что это не правильно как, когда я нажимаю на миниатюру, изображение открывается во всей вкладке, заменяя мои текущие URL и страницу.

    <?php
foreach($product_detail as $row):
$image_arr = $row['product_images'];
$first_image = $row['product_images'][0]['image_name'];
?>
<div class="col-md-6 single-right-left ">
<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
<a href="<?php echo base_url(); ?>images/product_detail_images/<?php echo $first_image;?>">
<img src="<?php echo base_url(); ?>images/product_detail_images/<?php echo $first_image;?>" alt="" class="main-image" />
</a>
</div>
<ul class="thumbnails">
<?php foreach($image_arr as $curr_img):
$prod_image = base_url().'images/product_detail_images/'.$curr_img['image_name'];
?>
<li>
<a href="<?php echo $prod_image; ?>" data-standard="images/detail-small-1.png">
<img src="<?php echo $prod_image; ?>" alt="" class="thumnail-main" />
</a>
</li>
<?php endforeach;?>
</ul>
</div>

0

Решение

Этот фрагмент будет делать то, что предлагает мой комментарий. Приспособьте это для своих потребностей.

$('.image').on('click', function(){
$(this).toggleClass('zoomed');
});
.zoomed {
transform: scale(1.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJRgf_toK_QNtnosM2jkTY3-e4rprTz9DQs8uwI2bSzxp76ho90Q" class="image" />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgcNyT2aqDrvJO9CE__3S-8FHg2xRrSbgqYog8iZMZUIacCO3Q" class="image" />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRj6Pwwf32O7KHMNK_TGQrfhEL05iOjW0GyiPlapAnf9l8oq883" class="image" />
0

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

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

По вопросам рекламы [email protected]