Magnific-Popup не работает

Я хочу реализовать всплывающее окно Magnific на своем веб-сайте, я следовал всем инструкциям в документации, но ничего не произошло.

вот файлы заголовков, которые я включил.

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>

Это мой код инициализации.

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

$(document).ready(function() {
$('.portfolio-img').magnificPopup({
    delegate: 'a',
    type:'image'
   });
});

и мой код

<div class=" col-xs-offset-1"> 
   <div class=" twelve columns container">           
          <div data-anim-type="fadeInUp" class="setwidth25 animate fadeInUp">
                    <div class="box"> <a class=" portfolio-img"  href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" BORDER="0" src="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img"  href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20841080_1763381967286475_679893694361630086_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20914365_1763382237286448_3724536977546091967_n.jpg" height="200" width="200"> </a></div>
         </div>
         <div data-anim-type="fadeInUp" class=" setwidth25 animate fadeInUp">
                    <div class="box"> <a class="portfolio-img" href="Website/Community Service/Aug 15 Plantation/20840999_1763381930619812_5996646119960337765_n.jpg"><img alt="plantation" src="Website/Community Service/Aug 15 Plantation/20953405_1763381833953155_7689290877386847638_n.jpg" height="200" width="200"> </a></div>
         </div>
   </div>
</div>

Консоль не показывает ошибки, связанной с большим всплывающим окном, но она не работает. Я искал много связанных статей, но ни одна из них не работала. Я стучал головой об этом более 6 часов. Есть ли проблема с моим кодом. Как заставить это работать? Пожалуйста, помогите!!... Заранее спасибо.


javascript html magnific-popup
person Hari Hara Sudan    schedule 24.11.2017    source источник
comment
Прежде всего: почему вы включаете уменьшенный и обычный скрипт?   -  person Polaris    schedule 24.11.2017
comment
я не понял тебя   -  person Hari Hara Sudan    schedule 24.11.2017
comment
Кажется, вы включили оба: ‹script src=magnific-popup/jquery.magnific-popup.js›‹/script› ‹script src=magnific-popup/jquery.magnific-popup.min.js›‹/script›   -  person Polaris    schedule 24.11.2017
comment
только что попробовал, получится ли :)   -  person Hari Hara Sudan    schedule 24.11.2017

Ответы (2)


arrow_upward
0
arrow_downward

замените этот блок кода в своем коде. И убедитесь, что ваш путь jquery и js указан правильно. вы использовали несколько jquery и magnific js, в которых нет необходимости. удалите его и попробуйте только два файла сценария, которые я включаю здесь. я использовал его с cdn. Здесь работает нормально. Надеюсь, это поможет вам.

$('.portfolio-img').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		image: {
			verticalFit: false
		}
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>

person Raydoan Anik    schedule 24.11.2017
comment
спасибо за ваш ответ .... я заменил код, а также скрипт, как вы сказали ... но это не работает ... - person Hari Hara Sudan; 24.11.2017
comment
код должен быть вставлен внутри $(document).ready(function() {}); блокировать. нравится - person Raydoan Anik; 24.11.2017
comment
также добавьте https: в свои сценарии jquery. ты пропустил это. и убедитесь, что все файлы, которые вы включили, в порядке. - person Raydoan Anik; 24.11.2017
comment
После изменения что выдает ошибку консоли? Могу ли я увидеть скриншот вашего кода. может где-то конфликтовать с другим кодом Js. - person Raydoan Anik; 25.11.2017
comment
Использование //@ для указания прагм sourceMappingURL устарело. Вместо этого используйте //# [Подробнее] masterslider.min.js:10 Ошибка мастер-слайдера: #masterslider не найден. masterslider.min.js:9:61869 Ошибка мастер-слайдера: #masterslider5 не найден. masterslider.min.js:9:61869 SyntaxError: отсутствует ) в скобках community.html:867:228 TypeError: $(...).magnificPopup не является функцией [Подробнее] community.html:881:1 Использование getPreventDefault () не рекомендуется. Вместо этого используйте defaultPrevented. jquery-1.js: 2: 40278 - person Hari Hara Sudan; 27.11.2017
comment
Я использовал лайтбокс вместо всплывающего окна Magnific, и это сработало отлично. Спасибо, Райдоан Аник, спасибо за помощь :) - person Hari Hara Sudan; 27.11.2017

arrow_upward
0
arrow_downward

Похоже, вы не обернули код JavaScript внутри тегов <script></script>:

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

$(document).ready(function() {
$('.portfolio-img').magnificPopup({
    delegate: 'a',
    type:'image'
   });
});

Вероятно, это должно быть:

<script src="js/magnificpopinit.js"></script> (at the end of index.html within body)

<script>
    $(document).ready(function() {
        $('.portfolio-img').magnificPopup({
            delegate: 'a',
            type:'image'
        });
    });  
</script>
person Janis    schedule 25.11.2017