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

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

HIT

16.10.2016

2063

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/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 данный функционал уже реализован

Тэги: ,

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

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

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

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

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

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

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

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

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

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

/

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

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

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