Magnific Popup的自定義標題

我試圖讓Magnific Popup根據它使用的目標周圍的其他元素顯示標題。鑑於以下標記，我希望標題爲「Foobar」。Magnific Popup的自定義標題

<div class="container"> 

    <article> 
     <h2>Foo</h2> 
     <figure> 
      <a href="img/img-1.jpg"> 
       <img src="img/img-1.jpg" /> 
      </a> 
      <figcaption> 
       bar1 
      </figcaption>         
     </figure> 
    </article> 

    <article> 
     <h2>Foo</h2> 
     <figure> 
      <a href="img/img-2.jpg"> 
       <img src="img/img-2.jpg" /> 
      </a> 
      <figcaption> 
       bar2 
      </figcaption>         
     </figure> 
    </article> 

</div>

而尋找解決方案在線（包括本上StackOverflow）我已經試過如下代碼：

$('.container').magnificPopup({ 
    delegate: 'article figure a', 
    type: 'image', 
    titleSrc: function(item) { 
     return item.el.parent('article').find('h2').text() + item.el.parent('article').find('figcaption').text(); 
    }, 
    gallery:{enabled:true} 
});

塑造的功能可能是一個問題，我甚至一直在努力，簡單地返回一個字符串常量，但似乎什麼都不做：

titleSrc: function(item) { 
    return "fake Foobar"; 
}

沒有人有任何線索，我在做什麼錯？

注：如果我使用titleSrc，它工作：「標題」，但是這不是我想要的行爲，因爲它讓我有重複的標記內容。

來源

2014-01-22 radu.luchian

你可以只是創建jsfiddle相同，http：//jsfiddle.net – dreamweiver

你確定titleSrc只使用一個字符串？查看文檔，你應該把它放在圖像下，比如'image：{titleSrc：...}'。 – jazZRo

按照文檔titleSrc：{}應該來自內部圖像：{}，您可以使用item.el.parents（）代替item.el.parent（）。

糾正代碼

 $('.container').magnificPopup({ 
      delegate: 'article figure a', 
      type: 'image', 
      gallery:{enabled:true}, 
      image: { 
      titleSrc: function(item) { 
      return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html(); 
      } 
     } 
     });

來源

2014-01-22 11:55:20 krizna

你說得對，問題出在titleSrc：{}以外的位置：{}。所以這個問題其實是我缺乏關注的。感謝@krizna的幫助。 –

我的設計要求我有一個標題&描述每個圖像幻燈片，因此我需要莊重彈出一個自定義標題，我試圖從@krizna的答案，但我只是得到了title，調試我進入了magnets彈出窗口（jquery.magnefic-popup.js）的js文件，並發現在自定義標記解析時被調用的函數，它被適當調用爲「_getTitle」。它獲取一個item對象作爲參數。我記錄了這個item對象，發現它有我們的item參數所在的data屬性。

我初始化使用項目選項（在文檔初始化3路），在彈出這裏是我的自定義項目目標

items: [ 
      { 
       src: 'https://c6.staticflickr.com/9/8785/16698139093_3c30729f1b.jpg"', 
       title: 'We buy Nike shoes', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      }, 
      { 
       src: 'https://c2.staticflickr.com/8/7662/17307905305_92ae5081bf_b.jpg"', 
       title: 'You can add HTML code dynamically via JS (directly before the initialization), or have it in the page initially (like it\'s done on the demo page)', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      }, 
      { 
       src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg', 
       title: 'Avoid serving big images (larger than 2000x1500px) for mobile, as they will dramatically reduce animation performanc', 
       description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout' 
      } 
     ],

每個項目都有圖像的SRC，標題&說明，現在我titleSrc功能是

titleSrc: function(item) { 
       return '<p id="gallery-image-title">' + item.data.title +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>'; 
     }

我還修改了「_getTitle」功能，因爲它只有在項目對象解析title屬性（評論的前兩行），我的「_getTitle」現在看起來是這樣

_getTitle = function(item) { 
    console.log(item); 
    /*if(item.data && item.data.title !== undefined) 
     return item.data.title;*/ 

    var src = mfp.st.image.titleSrc; 

    if(src) { 
     if($.isFunction(src)) { 
      return src.call(mfp, item); 
     } else if(item.el) { 
      return item.el.attr(src) || ''; 
     } 
    } 
    return ''; 
};

現在我已經控制標記&有2個動態src標題屬性。

來源

2016-09-10 12:28:17 carelesslyChoosy

Magnific Popup的自定義標題

回答

相關問題