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

Я пытаюсь создать галерею с плагином Magnific Popup Lightbox Gallery. Я проверил документацию Дмитрия Семенова и скопировал блоки кода точно так же, как он заявил. Это мой <head> раздел, в котором я все файлы включены:Magnific Popup Gallery не работает

<head> 
<title>Gallery</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="styles/core_styles_gallery2.css"> 
    <link rel="stylesheet" type="text/css" href="styles/magnific-popup.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="scripts/jquery.magnific-popup.js"></script> 
    <script src="scripts/jQuery_gallery.js"></script> 
</head>

Как вы можете видеть, что есть просто бутстрапом файлы и мои CSS листы, файл библиотеки Jquery, плюс 2 .css и .js файлы для которое разработчик говорит включить. Вот мой HTML галерея блок кода (класс «hoverZoomLink» был использован в его разработчика, например):

<div class="article-content"> 
    <div class="container-fluid"> 
     <div class="container"> 
      <div class="popup-gallery"> 
       <a href="styles/images/gallery/image.jpg" class="hoverZoomLink"><img src="styles/images/gallery/image.jpg" width="75" height="75"></a> 
       <a href="styles/images/gallery/image(1).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(1).jpg" width="75" height="75"></a> 
       <a href="styles/images/gallery/image(2).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(2).jpg" width="75" height="75"></a> 
       <a href="styles/images/gallery/image(3).jpg" class="hoverZoomLink"><img src="styles/images/gallery/image(3).jpg" width="75" height="75"></a> 
      </div> 
     </div> 
    </div> 
</div>

Наконец, это код JQuery (находится во внешних jQuery_gallery.js файл я включил в <head>), который, как предполагается, инициализация всплывающего окна:

$(document).ready(function() { 
$('.popup-gallery').magnificPopup({ 
    delegate: 'a', 
    type: 'image', 
    tLoading: 'Loading image #%curr%...', 
    mainClass: 'mfp-img-mobile', 
    gallery: { 
     enabled: true, 
     navigateByImgClick: true, 
     preload: [0,1] // Will preload 0 - before current, and 1 after the current image 
    }, 
    image: { 
     tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', 
     titleSrc: function(item) { 
      return item.el.attr('title') + '<small>by Marsel Van Oosten</small>'; 
     } 
    } 
});});

Ну, ничего не работает. Когда я нажимаю на изображения, они просто открываются на другой вкладке. Я новичок в программировании и веб-разработке, я пытался понять ошибки, но я понятия не имею, что я делаю неправильно. Пожалуйста, помогите мне!

источник

2015-12-03 Emilian Cebuc

Не могли бы вы попробовать удаление 1 из jquery.min.js ссылок в заголовке? Иногда это запутывается, когда jquery объявляется дважды. Редактировать; убедитесь, что вы не пропустили какие-либо/в каталоге –

nope, просто попробовали удалить его. Ничего не меняется. –

Добавлен ответ, чтобы показать код, который вы могли бы попробовать. –

<a href="image.jpg" class="image-link"> <img src="thumbnails.jpg" /> </a> // Initialize popup as usual $('.image-link').magnificPopup({ type: 'image', mainClass: 'mfp-with-zoom', // this class is for CSS animation below zoom: { enabled: true, // By default it's false, so don't forget to enable it duration: 300, // duration of the effect, in milliseconds easing: 'ease-in-out', // CSS transition easing function opener: function(openerElement) { return openerElement.is('img') ? openerElement : openerElement.find('img'); } } });

<a href="http://dummyimage.com/600x400/eee/000.jpg" data-group="1" class="galleryItem test">group 1 image 1</a> – <a href="http://dummyimage.com/600x400/000/fff.jpg" data-group="1" class="galleryItem test123">group 1 image 2</a> <br/><br/> <a href="http://dummyimage.com/600x200/000/fff.jpg" data-group="3" class="galleryItem">group 2 image 1</a> – <a href="http://dummyimage.com/600x900/000/fff.jpg" data-group="3" class="galleryItem">group 2 image 2</a>

var groups = {}; $('.galleryItem').each(function() { var id = parseInt($(this).attr('data-group'), 10); if(!groups[id]) { groups[id] = []; } groups[id].push(this); }); $.each(groups, function() { $(this).magnificPopup({ type: 'image', closeOnContentClick: true, closeBtnInside: false, gallery: { enabled:true } }) });

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

ответ

Смежные вопросы