https://www.anjou-tourisme.com/themes/theme_mon_site/libs/lae-galerie/lae-fancy-gallery.js?v=1.1.1

1var FancyGallery = (function (window, $) {
2
3  /*
4  Pour plus tard, amélioration possible
5  pouvoir ajouter plusieurs galerie dans une même page
6  var galleryIdPrefix = 'galerie-medias'; // prefixe d'identifiant des galeries
7  */
8
9  var FancyGallery = function ($el) {
10
11    this.mediasClass = '.galerie__media';
12    this.mediasCachesClass = '.media--cache';
13    this.btnAllClass = '.display-all-medias';
14    this.btnMediaMapClass = '.display-media-map';
15
16    this.$gallery = $el ? $el : $('#galerie-medias');
17    this.$medias = $el ? $el.find(this.mediasClass) : $(this.mediasClass);
18    this.$mediasCaches = $el ? $el.find(this.mediasCachesClass) : $(this.mediasCachesClass);
19    this.$btnAll = $el ? $el.find(this.btnAllClass) : $(this.btnAllClass);
20    this.$vignette2 = this.$gallery.find('.lae-col:eq(2)');
21
22    this.boxOptions = {
23      baseClass: '', // Custom CSS class for layout
24      slideClass: '', // Custom CSS class for slide element
25
26      speed: 330,
27
28      /* box buttons */
29      slideShow: true,
30      fullScreen: true,
31      thumbs: false,
32      closeBtn: true,
33
34      /* image options */
35      image: {
36        protect: true
37      },
38      /* videos options */
39      youtube: {
40        controls: 1,
41        showinfo: 0
42      },
43      vimeo: {
44        color: 'f00'
45      }
46    };
47
48    this.initialize();
49  };
50
51  /**
52   * initialise la galerie
53   */
54  FancyGallery.prototype.initialize = function () {
55
56    var that = this,
57      vignette = null;
58
59    $.fancybox.defaults.hash = false
60
61    /* Affichage des 3 premieres vignettes au bon format (premiere differente */
62    this.$medias.each(function (index) {
63      //if (index<3) {
64      var $media = $(this),
65        $img = $media.find('img');
66      //}
67
68      if ($img) {
69        if (index == 2 && (vignette = $img.data('vignette1')) && $(window).width() > 768) {
70          $img.attr('src', vignette);
71        } else if (vignette = $img.data('vignette')) {
72          $img.attr('src', vignette);
73        }
74      }
75    });
76
77    /* Initialise automatiquement fancybox lors de l'ajout de data-fancybox */
78    this.$medias.attr('data-fancybox', 'galerie-medias');
79
80    /* On récupère l'instance de fancybox */
81    this.fancyInstance = this.$medias.fancybox(that.boxOptions);
82
83    this.manageEvents();
84
85    this.$gallery.addClass('gallery-initialized');
86
87  };
88
89  /**
90   * gestion des événements
91   */
92  FancyGallery.prototype.manageEvents = function () {
93
94    var that = this,
95      $body = $('body');
96
97    /* Clic sur bouton carte*/
98    $body.on('click', that.btnMediaMapClass, function (e) {
99      e.preventDefault();
100      var $lien = $(this);
101      that.buildMapContainer($lien)
102    });
103
104    /* Clic sur voir plus/moins d'images */
105    that.$btnAll.on('click', function (e) {
106      e.preventDefault();
107      if (that.$btnAll.hasClass('all-visible')) {
108        that.showFewer();
109      } else {
110        that.viewMore();
111      }
112    });
113
114  };
115
116  /**
117   * Affichage de toutes les images
118   */
119  FancyGallery.prototype.viewMore = function () {
120    var that = this,
121      $medias_cache = this.$mediasCaches,
122      $toggle = this.$btnAll.find('.text-toggle'),
123      text = $toggle.text(),
124      anim_duration = 300; // durée d'animation de chaque media
125
126    /* $('html, body').animate({
127         scrollTop: that.$vignette2.offset().top - 8
128     }, anim_duration);*/
129
130    $medias_cache.each(function (index, element) {
131      var $media = $(this),
132        $img = $media.find('img');
133      /* Vérifie si media initialisé */
134      if ($img.attr('data-vignette') != '') {
135        /* initialisation */
136        $img.attr('src', $img.attr('data-vignette')).attr('data-vignette', '');
137      }
138      $media.removeClass('animated--exit');
139      $media.addClass('invisible  media--affiche');
140      setTimeout(function () {
141        $media.removeClass('invisible');
142        $media.addClass('animated--entrance');
143      }, index * anim_duration);
144    });
145
146    /* Gestion intitulé bouton */
147    this.$btnAll.addClass('all-visible  invisible');
148    setTimeout(function () {
149      that.$btnAll.removeClass('invisible');
150    }, $medias_cache.length * anim_duration);
151    $toggle.html($toggle.attr('data-text')).attr('data-text', text);
152  };
153
154  /**
155   * Masque les images supplémentaires progressivement avec animation
156   */
157  FancyGallery.prototype.showFewer = function () {
158    var that = this,
159      // $medias_visible = $($('.media--affiche.animated--entrance').get().reverse()),
160      $medias_visible = this.$mediasCaches,
161      $toggle = this.$btnAll.find('.text-toggle'),
162      text = $toggle.text(),
163      anim_duration = 250; // durée d'animation de chaque media
164
165    /* $('html, body').animate({
166         scrollTop: that.$vignette2.offset().top - 8 // -8 de marge blanche
167     }, $medias_visible.length * anim_duration);*/
168
169    $medias_visible.each(function (index, element) {
170      var media = $(this);
171      media.removeClass('animated--entrance');
172      setTimeout(function () {
173        media.addClass('animated--exit');
174      }, index * anim_duration);
175      setTimeout(function () {
176        media.removeClass('media--affiche');
177      }, $medias_visible.length * anim_duration + 200);
178    });
179
180    /* Gestion intitulé bouton */
181    $toggle.html($toggle.attr('data-text')).attr('data-text', text);
182    this.$btnAll.removeClass('all-visible').addClass('invisible');
183    setTimeout(function () {
184      that.$btnAll.removeClass('invisible');
185    }, $medias_visible.length * 200);
186  };
187
188  /**
189   * Construction du dom qui contiendra la carte
190   * La carte s'affiche dans une lightbox par dessus la lightbox de la galer

190ie
191   * @param $lien contient la géoloc en attributs
192   */
193  FancyGallery.prototype.buildMapContainer = function ($lien) {
194    var that = this;
195    $.fancybox.open(
196      '<div class="responsive-map-container"><div id="fancyMap" class="media-map"></div></div>',
197      {
198        baseClass: 'fancy-map',
199        closeClickOutside: false,
200        touch: false,
201        afterLoad: function (instance, slide) {
202          that.setFancyMap($lien.attr('data-lat'), $lien.attr('data-lng'))
203        }
204      }
205    );
206  };
207
208  /**
209   * Affiche la carte
210   */
211  FancyGallery.prototype.setFancyMap = function (lat, lng) {
212
213    var that = this,
214      center = [ Number(lat), Number(lng) ];
215
216    this.map = L.map('fancyMap', {
217      center: center,
218      zoom: 14,
219      scrollWheelZoom: true,
220      dragging: true
221    });
222
223    if(typeof L.lae !== 'undefined') {
224      L.lae.defaultTileLayer().addTo(this.map);
225    } else {
226      L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
227        attribution: 'Données carte © <a href="http://wikimedia.org" target="_blank">Wikimedia</a>'
228      }).addTo(this.map);
229    }
230
231
232    L.marker(center, {
233      icon: L.icon({
234        iconUrl: '/themes/theme_mon_site/img/picto-marker.png',
235        iconSize: [ 40, 55 ],
236        iconAnchor: [ 20, 55 ]
237      })
238    }).addTo(this.map);
239
240  };
241
242  var $els = $('.galerieImage');
243  $.each($els, function(){
244    var gallery = new FancyGallery($(this));
245  });
246
247  /**
248   * Cas particulier : theme mobile
249   * Chargement page details en ajax sur vue liste
250   */
251  var dsioDetail = document.querySelector("#dsioDetailWrapper");
252  if (dsioDetail) {
253    var mut = new MutationObserver(function (mutations, mut) {
254      if ($('#galerie-medias:not(.gallery-initialized)').length > 0) {
255        gallery = new FancyGallery();
256      }
257    });
258    mut.observe(dsioDetail, {
259      'attributes': true
260    });
261  }
262
263  return FancyGallery;
264
265})(window, jQuery);
266