/ Сайтостроение / Scripts & jquery / Галерея изображений в виде карусели

Галерея изображений в виде карусели

HIT

16.10.2016

1452

Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели.

Для этого подключаем функционал карусели slick, и создать скрипт инициализации

$(document).ready(function() {   
  
 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  autoplay: true,
  autoplaySpeed: 6000,
  asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  centerMode: true,
  focusOnSelect: true
});   
  
});

Рекомендуемые стили CSS:

.slick-slider {
    width: 100%;
    float: left;
}

.slider-nav .slick-slide {
    background-color: #fff;
    margin: 10px 5px 10px 5px;
    border-radius: 3px;
    padding: 3px;
}

.slick-slide {cursor: pointer;}

Верстка

<div class="slider slider-for">
<div><a href="http://teplo.opttour.ru/wp-content/uploads/2016/09/teplocom-st555-1.jpg"><img src="http://teplo.opttour.ru/wp-content/uploads/2016/09/teplocom-st555-1-.jpg"></a></div>
<div><a href="http://teplo.opttour.ru/wp-content/uploads/2016/09/teplocom-st555-2.jpg"><img src="http://teplo.opttour.ru/wp-content/uploads/2016/09/teplocom-st555-2-.jpg"></a></div>
</div>
<div class="slider slider-nav">
<div><img src="http://teplo.opttour.ru/wp-content/uploads/2016/09/teplocom-st555-1-.jpg"></div>
<div><img src="http://teplo.opttour.ru/wp-content/uploads/2016/09/teplocom-st555-2-.jpg"></div>
</div>

При данной структуре карусели у нас 2 контейнера. В одном меняются большие изображения по одному (изображение товара), в другом листаются превьюхи других изображений в виде миниатюр по 3 шт. Контейнеры синхронизированы. Чтобы это заработало — изменяем два файла шаблонов woocommerce: product-image.php и product-thumbnails.php

product-image.php

<?php
/**
* Single Product Image
*
* @version 2.6.3
*/

if ( ! defined( 'ABSPATH' ) ) {
exit;
}

global $post, $product;
?>
<div class="images slider slider-for">
<?php
if ( has_post_thumbnail() ) {
$attachment_count = count( $product->get_gallery_attachment_ids() );
$gallery = $attachment_count > 0 ? '[product-gallery]' : '';
$props = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $props['title'],
'alt' => $props['alt'],
) );
echo apply_filters(
'woocommerce_single_product_image_html',
sprintf(
'<div><a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto%s">%s</a></div>',
esc_url( $props['url'] ),
esc_attr( $props['caption'] ),
$gallery,
$image
),
$post->ID
);
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}

?>

<?php

global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach ( $attachment_ids as $attachment_id ) {

$image_class = implode( ' ', $classes );
$props = wc_get_product_attachment_props( $attachment_id, $post );

if ( ! $props['url'] ) {
continue;
}

echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf(
'<div><a href="%s" class="%s zoom" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a></div>',
esc_url( $props['url'] ),
esc_attr( $image_class ),
esc_attr( $props['caption'] ),
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), 0, $props )
),
$attachment_id,
$post->ID,
esc_attr( $image_class )
);

$loop++;
}

?>

</div>

<?php do_action( 'woocommerce_product_thumbnails' ); ?>

product-thumbnails.php

<?php
/**
 * Single Product Thumbnails
 *
 * @version 2.6.3
 */

if ( ! defined( 'ABSPATH' ) ) {
 exit;
}

global $post, $product, $woocommerce;

$attachment_ids = $product->get_gallery_attachment_ids();

if ( $attachment_ids ) {
 $loop = 0;
 $columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
 ?>
 <div class="slider slider-nav thumbnails <?php echo 'columns-' . $columns; ?>">

 <div>

 <?php $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), array(
 'title' => $props['title'],
 'alt' => $props['alt'],
 ) ); ?> 
 
 <?php echo $image; ?>
 
 </div> 
 
 <?php

 foreach ( $attachment_ids as $attachment_id ) {

 $classes = array( 'zoom' );

 $image_class = implode( ' ', $classes );
 $props = wc_get_product_attachment_props( $attachment_id, $post );

 if ( ! $props['url'] ) {
 continue;
 }

 echo apply_filters(
 'woocommerce_single_product_image_thumbnail_html',
 sprintf(
 '<div><!--<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">-->%s<!--</a>--></div>',
 esc_url( $props['url'] ),
 esc_attr( $image_class ),
 esc_attr( $props['caption'] ),
 wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
 ),
 $attachment_id,
 $post->ID,
 esc_attr( $image_class )
 );

 $loop++;
 }

 ?></div>
 <?php
}

Необходимы корректировки, т.к. для миниатюр подгружаются изображения бОльшего размера

В версии Woocommerce 3.0 данный функционал уже реализован

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений Masonry

Галерея изображений Masonry

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой. Галерея изображений Masonry jquery Вставляем изображения в общий div с классом grid, каждое изображение в Читать далее »

/
Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем Читать далее »

/
Миниатюра — фон сайта

Миниатюра — фон сайта

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта. Вывод миниатюры в виде фона В цикл вывода миниатюры Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Галерея изображений в виде карусели
Форма подписки без плагина
Рекомендации для васФорма подписки без плагинаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.