-1

我正在使用一个名为 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>
4

3 回答 3

1

首先，您的问题令人困惑-“我正在尝试将超链接插入图库图像描述区域”，因为我假设您指的是 data-description 属性。如果是这样，是的，您不能添加超链接。为了解决这个问题，您可以向 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-23T05:20:44.367 回答
0

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

而不是 .text 使用 .html 并在数据描述中输入 html 链接（如 google）这是一种快捷方式，更好的方法是更改​​此设置 title = $thumb.data('description'); 随心所欲

但第一种方法更容易，应该可以

于 2013-01-23T05:11:48.803 回答
0

实际上，这确实可以将文本更改为 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-02T07:08:16.657 回答