WIX Help Случайный запуск в галерее слайдов

НАСТРОЙКА

На моем сайте WIX у меня есть:

  • коллекция под названием Ads980x120 с несколькими элементами (объявления и ссылки)
  • набор данных на странице, связанной с этой коллекцией
  • галерея слайдов 980p x 120p, связанная с этим набором данных (поле изображения и поле ссылки)

В настоящее время он отлично работает, вращая эти изображения на сайте.

ПРОБЛЕМА

Я не хочу, чтобы одно и то же изображение показывалось и запускало вращение при загрузке страницы. Я хочу, чтобы изображения отображались в случайном порядке. Это может быть вариант № 1: случайное начальное изображение, а затем продолжение в том же порядке, или вариант № 2: случайное начальное изображение И случайный порядок. Любой из них будет хорош в зависимости от уровня сложности.

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

Я надеюсь, что это имеет смысл, и заранее спасибо за любой совет или помощь!


random image-gallery velo
person Chris    schedule 07.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Чтобы сделать это без такого мерцания, я думаю, вам нужно использовать API wix-data.

Вот код, который я придумал. Вам нужно будет изменить его, чтобы он соответствовал названию и структуре вашей коллекции, а также идентификатору вашей галереи. Я также использую модуль Lodash npm для рандомизации порядка изображений, но вы можете написать этот код самостоятельно. Наконец, вам нужно удалить все изображения по умолчанию из галереи. При этом у вас все равно будет мерцание, но из пустой галереи в галерею со случайным изображением.

import {rendering} from 'wix-window';
import wixData from 'wix-data';
import _ from 'lodash';

$w.onReady( async () => {
    if(rendering.env === 'browser') {
        const {items} = await wixData.query('CollectionId').find();
        const images = items.map(item => ({src: item.image, title: item.title}));
        const shuffledImages = _.shuffle(images);
        $w('#galleryId').items = shuffledImages;
    }
} );
person Sam    schedule 08.02.2021