Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function initGallery() {
- $('.gallery').each((index, element) => {
- let $gallery = $(element);
- let onAnimation = false;
- let $galleryItem = $gallery.find('.gallery__item');
- let $pagination = $gallery.find('.gallery__pagination');
- let $galleryNav = $gallery.find('.gallery__nav');
- let $galleryNavPrev = $galleryNav.filter('[data-nav="prev"]');
- let $galleryNavNext = $galleryNav.filter('[data-nav="next"]');
- let $galleryNavPrevArrow = $galleryNavPrev.find('.gallery__nav__arrow');
- let $galleryNavNextArrow = $galleryNavNext.find('.gallery__nav__arrow');
- let $galleryNavPrevImage = $galleryNavPrev.find('.gallery__nav__image');
- let $galleryNavNextImage = $galleryNavNext.find('.gallery__nav__image');
- function galleryHeight() {
- $gallery.attr('style', `height: ${Math.max(...$galleryItem.find('img').get().map((item) => item.offsetHeight))}px`);
- }
- let galleryHeightTimeout = setTimeout(() => {
- galleryHeight();
- }, 100);
- $(window).on('resize', () => {
- clearTimeout(galleryHeightTimeout);
- galleryHeightTimeout = setTimeout(() => {
- galleryHeight();
- }, 100);
- });
- let currentSlideIndex = 0;
- for (let i = 0; i < $galleryItem.length; i++) {
- $galleryItem.eq(i).data('slide', i).attr('data-slide', i);
- $pagination.append(`
- <div class="gallery__pagination__item" data-item="${i}"></div>
- `);
- }
- let $paginationItem = $gallery.find('.gallery__pagination__item');
- let $currentSlide;
- let $nextSlide;
- let $prevSlide;
- let $currentPuginationItem;
- function sortSlides() {
- $currentSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex}"]`);
- if (currentSlideIndex !== $galleryItem.length - 1) {
- $nextSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex + 1}"]`);
- } else {
- $nextSlide = $galleryItem.filter('[data-slide="0"]');
- }
- if (currentSlideIndex !== 0) {
- $prevSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex - 1}"]`);
- } else {
- $prevSlide = $galleryItem.filter(`[data-slide="${$galleryItem.length - 1}"]`);
- }
- $galleryNavPrevImage.find('img').remove();
- $galleryNavPrevImage.append(`
- <img src="${$prevSlide.find('img').attr('src')}" alt="" />
- `);
- $galleryNavNextImage.find('img').remove();
- $galleryNavNextImage.append(`
- <img src="${$nextSlide.find('img').attr('src')}" alt="" />
- `);
- $currentPuginationItem = $paginationItem.filter(`[data-item="${currentSlideIndex}"]`);
- $currentPuginationItem.addClass('is-active');
- }
- sortSlides();
- $currentSlide.addClass('is-current');
- $nextSlide.addClass('is-next');
- $prevSlide.addClass('is-prev');
- function nextSlide() {
- new TimelineMax({
- onStart() {
- $nextSlide.addClass('is-before-current');
- onAnimation = true;
- $currentPuginationItem.removeClass('is-active');
- },
- onComplete() {
- $currentSlide.removeClass('is-current');
- $nextSlide.removeClass('is-next is-before-current').addClass('is-current');
- $prevSlide.removeClass('is-prev');
- currentSlideIndex = $nextSlide.data('slide');
- TweenMax.set($currentSlide, {clearProps: 'all'});
- sortSlides();
- onAnimation = false;
- },
- })
- .to($currentSlide, 1, {
- x: '-100%',
- });
- }
- function prevSlide() {
- new TimelineMax({
- onStart() {
- $prevSlide.addClass('is-before-current');
- onAnimation = true;
- $currentPuginationItem.removeClass('is-active');
- },
- onComplete() {
- $currentSlide.removeClass('is-current');
- $prevSlide.removeClass('is-prev is-before-current').addClass('is-current');
- $nextSlide.removeClass('is-next');
- currentSlideIndex = $prevSlide.data('slide');
- TweenMax.set($currentSlide, {clearProps: 'all'});
- sortSlides();
- onAnimation = false;
- },
- })
- .to($currentSlide, 1, {
- x: '100%',
- });
- }
- $galleryNavPrev.on('click', () => {
- if (!onAnimation) {
- prevSlide();
- }
- });
- $galleryNavNext.on('click', () => {
- if (!onAnimation) {
- nextSlide();
- }
- });
- $(document).on('mousemove', (e) => {
- if (innerWidth > 1024) {
- if (
- e.pageX > $gallery.offset().left &&
- e.pageX < $gallery.offset().left + $galleryNavPrev.width() &&
- e.pageY > $gallery.offset().top &&
- e.pageY < $gallery.offset().top + $gallery.height()
- ) {
- if (
- e.pageX > $gallery.offset().left + $galleryNavPrevArrow.width() / 2 &&
- e.pageX < $gallery.offset().left + $galleryNavPrev.width() - $galleryNavPrevArrow.width() / 2
- ) {
- $galleryNavPrevArrow.css({
- left: e.pageX - $gallery.offset().left,
- });
- } else if (e.pageX > $gallery.offset().left + $galleryNavPrevArrow.width() / 2) {
- $galleryNavPrevArrow.css({
- left: $galleryNavNext.width() - $galleryNavPrevArrow.width() / 2,
- });
- } else if (
- e.pageX < $gallery.offset().left + $galleryNavPrev.width() - $galleryNavPrevArrow.width() / 2
- ) {
- $galleryNavPrevArrow.css({
- left: 0 + $galleryNavPrevArrow.width() / 2,
- });
- }
- if (
- e.pageY > $gallery.offset().top + $galleryNavPrevArrow.height() / 2 &&
- e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavPrevArrow.height() / 2
- ) {
- $galleryNavPrevArrow.css({
- top: e.pageY - $gallery.offset().top,
- });
- } else if (e.pageY > $gallery.offset().top + $galleryNavPrevArrow.height() / 2) {
- $galleryNavPrevArrow.css({
- top: $gallery.height() - $galleryNavPrevArrow.height() / 2,
- });
- } else if (
- e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavPrevArrow.height() / 2
- ) {
- $galleryNavPrevArrow.css({
- top: 0 + $galleryNavPrevArrow.height() / 2,
- });
- }
- if (!$galleryNavPrevArrow.hasClass('is-active')) {
- $galleryNavPrevArrow.addClass('is-active');
- }
- } else {
- $galleryNavPrevArrow.removeClass('is-active');
- }
- if (
- e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() &&
- e.pageX < $gallery.offset().left + $gallery.width() &&
- e.pageY > $gallery.offset().top &&
- e.pageY < $gallery.offset().top + $gallery.height()
- ) {
- if (
- e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() +
- $galleryNavNextArrow.width() / 2 &&
- e.pageX < $gallery.offset().left + $gallery.width() - $galleryNavNextArrow.width() / 2
- ) {
- $galleryNavNextArrow.css({
- left: e.pageX - $gallery.offset().left - $gallery.width() + $galleryNavNext.width(),
- });
- } else if (
- e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() +
- $galleryNavNextArrow.width() / 2
- ) {
- $galleryNavNextArrow.css({
- left: $galleryNavNext.width() - $galleryNavNextArrow.width() / 2,
- });
- } else if (
- e.pageX < $gallery.offset().left + $gallery.width() - $galleryNavNextArrow.width() / 2
- ) {
- $galleryNavNextArrow.css({
- left: 0 + $galleryNavNextArrow.width() / 2,
- });
- }
- if (
- e.pageY > $gallery.offset().top + $galleryNavNextArrow.height() / 2 &&
- e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavNextArrow.height() / 2
- - $pagination.height()
- ) {
- $galleryNavNextArrow.css({
- top: e.pageY - $gallery.offset().top,
- });
- } else if (e.pageY > $gallery.offset().top + $galleryNavNextArrow.height() / 2) {
- $galleryNavNextArrow.css({
- top: $gallery.height() - $galleryNavNextArrow.height() / 2 - $pagination.height(),
- });
- } else if (
- e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavNextArrow.height() / 2
- ) {
- $galleryNavNextArrow.css({
- top: 0 + $galleryNavNextArrow.height() / 2,
- });
- }
- if (!$galleryNavNextArrow.hasClass('is-active')) {
- $galleryNavNextArrow.addClass('is-active');
- }
- } else {
- $galleryNavNextArrow.removeClass('is-active');
- }
- }
- });
- });
- }
- initGallery();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement