Phóng ảnh cloud zoom với plugin gallery metabox trong wordpress

Chào các bạn, dịch vụ thiết kế web giá rẻ hôm nay xin hướng dẫn các bạn cách sử dụng tính năng phóng ảnh (cloud zoom) với plugin gallery box trong wordpress. Ở bài trước chúng ta đã học cách tích hợp cloud zoom cho mọi website trong đó có ứng dụng tạo phóng ảnh cho các hình ảnh đại diện của sản phẩm với woocommerce.

Tuy nhiên bạn cũng có thể tạo gallery ảnh của sản phẩm trong bài viết wordpress bằng cách sử dụng plugin gallery box, mà không cần sử dụng bộ code đồ sộ trong trường hợp bạn muốn tạo web bán hàng phức tạp như woocommerce với mục đích đáp ứng tối đa các tính năng của website thương mại điện tử.

Xem qua: hướng dẫn cài đặt plugin gallery image.
Mở template single.php hoăc content-single.php tùy theo thiết kế theme của bạn, template này chứa nội dung bài viết chi tiết. Viết vào trong vòng lặp đoạn code tạo cloud zoom cho gallery image đã thiết lập cho post như sau.

<?php
global $BE_Gallery_Metabox;
$images=$BE_Gallery_Metabox->gallery_images(get_the_ID());
$img=reset($images);
if(is_object($img)):
$thumb_small=wp_get_attachment_image_src($img->ID,'thumbnail');
$thumb=wp_get_attachment_image_src($img->ID,'medium');
endif;
?>

Code trên lấy ảnh đầu tiên của galery metabox với post hiện tại, mỗi ảnh sử dụng 2 kích thước: kích thước preview (thumbnail) và khổ ảnh rộng (medium/large) .
Thiết lập cloud zoom vào ảnh xem đầu tiên.

<a class="cloud-zoom" href="<?php echo $img->guid?>" itemprop="image" id="zoom1" title="<?php echo $img->post_title?>" rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8" data-rel="prettyPhoto[product-gallery]"><img src="<?php echo $thumb[0]?>" class="attachment-shop_single wp-post-image" alt="<?php echo $img->post_title?>" title="<?php echo $img->post_title?>"  /></a>
<span class="view-larger-image"></span>

Tiếp theo, chúng ta liệt kê các hình ảnh slideshow cho tất cả các ảnh trong gallery images. Đặt đoạn code này vào vị trí thích hợp trong template.

<div class="ProductTinyImageList listImages">
	<ul>
	<?php foreach($images as $img){
$thumb_small=wp_get_attachment_image_src($img->ID,'thumbnail');//_print($thumb_small);//array('90','90')
$thumb=wp_get_attachment_image_src($img->ID,'medium');
?>
		<li><a  href="<?php echo $img->guid;?>" class="cloud-zoom-gallery" title="<?php echo $img->post_title?>" rel="useZoom: 'zoom1', smallImage: '<?php echo $thumb[0]?>'"><img  src="<?php echo $thumb_small[0]?>" class="" alt="<?php echo $img->post_title?>" /></a><!-- width="90" height="90" --></li>
	 <?php }?>       
	</ul>
</div>

Cuối cùng, khởi tạo tính năng cloud zoom bằng hàm javascript sau đây vào đối tượng jquery chứa thành phần cloud zoom, như ở ví dụ trên là “#zoom1”. Sử dụng đoạn code sau:

$(function(){
        $('#zoom1').CloudZoom();
    });

Hoàn tất !

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook