來自img標籤的Fancybox標題不是href

有沒有一種方法可以從<img>標籤取代標籤而不是<a>標籤？來自img標籤的Fancybox標題不是href

例如 HTML：

<a rel="fancybox" href="#"> 
<img src="ball.jpg" title="this is the caption i want to show in fancybox" alt="alt text here" /> 
</a> 

<a rel="fancybox" href="#"> 
<img src="ball2.jpg" title="this is the caption2" alt="alt text here" /> 
</a> 

<a rel="fancybox" href="#"> 
<img src="ball3.jpg" title="this is the caption 3" alt="alt text here" /> 
</a>

我已經試過，但它不工作： JQuery的：

  $("a[rel=fancybox]").fancybox({ 
       'transitionIn': 'elastic', 
       'transitionOut': 'elastic', 
       'titlePosition': 'inside', 
       'titleFormat': function (title, currentArray, currentIndex, currentOpts) { 
        title = $(this).find("img").attr("title"); 
        return '<span>' + title + '</span>'; 
       } 
      });

來源

2012-07-19 ShaneKm

什麼版本的fancybox的API選項onStart的title屬性？因爲您正在使用v1.3.2 +和v2.x的選項，這些選項彼此不兼容。 – JFK 2012-07-19 06:54:47

jquery.fancybox-1.3.4.js – ShaneKm 2012-07-19 06:58:34

有關的fancybox V1.3.4只需使用其中基本上你設定的img標籤（不是title屬性）像

的 alt屬性的fancybox稱號API選項 titleFromAlt

<a rel="fancybox" href="#"> 
<img src="ball.jpg" alt="this is the caption i want to show in fancybox" /> 
</a>

那麼你的腳本：

  $("a[rel=fancybox]").fancybox({ 
       'transitionIn' : 'elastic', 
       'transitionOut': 'elastic', 
       'titlePosition': 'inside', 
       'titleFromAlt' : true 
      });

你可以瞭解更多有關this option and how title works in fancybox v1.3.2+ here

#EDIT：強制讀取來自img標籤使用像

 $("a[rel=fancybox]").fancybox({ 
      'transitionIn' : 'elastic', 
      'transitionOut': 'elastic', 
      'titlePosition': 'inside', 
      'onStart' : function(currentArray,currentIndex){ 
       var obj = currentArray[ currentIndex ]; 
       this.title = $(obj).find('img').attr("title"); 
      } 
     });

來源

2012-07-19 07:07:42 JFK

但是對於搜索引擎優化的目的，我需要它從圖像的「標題」標籤中拉出來 – ShaneKm 2012-07-19 07:11:36

看到我的編輯從'img'標籤獲得'title'屬性 – JFK 2012-07-19 07:24:16

你做到了！謝謝！ – ShaneKm 2012-07-19 07:29:37

試試這個：

$("img[title=fancybox]").fancybox({ 
      'transitionIn': 'elastic', 
      'transitionOut': 'elastic', 
      'titlePosition': 'inside', 
      'titleFormat': function (title, currentArray, currentIndex, currentOpts) { 
       title = $(this).find("img").attr("title"); 
       return '<span>' + title + '</span>'; 
      } 
     });

來源

2012-07-19 06:46:49

$（「a [rel = fancybox]」）。fancybox（{HAS is for the caller for other reasons。 – ShaneKm 2012-07-19 06:50:10

試試這個 -

 $("a[rel=fancybox]").fancybox({ 
      'transitionIn': 'elastic', 
      'transitionOut': 'elastic', 
      'titlePosition': 'inside', 
      'titleFormat': function (title, currentArray, currentIndex, currentOpts) { 
       title = $(currentArray[currentIndex]).find('img').attr('title'); 
       return '<span>' + title + '</span>'; 
      } 
     });

或者你可以傳遞參數'titleFromAlt' : true

來源

2012-07-19 07:03:39

does not work ... – ShaneKm 2012-07-19 07:06:30

答案已更新。試試，它會得到標題 – 2012-07-19 07:16:51

@YograjGupta：你在釣魚嗎？你正在複製其他人的帖子的答案...這就是所謂的剽竊。 – JFK 2012-07-19 07:28:35

來自img標籤的Fancybox標題不是href

回答

相關問題