adding hyperlinks in a jquery gallery description area

Question

I'm using a jQuery plug-in called Elastislide which can be seen here: http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

The problem I'm having is I'm trying to insert a hyperlink into the gallery image description area but it doesn't seem to allow any html coding to work in this area. Any way around this?

Relevant html code looks like this:

<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

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

instead of .text use .html and in data-description enter in html link like google this is a shortcut way the better way would be to change this setting title = $thumb.data('description'); to whatever you want

but the first way is easier and should work

Answer 2

First off, your question is confusing - "I'm trying to insert a hyperlink into the gallery image description area" by that I assume that you are referring to the data-description attribute. If so, yes, you cannot add a hyperlink. To get around this you can add another data attribute to the img tag like so:

<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" />

And make use of the new attribute by altering your code, I will refer to http://tympanus.net/Tutorials/ResponsiveImageGallery/ since you have not provided your code. You will have to modify http://tympanus.net/Tutorials/ResponsiveImageGallery/js/gallery.js code:

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 3

Actually that does work changing text to html. Just be sure to wrap the link in single quotes rather than double quotes. It's working like a charm. You can even use break tags.

So change this:

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

to this:

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

in the gallery.js and write your info like this in your html page:

<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>