Привет всем, я начинаю разбираться в HTML, CSS и JS и пытаюсь помочь другу решить небольшую проблему, которая возникла у него с его всплывающей галереей.
Итак, в настоящее время он добавил 2 основных изображения, и каждое изображение при нажатии должно открывать 4 всплывающих изображения, но происходит то, что не имеет значения, на каком основном изображении щелкнули, всплывающая галерея загрузит все 8 изображений. .
Это его код HTML:
<section id="mobileapps" class="iq-page-blog">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="iq-blog-box">
<div class="iq-blog-image clearfix popup-gallery">
<div class="item">
<a href="images/screenshots/05.jpg" class="popup-img">
<a href="images/screenshots/06.jpg" class="popup-img">
<a href="images/screenshots/07.jpg" class="popup-img">
<a href="images/screenshots/08.jpg" class="popup-img">
<img class="img-responsive" src="images/services/radio.png" alt="#"></a></a></a></div>
</div>
<div class="iq-blog-detail">
<div class="blog-title"> <section class="text-center"><h5 class="iq-tw-6">Title goes here</h5> </a> </div>
<div class="blog-content">
<p>Test goes here.</p>
<p>*Text goes here.</p>
</div>
Я проследил всплывающую галерею до его JS папки и нашел это:
$('.popup-gallery').magnificPopup({
delegate: 'a.popup-img',
tLoading: 'Loading image #%curr%...',
type: 'image',
mainClass: 'mfp-img-mobile',
gallery: {
navigateByImgClick: true,
enabled: true,
preload: [0, 1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
Is есть ли что-то, что я могу добавить, чтобы каждое основное изображение загружало свои всплывающие изображения?
Его веб-сайт еще не работает, но вот образец изображения, и, как вы можете видеть, каждое основное изображение загружает всего 8 вместо 4.
Любая помощь приветствуется.