https://juken.nit.ac.jp/assets/js/swiper-photoswipe.js

1/* 1 of 2 : SWIPER ################################### */
2var sliderThumbnail = new Swiper('.p-newsArticleDetail__img-thumb', {// eslint-disable-line
3  slidesPerView: 5,
4  slidesPerColumn: 2,
5  // width: '104px',
6  // spaceBetween: 12,
7  // freeMode: true,
8  watchSlidesVisibility: true,
9  watchSlidesProgress: true,
10  allowTouchMove: false
11});
12
13var mySwiper = new Swiper(".p-newsArticleDetail__img-main", {// eslint-disable-line
14  // If swiper loop is true set photoswipe counterEl: false (line 175 her)
15  loop: false,
16  /* slidesPerView || auto - if you want to set width by css like flickity.js layout - in this case width:80% by CSS */
17  slidesPerView: "auto",
18  spaceBetween: 10,
19  centeredSlides: true,
20  slideToClickedSlide: false,
21  thumbs: {
22    swiper: sliderThumbnail
23  },
24  // If we need pagination
25  // pagination: {
26  //   el: ".swiper-pagination",
27  //   clickable: true,
28  //   renderBullet: function(index, className) {
29  //     return '<span class="' + className + '">' + (index + 1) + "</span>";
30  //   }
31  // },
32  //  Navigation arrows
33    // navigation: {
34    //   nextEl: '.p-article__img-button.-next',
35    //   prevEl: '.p-article__img-button.-prev',
36    // },
37     // keyboard control
38    keyboard: {
39        enabled: true
40    }
41});
42
43// $('.product-detail__img--thumb li').each(function(){
44//   $(this).hover(function() {
45//     // カーソルが当たった時の処理
46//     var thumbIndex = $(this).index();
47//     mySwiper.slideTo(thumbIndex, false);
48//   }, function() {
49//     return
50//   });
51// });
52
53
54
55// 2 of 2 : PHOTOSWIPE #######################################
56// https://photoswipe.com/documentation/getting-started.html //
57
58var initPhotoSwipeFromDOM = function(gallerySelector) {
59  // parse slide data (url, title, size ...) from DOM elements
60  // (children of gallerySelector)
61  var parseThumbnailElements = function(el) {
62    var thumbElements = el.childNodes,
63      numNodes = thumbElements.length,
64      items = [],
65      figureEl,
66      linkEl,
67      size,
68      item;
69
70    for (var i = 0; i < numNodes; i++) {
71      figureEl = thumbElements[i]; // <figure> element
72
73      // include only element nodes
74      if (figureEl.nodeType !== 1) {
75        continue;
76      }
77
78      linkEl = figureEl.children[0]; // <a> element
79
80      size = linkEl.getAttribute("data-size").split("x");
81
82      // create slide object
83      item = {
84        src: linkEl.getAttribute("href"),
85        w: parseInt(size[0], 10),
86        h: parseInt(size[1], 10)
87      };
88
89      if (figureEl.children.length > 0) {
90        // <figcaption> content
91        // item.title = figureEl.children[1].innerHTML;
92        item.title = figureEl.children[0].innerText;
93      }
94
95      if (linkEl.children.length > 0) {
96        // <img> thumbnail element, retrieving thumbnail url
97        item.msrc = linkEl.children[0].getAttribute("src");
98      }
99
100      item.el = figureEl; // save link to element for getThumbBoundsFn
101      items.push(item);
102    }
103
104    return items;
105  };
106
107  // find nearest parent element
108  var closest = function closest(el, fn) {
109    return el && (fn(el) ? el : closest(el.parentNode, fn));
110  };
111
112  // triggers when user clicks on thumbnail
113  var onThumbnailsClick = function(e) {
114    e = e || window.event;
115    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
116
117    var eTarget = e.target || e.srcElement;
118
119    // find root element of slide
120    var clickedListItem = closest(eTarget, function(el) {
121      return el.tagName && el.tagName.toUpperCase() === "LI";
122    });
123
124    if (!clickedListItem) {
125      return;
126    }
127
128    // find index of clicked item by looping through all child nodes
129    // alternatively, you may define index via data- attribute
130    var clickedGallery = clickedListItem.parentNode,
131      childNodes = clickedListItem.parentNode.childNodes,
132      numChildNodes = childNodes.length,
133      nodeIndex = 0,
134      index;
135
136    for (var i = 0; i < numChildNodes; i++) {
137      if (childNodes[i].nodeType !== 1) {
138        continue;
139      }
140
141      if (childNodes[i] === clickedListItem) {
142        index = nodeIndex;
143        break;
144      }
145      nodeIndex++;
146    }
147
148    if (index >= 0) {

149      // open PhotoSwipe if valid index found
150      openPhotoSwipe(index, clickedGallery);
151    }
152    return false;
153  };
154
155  // parse picture index and gallery index from URL (#&pid=1&gid=2)
156  var photoswipeParseHash = function() {
157    var hash = window.location.hash.substring(1),
158      params = {};
159
160    if (hash.length < 5) {
161      return params;
162    }
163
164    var vars = hash.split("&");
165    for (var i = 0; i < vars.length; i++) {
166      if (!vars[i]) {
167        continue;
168      }
169      var pair = vars[i].split("=");
170      if (pair.length < 2) {
171        continue;
172      }
173      params[pair[0]] = pair[1];
174    }
175
176    if (params.gid) {
177      params.gid = parseInt(params.gid, 10);
178    }
179
180    return params;
181  };
182
183  var openPhotoSwipe = function(
184    index,
185    galleryElement,
186    disableAnimation,
187    fromURL
188  ) {
189    var pswpElement = document.querySelectorAll(".pswp")[0],
190      gallery,
191      options,
192      items;
193
194    items = parseThumbnailElements(galleryElement);
195
196    // define options (if needed)
197    // https://photoswipe.com/documentation/options.html //
198    options = {
199      /* "showHideOpacity" uncomment this If dimensions of your small thumbnail don't match dimensions of large image */
200      //showHideOpacity:true,
201
202      // Buttons/elements
203      closeEl: true,
204      captionEl: true,
205      fullscreenEl: false,
206      zoomEl: true,
207      shareEl: false,
208      // counterEl: false,
209      arrowEl: true,
210      preloaderEl: true,
211      // define gallery index (for URL)
212      galleryUID: galleryElement.getAttribute("data-pswp-uid"),
213      getThumbBoundsFn: function(index) {
214        // See Options -> getThumbBoundsFn section of documentation for more info
215        var thumbnail = items[index].el.getElementsByTagName("img")[0], // find thumbnail
216          pageYScroll =
217            window.pageYOffset || document.documentElement.scrollTop,
218          rect = thumbnail.getBoundingClientRect();
219
220        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
221      }
222    };
223
224    // PhotoSwipe opened from URL
225    if (fromURL) {
226      if (options.galleryPIDs) {
227        // parse real index when custom PIDs are used
228        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
229        for (var j = 0; j < items.length; j++) {
230          if (items[j].pid == index) {
231            options.index = j;
232            break;
233          }
234        }
235      } else {
236        // in URL indexes start from 1
237        options.index = parseInt(index, 10) - 1;
238      }
239    } else {
240      options.index = parseInt(index, 10);
241    }
242
243    // exit if index not found
244    if (isNaN(options.index)) {
245      return;
246    }
247
248    if (disableAnimation) {
249      options.showAnimationDuration = 0;
250    }
251
252    // Pass data to PhotoSwipe and initialize it
253    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);// eslint-disable-line
254    gallery.init();
255
256    /* EXTRA CODE (NOT FROM photoswipe CORE) - UPDATE SWIPER POSITION TO THE CURRENT ZOOM_IN IMAGE (BETTER UI) */
257    // photoswipe event: Gallery unbinds events
258    // (triggers before closing animation)
259    gallery.listen("unbindEvents", function() {
260      // This is index of current photoswipe slide
261      var getCurrentIndex = gallery.getCurrentIndex();
262      // Update position of the slider
263      mySwiper.slideTo(getCurrentIndex, false);
264    });
265  };
266
267  // loop through all gallery elements and bind events
268  var galleryElements = document.querySelectorAll(gallerySelector);
269
270  for (var i = 0, l = galleryElements.length; i < l; i++) {
271    galleryElements[i].setAttribute("data-pswp-uid", i + 1);
272    galleryElements[i].onclick = onThumbnailsClick;
273  }
274
275  // Parse URL and open gallery if it contains #&pid=3&gid=1
276  var hashData = photoswipeParseHash();
277  if (hashData.pid && hashData.gid) {
278    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
279  }
280};
281
282// execute above function
283initPhotoSwipeFromDOM(".my-gallery");