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

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

HIT

16.10.2016

2552

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

Для этого подключаем функционал карусели 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="/wp-content/uploads/2016/09/teplocom-st555-1.jpg"><img src="/wp-content/uploads/2016/09/teplocom-st555-1-500x500.jpg"></a></div>
	<div><a href="/wp-content/uploads/2016/09/teplocom-st555-2.jpg"><img src="/wp-content/uploads/2016/09/teplocom-st555-2-500x500.jpg"></a></div>
</div>

<div class="slider slider-nav">
	<div><img src="/wp-content/uploads/2016/09/teplocom-st555-1-150x150.jpg"></div>
	<div><img src="/wp-content/uploads/2016/09/teplocom-st555-2-150x150.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 данный функционал уже реализован

Новая верстка галереи для сайта

Подходит для изображений, которые разные по пропорциям и размерам. Миниатюры можно сделать 2-х видов: в виде одной линии с пролистыванием или чтобы они строились столбиками (FLEX).

Верстка (c Featured gallery):

<div id="product-gallery">

<?php $galleryArray = get_post_gallery_ids($post->ID);
if ( !empty($galleryArray) ): ?>
	
	<div class="slider slider-for">
	<a href="<?php the_post_thumbnail_url('full'); ?>"><?php the_post_thumbnail('medium'); ?></a>
	<?php $galleryArray = get_post_gallery_ids($post->ID); ?>
	<?php foreach ($galleryArray as $id) { ?>
		<a href="<?php echo wp_get_attachment_image_url($id, 'full'); ?>"><img src="<?php echo wp_get_attachment_image_url( $id, 'medium' ); ?>"></a>
	<?php } ?>
	</div>
	
	<div class="slider slider-nav">
	<?php the_post_thumbnail('thumbnail'); ?>
	<?php foreach ($galleryArray as $id) { ?>
		<img src="<?php echo wp_get_attachment_image_url( $id, 'thumbnail' ); ?>">
	<?php } ?>
	</div>
	
<?php else: ?>

	<a href="<?php the_post_thumbnail_url('full'); ?>"><?php the_post_thumbnail('medium'); ?></a>
	
<?php endif; ?>

</div>

Скрипт slick:

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

$('.slider-nav').slick({
	slidesToShow: 4,
	asNavFor: '.slider-for',
	arrows: false,
	centerMode: true,
	focusOnSelect: true,
	
	// Для миниатюр FLEX
	infinite: false,
	centerPadding: '0',
});

Стили:

#product-gallery {position: relative; width: 500px; float:left; margin-right: 50px; margin-bottom: 30px;}

#product-gallery img {cursor: pointer;}

.slider-for {height: 500px; display: flex !important; align-items: center; border: 1px solid #eee; margin-bottom: 15px; background: red;}

/*.slider-for .slick-list {height: 500px !important;}*/

.slider-for .slick-track {display: flex;}

.slider-for .slick-slide {margin: auto; width: 100% !important;}

.slider-for .slick-slide img {width: 100%;}


.slider-nav img {padding: 5px; border: 1px solid #eee; margin: 0 7px;}


/* Для миниатюр FLEX */

.slider-nav .slick-track {
    display: flex !important;
	justify-content: space-between;
    width: auto !important;
    transform: unset !important;
	flex-wrap: wrap;
}

.slider-nav .slick-track:before, .slider-nav .slick-track:after {display: none;}

.slider-nav img {width: 17% !important; margin: 0 0 15px 0;}

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Миниатюры

Миниатюры

Миниатюра — это графическое изображение передающее её суть записи. При удалении изображения, удаляются все его миниатюры. Миниатюра записи Добавление миниатюр записям (в файле funсtions.php) Если отсутствует миниатюры выдает placeholder (в Читать далее »

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

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

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

/
Фотогалерея (NextGEN Gallery)

Фотогалерея (NextGEN Gallery)

Часто на различных сайтах требуется организовать галерею изображений. Сделать это можно различными плагинами, либо штатными средствами. Штатные методы формирования галереи с каждой версией совершенствуются. Стандартная галерея wordpress Галерея в виде Читать далее »

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

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

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