Advanced woocommerce product gallery slider single product (ok)
#panel {
width: 483px;
position: relative;
float: left;
}
#thumbs{
position: absolute;
right: 0;
width: 76px;
height: 350px;
overflow-x: hidden;
overflow-y: scroll;
@include translateY50;
@include flexbox;
@include flexcolumn;
img {
border: 1px solid #C4C4C4;
height: 100%;
@include objectfit;
}
.thumb {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
&.active {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
img {
border: 1px solid #EC4A23;
}
}
}
.woocommerce-product-gallery__image {
height: 76px;
width: 76px;
margin-bottom: 15px;
@include borderbox;
&:last-child {
margin-bottom: 0;
}
}
&::-webkit-scrollbar {
width: 0;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
.thumb {
display: inline-block;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.controls {
position: absolute;
top: 0;
height: 100%;
right: 0;
i {
position: absolute;
right: 32px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
i.prev {
top: 0;
}
i.next {
bottom: 0;
}
img {
cursor: pointer;
margin: 0px;
}
span {
font-size: 13px;
display: inline-block;
vertical-align: top;
margin-top: 5px;
}
}
#large{
.woocommerce-product-gallery__image.active {
width: 390px;
height: 390px;
>img {
width: 100%;
height: 100%;
@include objectfit
}
}
.controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.thumb {
display: none;
}
.active {
display: block;
img {
border: 2px solid #333;
}
}
}
jQuery(document).ready(function($) {
$(function() {
var getIndex = $("#thumbs").find(".active").index();
$(".controls").each(function() {
$(this).find(".next").click(function() {
getIndex = $("#thumbs").find(".active").index();
getIndex += 1;
if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
getIndex = 0;
}
setActiveImage(getIndex);
});
$(this).find(".prev").click(function() {
getIndex -= 1;
if (getIndex < 0) {
getIndex = $("#thumbs").find(".thumb").length - 1;
}
setActiveImage(getIndex);
});
});
});
$("#thumbs .thumb").on('click',function(){
var index=$(this).index();
setActiveImage(index);
})
function setActiveImage(index) {
if (typeof(index) == "undefined" || index == "" || index == null) index = 0;
$("#thumbs").find(".thumb").removeClass("active");
$("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
$("#large").find(".thumb").removeClass("active");
$("#large").find(".thumb:eq(" + index + ")").addClass("active");
}
});
function filter_woocommerce_single_product_image_thumbnail_html( $sprintf, $post_id ) {
global $product;
global $woocommerce;
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'large' );
if ( get_post_thumbnail_id() !== intval( $attachment_id ) ) {
$html = '<div class="active thumb woocommerce-product-gallery__image">';
$html .= sprintf( '<img src="'.$src[0].'" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
$html .= '</div>';
}
return $html;
};
add_filter( 'woocommerce_single_product_image_thumbnail_html_ct', 'filter_woocommerce_single_product_image_thumbnail_html', 10, 2 );
function wc_get_gallery_image_html_ct( $attachment_id, $main_image = false ) {
$flexslider = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'large' : $thumbnail_size );
$full_size = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $attachment_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
$image = wp_get_attachment_image(
$attachment_id,
$image_size,
false,
apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
),
$attachment_id,
$image_size,
$main_image
)
);
return '<div class="thumb woocommerce-product-gallery__image">'.$image.'</div>';
}
PreviousThay đổi số lượng hiển thị sản phẩm liên quan trong woocommerce (ok)NextHow To Add WooCommerce Custom Product Fields (ok)
Last updated