彈出Magnific酒店在線畫廊

我使用的是莊重的彈出插件（http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup）彈出Magnific酒店在線畫廊

可能我把我的代碼在這裏第一次：

$(document).ready(function() { 

$('.open-popup-link').magnificPopup({   
    // Delay in milliseconds before popup is removed 
    removalDelay: 600, 

    // Class that is added to popup wrapper and background 
    // make it unique to apply your CSS animations just to this exact popup 
    mainClass: 'mfp-fade', 

    type:'inline', 
    midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href., 
    callbacks: { 
     beforeOpen: function() { 
      if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){ 

       if ($('.imagetitle').length > 0) { 
        // it exists 
       }else{ 
        $(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>"); 
        $(".image-container span.imagetitle").css({ 
         "left": $(".image-container img").position().left+"px", 
         "margin-top":10+"px", 
         "margin-bottom":10+"px"         
        }); 
       } 
      } 
      //Make it a Gallery! - Whoop Whoop 
      if($("div.white-popup").length > 1){ 
       $("div.white-popup").append("<div class='popupgalleryarrowleft'>&nbsp;</div>"); 
       $("div.white-popup").append("<div class='popupgalleryarrowright'>&nbsp;</div>"); 
      } 
     }, 
     open: function(){ 
      // Klick Function für die Gallery einbauen! 
      $(".popupgalleryarrowleft").click(function(){ 
       $.magnificPopup.instance.prev();      
      }); 

      $(".popupgalleryarrowright").click(function(){ 
       $.magnificPopup.instance.next(); 
      }); 
     } 
    }     
});

}）;

所以我想有一個內聯畫廊。它工作一切正常，但這部分不：

// Klick Function für die Gallery einbauen! 
      $(".popupgalleryarrowleft").click(function(){ 
       $.magnificPopup.instance.prev();      
      }); 

      $(".popupgalleryarrowright").click(function(){ 
       $.magnificPopup.instance.next(); 
      });

我只是想獲得下一個實例，當有一個。當我在運行時通過螢火蟲運行此代碼時，它的工作原理！

任何人都可以幫助我嗎？希望。

問候大衛

來源

2014-01-30 David Lambauer

可能的重複[如何在HTML中使用Magnific-Popup定義內聯內容的庫？]（http://stackoverflow.com/questions/18067062/how-do-i-define-a-gallery -of-直列內容的HTML的可直接使用的與 - 莊重，彈出） –

正在尋找同樣的事情。我想，在這裏，你在找什麼http://codepen.io/anon/pen/kInjm

$('.open-gallery-link').click(function() { 

    var items = []; 
    $($(this).attr('href')).find('.slide').each(function() { 
    items.push({ 
     src: $(this) 
    }); 
    }); 

    $.magnificPopup.open({ 
    items:items, 
    gallery: { 
     enabled: true 
    } 
    }); 
});

來源

2014-09-04 10:08:51

我需要創建一個畫廊自定義導航，所以我打了使用$.magnificPopup.instance.next();。它可以在放入圖庫的點擊處理程序時起作用。否則，找不到「下一個實例」，因爲它尚不存在。

底部/標題欄（see it on codepen）上點擊時，這將導航到下一個庫圖像：

$('.gallery').magnificPopup({ 
    type: 'image', 
    gallery: { 
    enabled: true 
    } 
}); 

$('.gallery').click(function() { 
    $('.mfp-bottom-bar').click(function() { 
    $.magnificPopup.instance.next(); 
    }); 
    return false; 
});

這裏還有一個更完整的example on Codepen，與多個畫廊。

這一個還使用回調來調整彈出窗口中自定義導航和填充的高度。這很有用，因爲我的項目中的導航按鈕有很高的高度，並且正在被屏幕底部切斷。（默認情況下，只有圖像高度本身用於計算彈出窗口在視口中的適用方式。）

希望這對某人有用。我知道這個問題是兩年前的事，但也許其他人也會像Google一樣使用谷歌搜索。

來源

2016-03-20 01:32:18

彈出Magnific酒店在線畫廊

回答

相關問題