[英]dynamic php zoom image on click of thumbnail
我想在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>
該代碼片段將按照我的意見進行操作。 根據您的需求量身定制。
$('.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" />
有點誤解了這個問題...所以我會繼續擴展...
此代碼段將單擊縮略圖,並使單獨但相關的圖像變大...
$('.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" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.