-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

実際には、テキストを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 に答える
0

if( タイトル ) $rgGallery.find('div.rg-caption').show().children('p').empty().text( タイトル);

.text の代わりに .html を使用し、data-description に Google のような html リンクを入力します。これは近道ですが、この設定を変更することをお勧めします。あなたが望むものに

しかし、最初の方法はより簡単で、うまくいくはずです

于 2013-01-23T05:11:48.803 に答える