单击缩略图时动态 php 缩放图像答案

【问题标题】：dynamic php zoom image on click of thumbnail单击缩略图时动态 php 缩放图像
【发布时间】：2019-06-28 07:12:23
【问题描述】：

我想在 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>

【问题讨论】：

可能你需要使用 jquery-zoom 来做到这一点。你能在这里查看一个例子并告诉我你是否想做类似的事情：jqueryscript.net/demo/…
使用 Jquery 为缩略图添加一个类，例如 zoomed，如果设置了类 zoomed，则设置 CSS 以使图像更大。
我使用过 jquery，它适用于静态内容。我需要让它充满活力。我想我没有把我的问题说清楚。

标签： php image zooming thumbnails easy-thumbnails

【解决方案1】：

这个 sn-p 将按照我的评论建议进行。根据您的需求量身定制。

$('.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" />

有点误读了这个问题...所以我会扩展...

这个 sn-p 将点击一个缩略图，并放大一个单独但相关的图像......

$('.image').on('click', function(){
    var thumbnail = $(this).data('thumbnail');
    $('.thumbnail[data-zoom="image_1"]').toggleClass('zoomed');
});

.zoomed {
 transform: scale(1.5);
}

.image  {
width:50px;
height:50px;
}

<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:ANd9GcTgcNyT2aqDrvJO9CE__3S-8FHg2xRrSbgqYog8iZMZUIacCO3Q" data-thumbnail="image_1" class="image" />
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgcNyT2aqDrvJO9CE__3S-8FHg2xRrSbgqYog8iZMZUIacCO3Q" data-zoom="image_1" class="thumbnail" />

【讨论】：