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

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

HIT

16.10.2016

1307


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

Для этого подключаем функционал карусели 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 данный функционал уже реализован

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Изображение для категории товаров

Изображение для категории товаров

В дизайнерских целях иногда требуется выводить изображение для категории товаров. Сделать это можно несколькими способами: плагином, кодом в functions, либо дополнительными полями. При этом кодом в funtions описанном мы будем Читать далее »

/
Миниатюры меток

Миниатюры меток

Произвольными полями делаем поле «миниатюра (изображение)» в метках. Там где надо вывести миниатюру ставим <?php // номер метки $tag_id = get_query_var( 'tag_id' ); // данные о текущей категории $tag = Читать далее »

/
Выводим записи у которых нет миниатюры

Выводим записи у которых нет миниатюры

Иногда нужно вывести все записи в которых отсутствуют миниатюры. Например, для интернет-магазина с множеством товаров. Сделаем это! Создаем страницу вывода Создадим шаблон страницы none-img.php, вначале обязательно прописываем название шаблона: <?php Читать далее »

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

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

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