Fancybox 2自定義標題和標題[來自A（標題）和IMG（替代品）

我試圖使用標題和「標題」從圖像alt標籤與fancybox 2 ...由於某種原因，我似乎無法從$（本）.attr（ '標題'）的工作，字幕工作...Fancybox 2自定義標題和標題[來自A（標題）和IMG（替代品）

$('.fancybox').fancybox({ 

     beforeShow : function() { 
      this.title = '<div class="new-title-title">' + $(this).attr('title') + '</div><div class="new-title-alt">' + $(this).children('img:first').attr('alt') + '</div>'; 
     }, 

     helpers : { 
      title: { 
       type: 'inner', 
       beforeShow: function(opts) { 
        console.log('beforeShow title helper'); 
       }, 
      }, 
     }, 

    });

標題從$（本）。兒童（ 'IMG：第一'）ATTR（ 'ALT'）說。未定義的...我知道我必須失去了一些東西簡單...

來源

2012-01-30 stapler

如果我理解正確的，你想的fancybox標題作爲a標籤的title屬性+在img標籤alt屬性的組合。

如果上面的是正確的，那麼具有類似於

<a class="fancybox" href="images/01.jpg" title="title anchor 01" ><img src="images/01t.jpg" alt="alt image 01" /></a>

一個html中的fancybox標題應該說「標題錨01替代圖片01」

你做這個腳本：

$(document).ready(function() { 
$(".fancybox").fancybox({ 
    helpers : { 
    title: { type: 'inside'} 
    }, 
    afterLoad: function(){ 
    this.title = this.title + ' ' + $(this.element).find('img').attr('alt'); 
    } 
}); // fancybox 
}); // ready

來源

2012-03-15 20:09:31 JFK

與調試擺弄我發現這個工程：

beforeShow : function() { 
    var alt = this.element.children[0].alt; 
    this.title = '<div class="new-title-title">' + alt + '</div>'; 
},

它並不是最優雅的方式，但它可以滿足您（我）的要求 - 從圖像中獲取ALT值。

問候，保羅

來源

2012-03-15 13:53:36 fragmentedreality

我有一個類似的問題，並最終使用縮略圖圖像的單獨的標題標記。似乎也起作用，儘管不如動態。

<a class="fancybox-print" data-fancybox-type="iframe" title="Banking On Fun<p>Bank of America</p><br /><h3>For Bank of America we created print and in-store POP that told how home loans could turn dreams into reality.</h3>"href="template-print01.html"><img class="print" src="images/print.jpg" title="PRINT" alt=""/></a>

來源

2012-05-22 20:31:04

如果您使用的fancybox與角ng-repeat你可以做這樣的事情，那麼它也適用於文本，你不需要一個img標籤或標籤img alt。

title="<b>{{banner.fancyboxTitle}}</b><br>{{ banner.fancyboxParagraph }}"

來源

2015-06-16 01:10:27

Fancybox 2自定義標題和標題[來自A（標題）和IMG（替代品）

回答

相關問題