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

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài 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á cả rẻ hôm nay xin hướng dẫn các bạn cách 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 mặt hàng với woocommerce.

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

Xem qua: chỉ 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 khoảng lặp đoạn code tạo cloud zoom cho gallery image đã thiết lập cho post như sau.

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

    

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

  
    ID,'thumbnail');//_print($thumb_small);//array('90','90') $thumb=wp_get_attachment_image_src($img-> ID,'medium'); ?>

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ư ở tỉ dụ trên là “#zoom1”. Sử dụng đoạn code sau:

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

Hoàn tất !

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng đều có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Phóng ảnh cloud zoom với plugin gallery metabox trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang