動態鏈接在花式框jQuery的WordPress圖像

我正在設計一個網站在Wordpress中。動態鏈接在花式框jQuery的WordPress圖像

我需要Fancybox的幫助。我正在使用高級縮放的花式框。當我們將鼠標懸停在圖片上時，它會像ecoomerce網站中的縮放效果一樣，當我點擊它時，fancybox會打開更大尺寸的圖片。

現在我想添加一個鏈接在這個fancybox彈出窗口，這將使用戶到該產品的專用頁面。但我不知道如何在jQuery中添加動態鏈接。

這裏是從的fancybox jQuery的片斷提前

 // HTML templates 

     tpl: { 
      wrap  : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>', 
      image : '<img class="fancybox-image" src="{href}" alt="" /><div class="fancybox-caption"><a href="**?page_id=**">Click here to view the details</a></div>', 
      iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>', 
      error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>', 
      closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>', 
      next  : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>', 
      prev  : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>' 
     },

感謝

笛莎

來源

2013-06-19 Disha

而不是打開一個圖像打開一個iframe或DIV你有鏈接和你的形象。或者只是尋找標題/標題，並在那裏添加你的鏈接，我記得我在花哨的盒子網站本身看到了這樣的標題演示。 –

感謝您的及時答覆Sumit。讓我試試這個，會讓你知道它是否有效。 – Disha

我很抱歉地說，但我真的是新的jQuery和PHP的發展。我的問題是提供與圖像彈出的動態鏈接。正如你所說添加標題可能會有所幫助。但仍然如何給wordpres post的動態鏈接？ – Disha

下面是示例我的fancybox例如發現

http://jsfiddle.net/G5TC3/

代碼沒關係是BeforeShow：這個例子多顯示Facebook鏈接，但您可以輕鬆地將其替換爲鏈接或圖像或內容。

$(".fancybox") 
.attr('rel', 'gallery') 
.fancybox({ 
    beforeShow: function() { 
     if (this.title) { 
      // New line 
      this.title += '<br />'; 

      // Add tweet button 
      this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> '; 

      // Add FaceBook like button 
      this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>'; 
     } 
    }, 
    afterShow: function() { 
     // Render tweet button 
     twttr.widgets.load(); 
    }, 
    helpers : { 
     title : { 
      type: 'inside' 
     } 
    } 
});

http://fancyapps.com/fancybox/是fancybox家的網址。

要添加產品鏈接，請將URL作爲data-url放入您的標籤中，然後更改beforeShow函數以從標籤中讀取該數據url我猜$（this）.attr（「data- url「）應該給出這個值。我沒有測試它。但一旦你有網址，你可以很容易地在這裏顯示它。

來源

2013-06-19 11:36:44

動態鏈接在花式框jQuery的WordPress圖像

回答

相關問題