在jQuery的畫廊描述區域添加超鏈接

-1

我使用jQuery插件稱爲Elastislide可以在這裏看到： http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/在jQuery的畫廊描述區域添加超鏈接

我有是我想要插入超鏈接的問題圖片圖片描述區域，但它似乎沒有允許任何html編碼在這個領域工作。任何方式在這個？

相關的HTML代碼如下所示：。

<div id="rg-gallery" class="rg-gallery"> 
    <div class="rg-thumbs"> 
    <!-- Elastislide Carousel Thumbnail Viewer --> 
     <div class="es-carousel-wrapper"> 
     <div class="es-nav"> 
      <span class="es-nav-prev">Previous</span> 
      <span class="es-nav-next">Next</span> 
     </div> 
     <div class="es-carousel"> 
      <ul> 
       <li> 
       <a href="#"> 
        <img src="images/print_thumbs/1.jpg" data-large="images/print_images/1.jpg" alt="image01" data-description="This is my text. would love a linked word on some of them" /> 
       </a> 
       </li>

來源

2013-01-23 david ross

如果（標題） $ rgGallery.find（ 'div.rg字幕'）顯示（）兒童（ 'P'），空（）.text（title）;

代替的.text使用.html和數據，說明在像谷歌 HTML鏈接進入，這是一個快捷方式，更好的辦法是改變這個設置標題= $ thumb.data（「說明」）;任何你想要

，但第一種方式更容易，應該工作

來源

2013-01-23 05:11:48

這是建議基於閱讀插件的文檔 - 但爲了使這種方式鏈接，你必須改變.text設置爲.html以便jQuery方法處理HTML –

感謝James，但似乎沒有工作。當更改gallery.js文件中的代碼並在數據描述中添加html代碼時，它會在小型圖庫縮略圖下顯示html代碼，而不是描述區域，雖然它突出顯示懸停，但實際上並不會任何地方。對原創設計師爲什麼使用.text和.html也有點好奇。更簡單？ –

我認爲它只是被錯誤地解析試試在數據描述中只使用一個''我知道它可以工作，如果你在我的網站上的螢火蟲運行這個代碼http://dalydd.com/ $（'＃left_middle'）。 attr（「data-garbage」，'yes'） x = $（'＃left_middle'）。attr（'data-garbage'）; $（'＃left_middle'）。html（x）它將用一個yes鏈接替換左邊的內容，只是去google –

首先，你的問題是困惑 - 「我試圖插入超鏈接到圖片庫圖片說明區域」由我認爲你指的是數據描述屬性。如果是這樣，是的，你不能添加超鏈接。爲了得到這一點，你可以圍繞另一個數據屬性添加到img標籤，像這樣：

<img src="images/print_thumbs/1.jpg" data-large="images/print_images/1.jpg" alt="image01" data-description="This is my text. would love a linked word on some of them" data-extlink="http://www.google.com" />

而且通過改變你的代碼使用新的屬性，我將把http://tympanus.net/Tutorials/ResponsiveImageGallery/，因爲你沒有提供你的代碼。您將不得不修改http://tympanus.net/Tutorials/ResponsiveImageGallery/js/gallery.js代碼：

var $thumb = $item.find('img'), 
    largesrc = $thumb.data('large'), 
    title  = $thumb.data('description'), 
    extlink = $thumb.data('extlink'); 

if(title) 
    $rgGallery.find('div.rg-caption').show().children('p').empty().html('<a href="'+extlink+'">'+title+'</a>');

來源

2013-01-23 05:20:44 darshanags

很好，謝謝darshanags。這是問題所在。您的信息實際上給了我一個很好的洞察jQuery如何工作。不幸的是，它並沒有完全解決我的問題（現在看來每個描述都必須有一個鏈接），但我想我可以通過一些實驗找出解決方法。乾杯! –

@davidross很高興幫助。你是對的，我的答案只適用於數據分享屬性存在的情況。我不想混亂的代碼，只提供最低限度;）我相信，當屬性不存在時，你將能夠找到你的方式。讓我知道你是否需要任何幫助。提示：當data-extlink屬性不存在時，extlink變量將不確定。 – darshanags

實際上，它可以將文本更改爲html。只要確保將鏈接換成單引號而不是雙引號。它的工作就像一個魅力。你甚至可以使用中斷標籤。

所以更改此設置：

if(title) $rgGallery.find('div.rg-caption').show().children('p').empty().text(title);

這樣：

if(title) $rgGallery.find('div.rg-caption').show().children('p').empty().html(title);

在gallery.js

，寫你這樣的信息在HTML頁面中：

<li><a href="#"><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale. <a href='http://www.google.com'>Link goes to Google</a>" /></li>

來源

2014-02-02 07:08:16 Winlyn

在jQuery的畫廊描述區域添加超鏈接

回答

相關問題