https://www.tokyo-subaru.co.jp/js/toppage/toppage.js

1
2
3document.addEventListener('DOMContentLoaded', function () {
4  const swipermv = new Swiper('.swipermv', {
5    loop: true,
6    speed: 600,
7    spaceBetween: 0,
8    slidesPerView: 1,
9    centeredSlides: true,
10    watchSlidesProgress: true,
11
12    breakpoints: {
13      640: {
14        spaceBetween: 15,
15        slidesPerView: 1.45,
16      }
17    },
18
19    pagination: {
20      el: '.swiper-pagination',
21      clickable: true,
22    },
23
24    navigation: {
25      nextEl: '.swiper-button-next',
26      prevEl: '.swiper-button-prev',
27    },
28
29    autoplay: {
30      delay: 5000,
31    }
32
33  });
34
35  const swipersub = new Swiper('.swipersub', {
36
37    breakpoints: {
38      640: {
39        spaceBetween: 15,
40        slidesPerView: 5,
41        navigation: false,
42      },
43      0: {
44        loop: true,
45        spaceBetween: 0,
46        slidesPerView: 1,
47
48        navigation: {
49          nextEl: '.swiper-button-next',
50          prevEl: '.swiper-button-prev',
51        },
52      },
53    },
54  });
55});
56
57const accessToken = 'EAAnG43OEOhABOx2nwKPazppYqK3gd2nmdoFbpHumtLNsoXbEwZAsFKOc5FRsV1cOwtUckfp5FPFg84qwZA3QcQq4JWt4oXB6YQoccLwyXZCWPQZC2mXN9G8rS8QKYp03dIdZBxdGNM4qEZC8CKNFduyqk7MQ8kCcvngagHlufYbPPIbBO7Jd1eWgMzS5VN26emDGZBx4ZAe7';
58const userId = '17841453643130034';
59
60async function fetchInstagramPosts() {
61  try {
62    const response = await fetch(`https://graph.facebook.com/v20.0/${userId}?fields=media_count,media{caption,media_url,thumbnail_url,media_type,permalink}&access_token=${accessToken}`);
63    if (!response.ok) {
64      throw new Error(`Error: ${response.status} - ${response.statusText}`);
65    }
66    const data = await response.json();
67    return data.media.data;
68  } catch (error) {
69    document.getElementById('error-message').textContent = error.message;
70    throw error;
71  }
72}
73
74function createGridItem(post) {
75  const gridItem = document.createElement('div');
76  gridItem.className = 'grid-item';
77  const anchor = document.createElement('a');
78  anchor.href = post.permalink;
79  anchor.target = '_blank';
80  const image = document.createElement('img');
81
82  if (post.media_type === 'VIDEO') {
83    image.src = post.thumbnail_url;
84  } else {
85    image.src = post.media_url;
86  }
87
88  anchor.appendChild(image);
89  gridItem.appendChild(anchor);
90  return gridItem;
91}
92
93async function populateGrid() {
94  try {
95    const posts = await fetchInstagramPosts();
96    const gridContainer = document.getElementById('instagram-grid');
97    let count = 0;
98
99    for (let post of posts) {
100      const gridItem = createGridItem(post);
101      gridContainer.appendChild(gridItem);
102      count++;
103      if (count >= 18) {
104        break;
105      }
106    }
107
108  } catch (error) {
109    console.error('Error populating grid:', error);
110  }
111}
112
113populateGrid();
114
115
116