Задать вопрос

Tarantashka28

Лайки

  • Как сделать скрин сайта для портфолио?

    clubbox
    @clubbox
    Очень крутой инструмент cover.isfor.biz/?url=https://toster.ru/q/291892
    Просто нажать принскрин
    a7c4a48633594f2391bf5aa2a6f16850.png
    Ответ написан
    Комментировать
    Комментировать

  • Почему выводится максимум 10 кастомных постов?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    При создании запросов WP_Query может получать предустановленные параметры, которые нужно учитывать. Например, запрос $query = new WP_Query( 'post_type=func' ); может вернуть только первые 10 записей типа func, а не все, как ожидается. Потому что предустановленный параметр posts_per_page=10, ограничивает количество получаемых записей до 10.
    Ответ написан
    9 комментариев
    9 комментариев

  • Как сделать pop-up отдельной страницей?

    pavel_ataykin
    @pavel_ataykin
    Верстаю и программирую всякое.
    Привет! Это называется History API https://developer.mozilla.org/en-US/docs/Web/API/H.... При открытие модального пушишь новое состояние, при закрытии тоже. При этом тебе нужно учесть, что если перейти по прямой ссылки, то тебе нужно будет самому показать это модальное окно
    Ответ написан
    Комментировать
    Комментировать

  • Как подружить lightGallery + swiper loop?

    nelliel
    @nelliel Автор вопроса
    В общем то сам придумал как решить задачку. Опишу, может пригодится кому-то.

    Нужно использовать параметр dynamic: true, в lightgalleryjs. ( https://www.lightgalleryjs.com/demos/dynamic-mode/ )

    ШАГ 1. Ищем все наши изображения внутри слайдера и записываем их url в массив с объектами.
    let itemGallery = document.getElementById('product-tab-gallery');
	let itemGalleryImages = itemGallery.getElementsByTagName('img');
	let realIndexSlider;
	let itemGalleryDynamic = [];
	for (let i = 0; i < itemGalleryImages.length; i++) {
		const img = itemGalleryImages[i];
		itemGalleryDynamic[i] = {
			src: img.getAttribute('src'),
			thumb: img.getAttribute('src'),
		};
	}


    ШАГ 2. Инициализируем lightgalleryjs и передаем в параметр dynamicEl - массив с объектами из найденных изображений: dynamicEl: itemGalleryDynamic,
    let itemGalleryLight = lightGallery(itemGallery, {
		dynamic: true,
		autoplayFirstVideo: false,
		pager: false,
		galleryId: "nature",
		plugins: [lgZoom, lgThumbnail, lgAutoplay, lgVideo, lgFullscreen, lgHash],
		mobileSettings: {
			controls: true,
			showCloseIcon: true,
			download: true,
			rotate: false
		},
		dynamicEl: itemGalleryDynamic,
	});


    ШАГ 3. Инициализируем SWIPER.
    let imgSlider = new Swiper('#product-tab-gallery', {
		speed: 800,
		spaceBetween: 30,
		watchOverflow: true,
		autoHeight: true,
		loop: true,
	});


    ШАГ 4. Вешаем событие при клике на контейнер галереи. Ищем активный слайд по классу (swiper-slide-active), и в этом активной слайде узнаем атрибут [data-swiper-slide-index]. Этот индекс передаем методу lightgalleryjs.
    itemGallery.addEventListener('click', function (e) {
		realIndexSlider = itemGallery.getElementsByClassName('swiper-slide-active');
		realIndexSlider = Number(realIndexSlider[0].getAttribute('data-swiper-slide-index'));
		console.log(realIndexSlider);
		itemGalleryLight.openGallery(realIndexSlider);
	});


    Всё целиком будет выглядеть так:
    HTML
    <div id="product-tab-gallery" class="swiper-container">

	<div class="static-thumbnails swiper-wrapper">
		<a data-src="img/images/choose/01.jpg" class="imageitem swiper-slide">
			<img src="img/images/choose/01.jpg" />
		</a>

		<a data-src="img/images/choose/02.jpg" class="imageitem swiper-slide">
			<img src="img/images/choose/02.jpg" />
		</a>

	</div>
</div>


    JS
    let itemGallery = document.getElementById('product-tab-gallery');
	let itemGalleryImages = itemGallery.getElementsByTagName('img');
	let realIndexSlider;
	let itemGalleryDynamic = [];
	for (let i = 0; i < itemGalleryImages.length; i++) {
		const img = itemGalleryImages[i];
		itemGalleryDynamic[i] = {
			src: img.getAttribute('src'),
			thumb: img.getAttribute('src'),
		};
	}


	let itemGalleryLight = lightGallery(itemGallery, {
		dynamic: true,
		autoplayFirstVideo: false,
		pager: false,
		galleryId: "nature",
		plugins: [lgZoom, lgThumbnail, lgAutoplay, lgVideo, lgFullscreen, lgHash],
		mobileSettings: {
			controls: true,
			showCloseIcon: true,
			download: true,
			rotate: false
		},
		dynamicEl: itemGalleryDynamic,
	});

	let imgSlider = new Swiper('#product-tab-gallery', {
		speed: 800,
		spaceBetween: 30,
		watchOverflow: true,
		autoHeight: true,
		loop: true,
	});

	itemGallery.addEventListener('click', function (e) {
		realIndexSlider = itemGallery.getElementsByClassName('swiper-slide-active');
		realIndexSlider = Number(realIndexSlider[0].getAttribute('data-swiper-slide-index'));
		itemGalleryLight.openGallery(realIndexSlider);
	});


    Наверняка код можно как-то сократить и оптимизировать, но главное что и так работает)
    Ответ написан
    Комментировать
    Комментировать

  • Как динамически изменять текст в зависимости от id другого элемента?

    @Asokr 
    var buttonModal = document.getElementsByClassName("btn-primary");
var titleModal = document.getElementsByClassName("modal-title");

    Возвращает коллекцию.

    Вам просто нужно повесить обработчик на каждую кнопку по id
    document.querySelector("#order").addEventListener("click", function (e) {
  document.querySelector(".modal-title").innerHTML = "Оформить доставку";
});
document.querySelector("#call").addEventListener("click", function (e) {
  document.querySelector(".modal-title").innerHTML = "Заказать звонок";
});


    Или если вам нужно по элементу на странице вставлять тайтл, то вешайте обработчик в цикле, на каждый элемент коллекции...
    Ответ написан
    2 комментария
    2 комментария

  • Как сделать смену стилей CSS в зависимости от времени суток с помощью JS?

    @twoone
    Если сайт является spa то будет необходимо реализовать постоянную проверку времени и изменение темы путем вызова метода changeTheme. 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link id="time-theme" rel="stylesheet" href="">
    <script src="./time-theme.js"></script>
</head>
<body>
    
</body>
</html>

    let timeRanges = new Set([
    {range: {from: `24`, to: `4`}, name:`night`, href:`./dark-theme.css`},
    {range: {from: `4`, to: `12`}, name: `morning`, href:`./light-theme.css`},
    {range: {from: `12`, to: `17`}, name: `day`, href:`./light-theme.css`},
    {range: {from: `17`, to: `24`}, name: `evening`, href:`./dark-theme.css`},
]);

const changeTheme = timeRanges => {
    let currentHour = new Date().getHours();

    for(let {range, href, name} of timeRanges){
        if(currentHour >= range.from && currentHour <= range.to){
            Object.assign(document.querySelector(`link#time-theme`), { href });
    
            break;
        }
        
    }
}

changeTheme(timeRanges);
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему не работает thumbs в swiper js?

    @bQ1 Автор вопроса
    Не работало из за того что у меня было в цикле два слайдера с одинаковым классом => galleryThumbs был как массив а не элемент
    А по поводу отключения свайпа => allowTouchMove boolean true/false
    Ответ написан
    2 комментария
    2 комментария