У меня есть сайт.На одной из страниц я интегрировал плагин Light Box Image Gallery.Он отлично работает во всех других браузерах, принимающих сафари.Проблема, с которой я сталкиваюсь в Safari, заключается в том, что при нажатии на любое из изображений оно вызывает полноэкранный режим, но существует проблема перехода при открытии и закрытии галереи изображений, когда пользовательский интерфейс страницы искажается.
Я пыталсявсе возможные пути даже прошли через систему отслеживания проблем галереи лайтбоксов github, к сожалению, я не могу найти никакого решения.Любая помощь будет высоко ценится.
<li class="wow fadeIn" data-wow-delay="0.5s"><a data-toggle="pill" href="#img_gallery">gallery</a></li>
<div id="img_gallery" class="tab-pane fade">
<div class="residential_gallery">
<h1>The Pavilion Image Gallery</h1>
<hr>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation0.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation0.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation1.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation1.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation2.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation2.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation3.jpg">
<div class="gal_img"> <img src="assets/images/residential-projects/pavillion_elevation/pavilion_res_elevation3.jpg"></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/Pavilion_modal.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/Pavilion_modal.JPG" /></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/pavilion_modal_1.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/pavilion_modal_1.JPG" /></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/pavilion_modal_2.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/pavilion_modal_2.JPG" /></div>
</div>
<div class="item col-md-2 col-sm-2 col-xs-12" data-src="assets/images/gallery-images/pavilion_modal_3.JPG">
<div class="gal_img"> <img src="assets/images/gallery-images/pavilion_modal_3.JPG" /></div>
</div>
</div>
</div>
<script>
$('.images_gallery, .residential_gallery').lightGallery({
selector: '.item',
mode: 'lg-slide',
cssEasing: 'cubic-bezier(0.25, 0, 0.25, 1)',
backdropDuration: 150,
escKey: true,
controls: true,
mousewheel: true,
thumbnail: false,
width: '100%',
height: '100%',
download: false,
animateThumb: true,
counter: true,
closable: true,
enableDrag: true,
zoom: false,
fullScreen: false
// scale: 5
});
var $lg = $('.images_gallery, .residential_gallery');
$lg.on('onAfterOpen.lg', function() {
$lg.data('lightGallery').modules.fullscreen.requestFullscreen();
});
</script>
Not showing and expected error messages on the console however only on a Safari Browser gallery transition issue can be seen.