Magnific Popup Gallery不工作

我正在嘗試使用Magnific Popup Lightbox Gallery插件創建一個畫廊。我已經檢查了Dmitry Semenov的文檔，並完全按照他的說法複製了代碼塊。這是我的<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文件的開發人員說，包括的宏大彈出窗口。這裏是我的（類「hoverZoomLink」曾通過開發在他的例子）的HTML代碼塊畫廊：

<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>'; 
     } 
    } 
});});

嗯，沒有任何工作。當我點擊圖片時，他們只是在另一個標籤中打開。我是編程和Web開發的新手，我試圖理解這些錯誤，但我不知道我做錯了什麼。請幫幫我！

來源

2015-12-03 Emilian Cebuc

你能嘗試刪除jquery.min.js鏈接1在標題中？有時候，當jquery被聲明兩次時，它會混亂起來。編輯;確保你沒有丟失 –

nope目錄中的任何/，只是現在嘗試刪除它。沒有什麼變化.. –

添加了一個答案，顯示你可以嘗試一些代碼。 –

嘗試像這樣與像開發商頁面的示例的基本啓動（改href和SRC ofcourse）：

<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>

，並在JS：

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 } 
    }) 

});

來源

2015-12-03 21:04:22

不，它沒有工作。仍然只是在新的瀏覽器選項卡中打開每個圖像...所以如果你說代碼不是問題，那麼是什麼？ –

它可能與我在單獨的文件中使用jQuery腳本的事實有關嗎？我知道這是推薦的方式，但是我應該在

相關問題

Magnific Popup Gallery不工作

回答

相關問題