Question

我正在使用一个名为Elastislide的jQuery插件，可以在这里看到： http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

我遇到的问题是我正在尝试在图库描述区域中插入超链接，但它似乎不允许任何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>

Answer 1

首先，你的问题很混乱 - ＆＃34;我试图在画廊图片描述区域插入超链接＆＃34;我假设您指的是数据描述属性。如果是，是的，您无法添加超链接。要解决此问题，您可以将其他数据属性添加到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>' );

Answer 2

if（title） $ rgGallery.find（'div.rg-caption'）。show（）。children（'p'）。empty（）。text（title）;

而不是.text使用.html并在数据描述中输入像谷歌这样的html链接这是更改此设置的更好方法的快捷方式 title = $ thumb.data（'description'）;无论你想要什么

但第一种方式更容易，应该有效

Answer 3

实际上，这确实可以将文本更改为html。请务必将链接用单引号而不是双引号括起来。它的工作就像一个魅力。你甚至可以使用break标签。

所以改变这个：

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>

在jquery图库描述区域中添加超链接

3 个答案: